Apollo客户端缓存

Question

我刚开始在React应用程序上使用apollo客户端，但是我一直坚持使用缓存。我有一个主页，上面列出了要查询的产品的ID和名称的产品列表，以及要查询ID，名称，描述和图像的产品页面。

我希望如果用户首先访问主页，然后在特定产品页面上仅查询该产品的描述和图像，则在加载过程中还要显示名称（因为我应该已经对其进行了缓存）。我遵循了文档（http://dev.apollodata.com/react/cache-updates.html）的“控制存储”部分，但仍无法解决。

当我们转到产品页面时执行的查询仍然要求提供产品的ID和名称，而由于我已经询问过它们，因此应该对其进行缓存。

我想我缺少了一些东西，但我无法弄清楚。这是一些代码：

// Create the apollo graphql client.
const apolloClient = new ApolloClient({
    networkInterface: createNetworkInterface({
        uri: `${process.env.GRAPHQL_ENDPOINT}`
    }),
    queryTransformer: addTypename,
    dataIdFromObject: (result) => {
        if (result.id && result.__typename) {

            console.log(result.id, result.__typename); //can see this on console, seems okey
            return result.__typename + result.id;
        }

        // Make sure to return null if this object doesn't have an ID
        return null;
    },
});

// home page query
// return an array of objects (Product)
export default  graphql(gql`
   query ProductsQuery {
        products {
            id, name
        }
    }
`)(Home);

//product page query
//return an object (Product)
export default graphql(gql`
   query ProductQuery($productId: ID!) {
        product(id: $productId) {
            id, name, description, image
        }
    }
`,{
    options: props => ({ variables: { productId:  props.params.id } }),
    props: ({ data: { loading, product } }) => ({
        loading,
        product,})
})(Product);

和我的控制台输出：

Answer 1

你的问题的答案实际上有两部分：

1. 客户端实际上无法确定这些查询是否解析到缓存中的同一对象，因为它们具有不同的路径。一个以 开头products，另一个以 开头product。有一个针对客户端解析器的开放 PR，它可以让您向客户端提示在缓存中的何处查找内容，即使您没有明确查询它们。我预计我们将在一两周内发布该功能。

2. 即使使用客户端解析器，Apollo Client 也不会完全按照您上面描述的操作，因为 Apollo Client 从 0.5 版本开始不再进行查询比较。相反，现在所有查询都是完全静态的。这意味着即使您的查询部分位于缓存中，完整的查询也会发送到服务器。这具有本博客文章中列出的许多优点。

returnPartialData: true通过在选项中进行设置，您仍然可以首先显示缓存中的部分。