javascript - useLazyQuery 在循环和 Promise.all 内不起作用

Question

我有一个数据数组(由日期组成)，需要对其中的每个日期运行 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 这样的 promise 。 因此，在我的 useEffect 钩子(Hook) Promise.all 中始终会返回 void。

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

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

即使检查网络选项卡，我也发现查询仅运行一次。

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

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

Answer 1

每个 Apollo 钩子(Hook)都会创建一个“实例”，旨在一次提供一个操作(“数据槽”)。

... should return new data and I want to push it in the local state of react component.

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

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

当然，每个 <Day/>组件可以将获取的数据返回给父级，只需使用 onCompleted 中调用的一些处理程序 fn (和 id/index 属性)来渲染它。 .