更新 apollo 缓存而不调用 graphql 服务器（apollo v3.3）答案

【问题标题】：Update the apollo cache without calling the graphql server (apollo v3.3)更新 apollo 缓存而不调用 graphql 服务器（apollo v3.3）
【发布时间】：2021-05-09 00:38:44
【问题描述】：

我正在构建一个反应应用程序，我有一个数据表并直接在数据流上更新我希望当我将数据发送到 graphql 服务器进行更新并获得 true 结果时，我将使用 cache.writeQuery 更新 apollo 缓存

问题是当下面的代码执行时，还有一个请求graphql服务器从整个表中获取数据并更新缓存，我不想请求graphql服务器工作。在那里，我想从浏览器更新。那么我哪里做错了？

这是我的代码

updateInventoryCache: async (_, { inventory, productId, variables }, { cache }) => {
      let variablesData;
      if (variables) {
        variablesData = JSON.parse(variables);
      }
      const { getListProduct } = cache.readQuery({
        query: GET_PAGING_PRODUCT,
        variables: variablesData.variables
      });
      cache.writeQuery({
        query: GET_PAGING_PRODUCT,
        variables: variablesData.variables,
        data: {
          getListProduct: {
            ...getListProduct,
            products: getListProduct.products.map((product) => {
              if (product.id === productId) {
                return {
                  ...product,
                  inventory
                };
              }
              return product;
            })
          }
        }
      });
      return true;
    }

"@apollo/client": "^3.3.7"

更新 1：

我将首先调用 graphql 服务器来获取数据并将其存储在 apollo 的（缓存和网络）缓存中。然后我想更新缓存中的数据，而不必调用 apollo 服务器到 refetchQueries 如在帖子中，我使用 client.writeQuery 函数更新缓存，但不是在客户端更新，apollo 称为 graphql 服务器在我没有使用 refetchQueries 时获取新数据并更新缓存。

更新 2：我检查了，我的缓存已更新，但我的 UI 没有重新渲染

【问题讨论】：

标签： reactjs apollo-client apollo-cache-inmemory

【解决方案1】：

使用fetchPolice="cache-only" 仅使用缓存https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy

【讨论】：

不，这不是我的意思。我的意思是：我最初会调用 graphql 服务器来获取数据并将其存储在 apollo 的（缓存和网络）缓存中。然后我想更新缓存中的数据，而不必调用 apollo 服务器到 refetchQueries 如在帖子中，我使用 writeQuery 函数更新缓存但不是在客户端更新，apollo 称为 graphql 服务器在我不使用 refetchQueries 时获取新数据并更新缓存。 `
cache-and-network 会一直更新，所以我知道它会先查询当前缓存，然后向服务器发出请求更新缓存以供下一次查询。
apollographql.com/docs/react/caching/advanced-topics
我检查了，我的缓存已更新，但我的 UI 没有重新渲染 :(
我的缓存知识只到这里，但你可以做到，不要气馁

【解决方案2】：

我相信您正在寻找的是nextFetchPolicy="cache-first"： https://www.apollographql.com/docs/react/data/queries/#usequery-api

nextFetchPolicy

FetchPolicy 开始执行在当前请求之后。用于切换回cache-first 在cache-and-network 或network-only 之后。

在您致电cache.writeQuery 之后，您的数据表查询将检查cache-first 以查看是否所有需要的数据都在那里。如果你得到缓存命中，它会立即返回数据而不加载。

请记住，对于 AC3，有时多个查询可以共享同一个缓存对象但请求不同的字段。如果cache.writeQuery 或typePolicies 合并导致缓存中缺少活动查询字段，则会导致该查询的缓存未命中。 IE。曾经有效data 的活动查询将突然返回undefined。 More on that issue here.

【讨论】：