как вызвать useQuery в качестве асинхронной c задачи в React Native - PullRequest
Новая
       32

как вызвать useQuery в качестве асинхронной c задачи в React Native

1 голос
/ 21 января 2020

Я новичок, чтобы отреагировать нативно и Apollo-Client. Я реализую хук useQuery.

На моем экране есть три вкладки, и отдельные вкладки вызывают свои собственные данные. Но из-за useQuery пользовательский интерфейс полностью зависает и дает очень плохой опыт.

Есть ли другой способ, которым я могу вызвать useQuery в асинхронном режиме c или в любой фоновой задаче?

EDIT 

function PlayerList(props) {

    const [loading , setloading] = useState(true)
    const [data, setData] = useState()
    const [loadData, { tempLoading, tempError, tempData }] = useLazyQuery(query);


   async function getData(){
        loadData()
   }

    useEffect(() => {

        if (tempData == undefined) {
            getData()
        }

    })

     if(tempLoading){
           return 
                <View >....</View>
     }
     if(tempData) {
          return ( <View> ... </View>) }

 }

Пожалуйста, найдите приведенный выше код для лучшего понимания.

1 Ответ

2 голосов
/ 21 января 2020

Клиент Apollo использует выборку, которая всегда асинхронна. Проблема в том, что вы создаете бесконечное l oop.

  • У объекта, возвращаемого хуком useLazyQuery, который вы разрушаете, нет свойств с именами tempLoading, tempError или tempData. См. здесь , чтобы узнать, как правильно переименовывать переменные при использовании синтаксиса деструктурирования.
  • Поскольку tempData всегда неопределен, обратный вызов вашей useEffect ловушки будет вызываться при каждом рендеринге.
  • Вызов loadData при каждом рендеринге запускает другой рендеринг.

Используя useLazyQuery, вы без необходимости усложняете свой код - вместо этого вы должны использовать useQuery. 

const { data, loading } = useQuery(query)
if (loading) {
  return <View>....</View>
}
return <View>...</View>
...