Question

我是本机和Apollo-Client的新用户。我正在实现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>) } }的原因，UI完全冻结并且提供了非常糟糕的体验。

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

编辑

FETCH

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

Answer 1

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

您正在销毁的useLazyQuery挂钩返回的对象没有名为tempLoading，tempError或tempData的属性。有关使用解构语法时如何正确重命名变量的信息，请参见here。
由于tempData始终是未定义的，因此useEffect钩子的回调将在每个渲染器上调用。
在每个渲染上调用loadData会触发另一个渲染。

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

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

如何在React Native中将useQuery作为异步任务调用

1 个答案: