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开头。对于客户端解析器，有一个open PR，即使您没有明确查询它们，它也可以让您提供有关在缓存中查找内容的位置的客户端提示。我希望我们会在一两周内发布该功能。

2. 即使使用客户端解析器，Apollo客户端也不会完全按照上面所述进行操作，因为Apollo客户端自0.5版以来不再执行查询区分。相反，所有查询现在都是完全静态的。这意味着即使您的查询部分位于缓存中，完整查询也会发送到服务器。这在blog post中有很多优点。

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