useLazyQuery 在循环和 promise.all

如何解决useLazyQuery 在循环和 promise.all

我有一个数据数组（由日期组成），需要为其中的每个日期运行一个 graphql 查询。为数组中的每个日期解析的 Promise 应该返回新数据，我想将其推送到 react 组件的本地状态。

但不知何故，该函数只返回数组最后一个元素的数据。

    ...
    const [
        getInvoiceByDateQuery,{ loading: getInvoiceByDateQueryLoading,data: getInvoiceByDateQueryData },] = useLazyQuery(GET_INVOICES_BY_DATA,{
        onCompleted({ getInvoicesByDate }) {
          console.log({ getInvoicesByDate });
          const invoiceList = [...state.invoiceList];
          invoiceList.push(getInvoicesByDate[0]);
          _setState({
            invoiceList,});
        },});
    
    ...
    
    useEffect(async () => {
    if (!!state.currentWeek.length) {
      await Promise.all(
        state.currentWeek.map(day => {
          console.log(day);
          return getInvoiceByDateQuery({
            variables: {
              date: day,},});
        }),);
    }
  },[]);

我浏览了 graphql 文档，它说 useLazyQuery 也不会返回任何像 useMutation 这样的承诺。因此，在我的 useEffect 钩子中 Promise.all 总是会返回 void。

我希望使用 onCompleted 的 useLazyQuery 返回回调并更新本地状态。

我尝试在地图迭代器中使用控制台，它在控制台中为数组中的每个元素成功打印了日期，但不知何故，函数仅对最后一个元素运行。

即使检查网络选项卡，我也看到查询只运行一次。

我也尝试了以下代码，但没有任何效果 -

useEffect(() => {
    if (!!state.currentWeek.length) {
      state.currentWeek.map(day =>
        getInvoiceByDateQuery({
          variables: {
            date: day,}),[]);

解决方法

每个 Apollo 挂钩创建一个“实例”，旨在一次提供一个操作（“数据槽”）。

... 应该返回新数据，我想将它推送到 react 组件的本地状态。

通常[也可能在这个用例中]不需要将数据复制到状态（数据重复）。

在 React 中，您应该考虑许多 <Day/> 组件，每个组件都为自己读取数据，呈现与日期相关的数据，提供指向日期详细信息页面/视图/等的链接。

当然，每个 <Day/> 组件都可以将获取的数据返回给父组件，只需使用 onCompleted 中调用的一些处理程序 fn（和 id/index props）来呈现它。

可以通过 useApolloClient 解决，因为这将允许一次触发多个查询。

const client = useApolloClient();
client.query({
        query: GET_DOG_PHOTO,variables: { breed: 'bulldog' },});