为什么 apollo 客户端网络请求取消了两次？答案

【问题标题】：Why apollo client network request cancelled twice?为什么 apollo 客户端网络请求取消了两次？
【发布时间】：2021-06-03 17:41:30
【问题描述】：

我的 apollo/client - useQuery 加载了两次，这基于正常流程是正常的，但是当我打开 devtools 上的网络选项卡并注意到奇怪的东西时。

我有 2 个被取消的请求，我不知道为什么。

我的代码与 apollo 客户端文档相同

function Dogs({ onDogSelected }) {
  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <select name="dog" onChange={onDogSelected}>
      {data.dogs.map(dog => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}

有人遇到过这种情况吗？

【问题讨论】：

我们发现我们有 auth0 和 nextjs ssr，grapql 在每次渲染后运行两次。

标签： graphql next.js apollo-client

【解决方案1】：

很可能你在_app.js 或任何你实例化apolloClient 的代码运行多次（在重新渲染时），丢弃旧客户端并创建一个新客户端，以及当前的 apollo 调用（附加到旧客户端） instance) 被取消，然后在新创建的apolloClient 传递给ApolloProvider 后重新运行。

解决方案是使apolloClient 不可变并返回相同的实例，除非需要重新实例化。

就我而言，我们是这样设置的：

_app.tsx:
const App = (props) => {
  const apolloClient = useApollo({ language, location });

  return (
     <ApolloProvider client={apolloClient}>
       {...}
     </ApolloProvider>
  );
}

apollo-client.ts

WRONG WAY:
export default function useApollo(config) {
  return useMemo(() => createApolloClient(config), [config]);
}

GOOD WAY:
export default function useApollo() {
  return useMemo(() => createApolloClient(config), [config.language, config.location]);
}

请注意 useMemo 无法完成这项工作，因为它在比较始终不同的对象（引用）。

这只是需要注意的一件事，但您的 apolloClient 可以重新实例化还有很多其他原因。

【讨论】：