Apollo Client Devtools 中的重复活动查询

Question

我将 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;

Answer 1

这基本上是 Apollo Client what are active queries?

的重复

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

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

Apollo Client Devtools 中的重复活动查询

Duplicate active queries in Apollo Client Devtools

apollo

reactjs

graphql

apollo-client

hasura