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

Question

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

有没有其他方法可以让我以异步方式或在任何后台任务中调用 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 的属性。请参阅 here 了解如何在使用解构语法时正确重命名变量。
因为 tempData 始终未定义，您的 useEffect 挂钩的回调将在每次渲染时调用。
在每个渲染上调用 loadData 会触发另一个渲染。

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

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

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

How to call useQuery as an async task

apollo

graphql

react-native

apollo-client

react-hooks