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

【问题标题】：How to call useQuery as an async task如何将 useQuery 作为异步任务调用
【发布时间】：2020-05-07 13:52:16
【问题描述】：

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

 }

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

【问题讨论】：

Apollo 客户端在后台使用 fetch，它始终是异步的。听起来好像发生了其他事情。您应该编辑您的问题以包含相关代码。
@DanielRearden ，请查看编辑后的。

标签： react-native graphql react-hooks apollo apollo-client

【解决方案1】：

Apollo 客户端使用总是异步的 fetch。问题是您正在创建一个无限循环。

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

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

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

【讨论】：

感谢您更新关于 Apollo Client 是异步的。我的问题是我的 UI 在获取数据后没有正确更新。