Apollo 客户端 Devtools 中的重复活动查询

Question

I\xe2\x80\x99m 使用 React 与 Apollo Client 3 和 Hasura 作为 GraphQL 服务器。

\n

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

\n

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

\n

Apollo 开发工具结果

\n

\n

我的代码

\n

import {\n  ApolloClient,\n  ApolloProvider,\n  InMemoryCache,\n  HttpLink,\n  gql,\n  useQuery,\n} from "@apollo/client";\n\nconst client = new ApolloClient({\n  link: new HttpLink({\n    uri: "http://localhost:8080/v1/graphql",\n  }),\n  cache: new InMemoryCache(),\n});\n\nfunction App() {\n  return (\n    <div className="App">\n      <ApolloProvider client={client}>\n        <ProductList />\n      </ApolloProvider>\n    </div>\n  );\n}\n\nconst ProductList = () => {\n  const GET_PRODUCTS = gql`\n    query get_products {\n      product {\n        id\n        name\n        __typename\n      }\n    }\n  `;\n\n  const { loading, error, data } = useQuery(GET_PRODUCTS);\n  if (loading) return <p>Loading ...</p>;\n  if (error) return <p> {error.message}</p>;\n  return (\n    <>\n      <h1>ProductList</h1>\n      <ul>\n        {data?.product.map((product: any) => {\n          return <li key={product.id}>{product.name}</li>;\n        })}\n      </ul>\n    </>\n  );\n};\n\nexport default App;\n

\n

Answer 1

这基本上是 Apollo Client 的重复，什么是活动查询？

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

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