IT技术 - 如何与另一个查询共享缓存的 apollo 客户端数据 - 吾爱随笔录

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

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

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

在demo中可以看到，当点击产品时，控制台中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
    }
  }
}