如何与另一个查询共享缓存的阿波罗客户端数据

Question

我正在使用带有标准InMemoryCache apollo-client@2.3.x （ react-apollo@2.1.x ）通过其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
    }
  }
}

Answer 1

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

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

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