我刚开始在 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);
我的控制台输出: