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

Question

我正在使用标准apollo-client@2.3.x的{​​{1}}（＆amp; react-apollo@2.1.x）来通过GraphQL Storefront API查询Shopify商店。

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

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

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

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

以下是两个查询的摘要：

1：“ getProducts ”（例如在__typename组件中使用）

<Home />

2：“ getProduct ”（例如在query getProducts { shop { products(first: 20) { edges { node { id ... on Product { title } } } } } } 组件中使用）

<ProductDetail />

Answer 1

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

好的，我在这里试试了你。我并不真正使用这些中继API，但它应该与示例非常相似。

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