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

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

客户端实际上无法确定这些查询是否解析为缓存中的同一对象，因为它们具有不同的路径。一个以products开头，另一个以product开头。客户端解析器有一个open PR，它允许您向客户端提供有关在缓存中查找内容的提示，即使您没有明确查询它们。我希望我们能在一两周内发布该功能。
即使使用客户端解析器，Apollo Client也不会完全按照您的描述进行操作，因为自0.5版以来，Apollo Client不再进行查询差异。相反，所有查询现在都是完全静态的。这意味着即使您的查询部分位于缓存中，也会将完整查询发送到服务器。这具有许多优点，这些优点在blog post。

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

Answer 2

这个问题已经很老了，但是，有一种解决方案可以使用cacheRedirects

将查询映射到正确的位置

在我的项目中，我有一个projects查询和一个project查询。

我可以像下面这样制作cacheRedirect：

const client = new ApolloClient({
  uri: "http://localhost:3000/graphql",
  request: async (operation) => {
    const token = await localStorage.getItem('authToken');
    operation.setContext({
      headers: {
        authorization: token
      }
    });
  },
  cacheRedirects: {
    Query: {
      project: (_, { id }, { getCacheKey }) => getCacheKey({ id, __typename: 'Project' })
    }
  }
});

然后，当我加载仪表板时，有1个查询得到projects。然后导航到单个project。没有网络请求，因为它是从缓存中读取的

阅读full documentation on Cache Redirects

Apollo客户端缓存

2 个答案: