如何在突变时使用 urql 更新 graphql 缓存，其中初始查询响应不包括所需的 __typename？

Posted 2023-02-22

【中文标题】如何在突变时使用 urql 更新 graphql 缓存，其中初始查询响应不包括所需的 __typename？

【英文标题】：How do I update the grapqhl cache with urql upon a mutation, where the initial query response does not include the required __typename?

【发布时间】：2020-01-10 03:53:10

【问题描述】：

我的情况有 4 个组件按此顺序相互嵌套：Products（页面）、ProductList、ProductListItem 和 CrossSellForm。

Products 执行 graphql 查询（使用 urql）：

const productsQuery = `
  query 
    products 
      id
      title
      imageSrc
      crossSells 
        id
        type
        title
      
    
  
`;

...

const [response] = useQuery(
    query: productsQuery,
  );
  const  data:  products = []  = , fetching, error  = response;

...

 <ProductList products=products />

products 返回一个 Products 数组，其中包含一个字段 crossSells，该字段返回一个 CrossSells 数组。 Products 向下传播到CrossSellForm，其中包含一个返回CrossSells 数组的变异查询。

问题是，当我提交 crossSellForm 时，请求成功通过，但 Products 中的 crossSells up 没有更新，并且 UI 反映了陈旧的数据。这仅在Products 中的初始提取不包含crossSells 时发生，因此初始响应如下所示：

data: 
      products: [
        
          id: '123123',
          title: 'Nice',
          imageSrc: 'https://image.com',
          crossSells: [],
          __typename: "Product"
        ,
        ...
      ]
    

如果存在crossSell，则没有问题，ui更新正常，响应如下：

  data: 
      products: [
        
          id: '123123',
          title: 'Nice',
          imageSrc: 'https://image.com',
          crossSells: [
            
              id: 40,
              title: 'Nice Stuff',
              type: 'byVendor',
              __typename: 'CrossSell'
            
          ],
          __typename: "Product"
        ,
        ...
      ]
    
  

我在https://formidable.com/open-source/urql/docs/basics/ 阅读了一些有关urql 缓存机制的信息，据我了解，它使用了文档缓存，因此它基于__typename 缓存文档。如果查询请求具有相同__typename 的内容，它将从缓存中拉取。如果mutation 与相同的__typename 一起出现，它将使缓存中的所有对象与__typename 失效，因此下次用户使用__typename 获取对象时，它将执行网络请求而不是缓存。

我认为正在发生的情况是在有products 但没有crossSells 的初始情况下，表单提交成功但Products 页面没有更新，因为没有引用@987654354 的对象@ of CrossSell，但在第二种情况下，它会破坏缓存并再次执行查询，刷新产品和交叉销售，并且 UI 会正确更新。

我真的很享受将 urql 钩子与 React 组件一起使用的体验，并想继续，但我不确定如何在不使用其他工具的情况下解决此问题。

我尝试使用来自How can I force component to re-render with hooks in React? 的提示在提交表单时强制重新渲染，但它遇到了同样的问题，Products 将再次从缓存中获取，crossSells 将返回一个空数组。我考虑过将 urql 的 RequestPolicy 修改为仅网络，以及强制重新渲染，但我认为每次重新获取都会不必要地昂贵。我现在尝试的解决方案是将所有状态转移到 redux 中，这是一个单一的事实来源，以便对 crossSells 的任何更新都将正确传播，尽管我确信它会起作用，但这也意味着我会以标准 redux 样板的 hooks 换取了很多便利。

在CrossSellForm 内提交表单时，如何优雅地将Products 更新为crossSells，同时仍使用urql 和钩子？

【问题讨论】：

我又挖了一点，在 repo 的 github 中发现了一个类似的问题：github.com/FormidableLabs/urql/issues/212 似乎正在开发一个规范化的缓存交换，可以替换 urql 中的默认值：github.com/FormidableLabs/urql-exchange-graphcache。我简要研究了一下，但它似乎需要针对我的用例进行更多开箱即用的配置，我决定使用 redux 会更简单。

【参考方案1】：

这里是核心贡献者?

正如您已经发现的那样，这里有一个未解决的问题，它详细说明了我们简单的默认缓存的固有问题。这是一个文档缓存，因此不适合规范化可以提供帮助的更复杂的任务。

当我们有一个空数据数组时，没有迹象表明需要重新获取特定结果。

您可以尝试使用缓存和网络，而不是使用仅网络策略，但这并不能解决操作（您的查询）不会因突变而失效的根本问题。所以不会触发refetch。

我非常向您推荐 Graphcache，我们的规范化缓存，您也已经发现了。至少没有配置（！）它实际上是一个已经相当聪明的插入式替代品。 https://github.com/FormidableLabs/urql-exchange-graphcache

它的配置实际上只是教它如何自动处理更多任务的插件！如果您需要自定义问题，我很乐意在此处或通过 Spectrum 帮助您解决问题。但我的建议是，试一试，因为在最好的情况下，你的所有边缘情况都可以正常工作而无需任何更改✨