Apollo Client Devtools 中的重复活动查询答案

【问题标题】：Duplicate active queries in Apollo Client DevtoolsApollo Client Devtools 中的重复活动查询
【发布时间】：2022-03-01 01:33:14
【问题描述】：

我将 React 与 Apollo Client 3 和 Hasura 一起用作 GraphQL 服务器。

组件ProductList 使用一次get_products 查询。然后该查询的两个精确副本被存储在 Apollo 缓存中，如 Apollo DevTools 中所示。

我的问题是 - 为什么在缓存中生成两个相同的查询而不是一个？

Apollo DevTools 结果

我的代码

import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
  HttpLink,
  gql,
  useQuery,
} from "@apollo/client";

const client = new ApolloClient({
  link: new HttpLink({
    uri: "http://localhost:8080/v1/graphql",
  }),
  cache: new InMemoryCache(),
});

function App() {
  return (
    <div className="App">
      <ApolloProvider client={client}>
        <ProductList />
      </ApolloProvider>
    </div>
  );
}

const ProductList = () => {
  const GET_PRODUCTS = gql`
    query get_products {
      product {
        id
        name
        __typename
      }
    }
  `;

  const { loading, error, data } = useQuery(GET_PRODUCTS);
  if (loading) return <p>Loading ...</p>;
  if (error) return <p> {error.message}</p>;
  return (
    <>
      <h1>ProductList</h1>
      <ul>
        {data?.product.map((product: any) => {
          return <li key={product.id}>{product.name}</li>;
        })}
      </ul>
    </>
  );
};

export default App;

【问题讨论】：

标签： reactjs graphql apollo apollo-client hasura

【解决方案1】：

这基本上是Apollo Client what are active queries?的复制品

主要概念是 Active Queries 表示在 React 应用程序中已安装组件内部运行的查询。这并不意味着数据被缓存了两次，而是意味着您的应用程序中有两个地方依赖于此查询的结果。

如果缓存中的查询结果更新，两个地方都会自动获取数据更新。

【讨论】：