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

Posted 2023-03-10

【中文标题】更新 apollo 缓存而不调用 graphql 服务器（apollo v3.3）

【英文标题】：Update the apollo cache without calling the graphql server (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 没有重新渲染

【参考方案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.