如何与另一个查询共享缓存的 apollo-client 数据

Posted 2023-03-10

【中文标题】如何与另一个查询共享缓存的 apollo-client 数据

【英文标题】：How to share cached apollo-client data with another query

【发布时间】：2018-11-22 10:45:05

【问题描述】：

我使用 apollo-client@2.3.x (& react-apollo@2.1.x) 和标准 InMemoryCache，通过他们的 GraphQL Storefront API 查询 Shopify 商店。

我有两个疑问：1.getProducts（<Home />）和 2.getProduct($id)（<ProductDetail />）。在场景从 <Home /> 开始，然后单击产品，我希望 <ProductDetail /> 组件在查询 2 运行之前显示来自查询 1 的缓存响应。

演示：https://shopify-storefront-example-rdfwtslzng.now.sh/ 来源：https://shopify-storefront-example-rdfwtslzng.now.sh/_src

您可以在演示中看到，当点击产品时，data 在控制台中是一个空的，直到第二个网络请求完成。我假设它会被缓存，因为查询共享相同的__typename，并使用“节点”结构。

有人可以在这里启发我，（A）为什么它不起作用，以及（B）我怎样才能做到这一点？

---

以下是两个查询的摘要：

1：“getProducts”（例如用于<Home /> 组件）

query getProducts 
  shop 
    products(first: 20) 
      edges 
        node 
          id
          ... on Product 
            title
          
        
      
    
  

2：“getProduct”（例如用于<ProductDetail /> 组件）

query getProduct($id: ID!) 
  node(id: $id) 
    ... on Product 
      title
    
  

【参考方案1】：

GraphQL 客户端无法对解析器的实现做出假设，即使对于人类而言，API 似乎遵循简单的模式并且查询的行为似乎微不足道。您需要通过Cache Redirect 提供一些帮助。

好的，我在这里为您尝试过。我并没有真正使用这些 Relay API，但它的工作方式应该与示例非常相似。

  cacheRedirects: 
    Query: 
      getProduct: (_, args,  getCacheKey ) => (
        __typename: 'Node',
        node: getCacheKey( __typename: 'Product', id: args.id ),
      ),
    ,
  ,

【讨论】：

谢谢，但我不明白 cacheRedirects 如何与这种 Relay 式分页结构一起工作。 （例如，没有“产品”或“产品”查询键）。这里有什么我需要写的提示吗？

好吧，实际上你不能使用 readFragment 因为你不能访问 apollo-client。也许上面的方法会在你 fake 节点响应的地方起作用。或者，您可以尝试查找节点（假设它也有一个 id）

感谢您的帮助。一旦我将两个查询转换为使用相同的片段，readFragment 被证明非常有用。