0

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

  • 问题是当下面的代码执行时，还有一个请求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 没有重新渲染

4

2 回答 2

0

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

于 2021-02-04T17:16:46.273 回答
0

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

nextFetchPolicy

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

在您调用cache.writeQuery数据表查询后，将检查cache-first是否存在所有必需的数据。如果您获得缓存命中，它将立即返回数据而不加载。

请记住，对于 AC3，有时多个查询可以共享同一个缓存对象但请求不同的字段。如果其中一个cache.writeQuery或您的typePolicies合并导致缓存中缺少活动查询字段，则会导致该查询的缓存未命中。即曾经有效的主动查询data会突然返回undefined。更多关于这个问题在这里。

于 2021-02-24T17:49:32.947 回答