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

我不熟悉

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

 }

功能播放器列表（道具）{
常量[loading，setloading]=useState（true）
const[data，setData]=useState（）
const[loadData，{tempLoading，temperor，tempData}]=useLazyQuery（查询）；
异步函数getData（）{
loadData（）
}
useffect（（）=>{
if（tempData==未定义）{
getData（）
}
})
if（模板加载）{
返回
....
}
if（临时数据）{
返回（…）}
}

---

为了更好地理解，请查找上面的代码。

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

• 正在解构的

  useLazyQuery

  钩子返回的对象没有名为

  templading

  、

  tempError

  或

  tempData

  的属性。有关如何在使用解构语法时正确重命名变量的信息，请参见
• 由于

  tempData

  始终未定义，因此每次渲染时都会调用

  useffect

  hook的回调
• 对每个渲染调用

  loadData

  ，会触发另一个渲染

通过使用

useLazyQuery

，您不必要地使代码复杂化了——您应该改用

useQuery

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

const{data，load}=useQuery（查询）
如果（装载）{
返回。。。。
}
返回。。。

Apollo客户端使用引擎盖下的fetch，这始终是异步的。听起来好像还有别的事情在发生。您应该编辑您的问题以包含相关代码。@DanielRearden，请查看编辑后的问题。感谢您更新Apollo客户端是异步客户端的信息。我的问题是我的UI在获取数据后没有得到正确更新。