使用 Apollo 时并非所有惰性查询都进行轮询

Question

当用户单击按钮时，我正在使用 Apollo 查询多个项目。后端的数据需要一段时间才能填充，所以我想使用轮询来最终返回结果。

我使用循环遍历项目并使用轮询间隔调用查询来实现此目的。但是，我只收到最后一个循环期间执行的最新查询的结果。

如何同时以轮询间隔运行多个查询？

    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    const [loadData, { data }] = useLazyQuery(getData);
    ...
                       for (const [idx, data] of Object.entries(data)) {
                            await loadData({
                                variables: { id: dataId },
                                pollInterval: 3000,
                                notifyOnNetworkStatusChange: true,
                                onCompleted: () => {
                                    console.log('loaded', idx);
                                    void onboardData(idx, dataId ?? '');
                                },
                                onError: (e) => {
                                    console.log('error', idx);
                                },
                            });
                        }

有3个数据时的结果：

error 0
error 1
error 2
error 2
error 2
...

我期望输出与此类似：

error 0
error 1
error 2
error 0
error 1
error 2
error 1
error 2
error 0

Answer 1

使用惰性查询，在组件内部您只能访问上次启动的查询中的数据。

这意味着，它们永远不是触发多个查询并等待其结果的正确工具 - 虽然您可以通过保存返回的 Promise 实例来访问结果，但它们只会返回一个结果，而永远不会返回任何更新。在这里投票是没有用的。

由于您本质上是在 React hooks 范围之外做一些事情，所以您可能应该使用

useApolloClient

来获取 AC 实例，然后多次调用

client.watchQuery

，这将为您提供可观察的数据，并让您控制自己想要多长时间订阅您发出的各个查询 - 包括投票。