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

Question

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

是否有其他方法可以以异步方式或任何后台任务调用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 客户端使用始终异步的 fetch。问题是您正在创建一个无限循环。

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

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

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