如何在第一次挂载时使用 apollo 客户端在 react js 中多次调用相同的查询

Posted 2023-03-08

【中文标题】如何在第一次挂载时使用 apollo 客户端在 react js 中多次调用相同的查询

【英文标题】：How to call same query multiple times using apollo client in react js on first mount

【发布时间】：2021-09-17 17:10:35

【问题描述】：

我需要在组件挂载时调用状态变化查询。 假设我在数组中有 5 个状态，我正在循环该数组。

预期的输出应该是：该查询必须被调用 5 次。

但问题是只调用了一次查询数组中最后位置的状态。

const loadedStatus = ["A", "B", "C", "D", "E"]

const [listSomeData] = useLazyQuery(LIST_SOME_DATA, 
        fetchPolicy: 'network-only'
    );

const listSomeDataHandler = async (statusId, pagination = , filters = ) => 
        await listSomeData(
            variables: 
                statusId,
                page: pagination?.page,
                pageSize: pagination?.pageSize,
                ...filters
            
        );
    ;

useEffect(async () => 
        loadedStatus &&
            Promise.all(
                loadedStatus.map(status => 
                    listSomeDataHandler(
                        status.id, 
                         page: 0, pageSize: 10 , 
                        filters
                     );
                )
            );
    ,[loadedStatus]);

【问题讨论】：

你能分享一些代码吗？从现在开始你做了什么？

@GiovanniEsposito 我添加了一些代码。请看一下

【参考方案1】：

useEffect 中的异步应被视为反模式（here 是一种解释），您应该收到类似 Warning: An Effect function must not return anything besides a function, which is used for clean-up. 的警告。 不仅您的 useEffect 缺少依赖项：listSomeDataHandler。

在这种情况下，最好在useEffect 中调用异步函数（并将listSomeDataHandler 移动到useEffect 中）。所以你的代码变成了：

useEffect(() => 
    const listSomeDataHandler = async (status) => 
      await listSomeData(status);
    ;

    (async () => 
      Promise.all(
        loadedStatus.map((status) => 
          return listSomeDataHandler(status);
        )
      );
    )();
  , [loadedStatus]);

Here 我做了一个codeandbox 示例，如您所见，listSomeDataHandler 将被调用 5 次。

【讨论】：

感谢您的回复。一切正常，但是当您在处理程序中实现 apollo 客户端查询时，只会调用一次该查询。这里 listSomeData 是一个 graphql 客户端查询。