如何在 react-apollo 中等待多个 useLazyQuery

Posted 2023-03-08

【中文标题】如何在 react-apollo 中等待多个 useLazyQuery

【英文标题】：How to wait for multiple useLazyQuery in react-apollo

【发布时间】：2021-09-26 14:24:57

【问题描述】：

我有一个gql 查询MY_Q 并有一个数据项列表，例如data_list = [data1, data2]

如何在每个数据项上对多个useLazyQuery()进行分组，并等待所有查询完成后再处理数据。

类似于Promise.all()。

例子：-

Promise.all (data_list.map((e) => useLazyQuery(MY_Q ,  variables :  data : 
e))).then ((res) 
 //process result.
)

【问题讨论】：

使用client.query，而不是钩子...***.com/search?q=%5Bapollo%5D+client.query

【参考方案1】：

我不会使用 Promise，因为你会想要你的 React 组件中的钩子返回什么，不是吗？

只需为每个单独的查询定义挂钩，然后根据目前返回的内容进行渲染。获取所有内容后，如果没有，则在组件中呈现加载视图。

function SomeComponent () 
  const [fetchInitial, data, fetchMore] = useLazyQuery(QUERY, 
    variables: 
      dataSets: [
        dataSet1,
        dataSet2
      ]
    
  );

【讨论】：

是的，但是 data_list 是动态的，如果我创建多个查询并将其存储在一个列表中并在 forEach() 中调用所有这些查询，则反应抱怨无法在回调中调用查询功能

动态？你的意思是你不知道需要执行多少查询？似乎有点奇怪。听起来像架构的问题。一般背景是什么？如果执行的是同一个查询，但变量不同，那么所有这些变量肯定应该在同一个变量集中吗？例如，如果我想要第 1 到 10 页，我会一次性发送；不要重复查询十次。

那将是最后一个选项，但如果我们不想这样做，应该可以在不渲染组件的情况下进行查询。因为我们可以手动设置状态来触发渲染

在这里多次渲染组件不应该是您关心的问题。毕竟，您会根据组件的状态在 UI 中显示您想要的内容。多次访问网络应该是一个更大的问题。根据您所说的，您应该在单个查询中执行此操作。

那么，是否有任何可能的方法来对上述查询进行分组，因为如果我有另一个列表并且必须再次将新查询注册到后端，或者这是与 gql 反应的限制。跨度>