Apollo 连续调用被取消，可能是由于 apolloClient 重新实例化所致

Question

在我的反应代码中，我有以下钩子和 onClick 函数：

const [getDataFromGraphql] = useGetDataFromGraphql();

const getData = async (...) => {
  const res = await getDataFromGraphql({ variables: { ... } });
  ...
}

其中 useGetDataFromGraphql 只是调用惰性查询的另一个钩子

export default function useGetDataFromGraphql() {
  return useLazyQuery<..,..>(
    query,
    {
      client: aPrivateClient,
    }
  );
}

并且

aPrivateClient

是 ApolloClient。

export default new ApolloClient({
  link: from([authLink, authExpiryLink, httpLink]),
  cache,
  defaultOptions,
});

我注意到，当我在短时间内多次单击不同的按钮并使用不同的变量调用相同的 onClick 函数时，除了最后一个调用之外的每个调用都会被取消，并且最后一个调用的结果会替换之前的所有内容，甚至尽管每个 onClick 操作都会传递不同的变量。

我看到这个answer，这让我尝试记住 Apollo 客户端，但这没有帮助。 React 应用程序连接到多个客户端，因此我们在钩子中指定一个客户端，并且文档中具有一个客户端的example可能不适用。

如何重组我的设置，以便连续的网络调用不会取消任何内容？而且，如果这确实是根本原因，我该如何使

ApolloClient

不重新实例化？

Answer 1

我们在之前的一个项目中使用的选项。 您可以将 Appolo Context 共享给其他组件。

在入口脚本中：

ReactDOM.render(
    <BrowserRouter>
        <ApolloProvider client={client}>
           <App/>
        </ApolloProvider>
    </BrowserRouter>, document.getElementById('root'))

客户端本身示例：

const client = new ApolloClient({
    link: ApolloLink.from([errorLink, splitLink]),
    cache: new InMemoryCache()
});

因此，在其他组件中，您可以执行以下操作：

import { gql, useMutation } from '@apollo/client';