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

Question

我需要在组件挂载时调用状态变化查询。 假设我在数组中有 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]);

Answer 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 次。