如何将 useQuery 作为异步任务调用

Question

我是React Native和 的新手Apollo-Client。在我的屏幕中有三个选项卡，各个选项卡正在调用自己的数据。但是由于useQuery用户界面完全冻结并提供非常糟糕的体验。

有没有其他方法可以useQuery以异步方式或在任何后台任务中调用？

编辑

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>) }

 }

请找到上面的代码以便更好地理解。

Answer 1

Apollo Client 使用始终异步的 fetch。问题是您正在创建一个无限循环。

• useLazyQuery您正在解构的钩子返回的对象没有名为tempLoading,tempError或 的属性tempData。请参阅此处了解如何在使用解构语法时正确重命名变量。
• 因为tempData始终未定义，所以useEffect每次渲染时都会调用钩子的回调。
• 调用loadData每个渲染会触发另一个渲染。

通过使用useLazyQuery，您不必要地使您的代码复杂化——您应该使用它useQuery。

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