在初始查询响应不包含所需 __typename 的情况下，如何在突变时使用 urql 更新 grapqhl 缓存？

Question

我的情况有 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 return 是一个 Products 的数组，其中包含一个字段 crossSells，return 是一个 CrossSells 的数组. Products 向下传播到 CrossSellForm，它包含一个突变查询，其中 return 是一个 CrossSells.

的数组

问题是，当我提交 crossSellForm 时，请求成功通过，但是 Products 中的 crossSells 没有更新，而 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页面没有更新因为有没有引用具有 CrossSell 的 __typename 的对象，但在第二种情况下，它会破坏缓存并再次执行查询，刷新产品和交叉销售，并且 UI 是正确更新。

我真的很喜欢将 urql hooks 与 React 组件一起使用的体验，并且想继续，但我不确定如何在不使用其他工具的情况下解决这个问题。

我尝试使用以下提示强制重新呈现表单提交：但它遇到了同样的问题，其中 Products 将再次从缓存中获取并且 crossSells 将 return 一个空数组。我考虑过将 urql 的 RequestPolicy 修改为仅网络，以及强制重新渲染，但我认为每次重新获取都会不必要地昂贵。我现在正在尝试的解决方案是将所有状态转移到 redux 中，这是一个单一的事实来源，以便 crossSells 的任何更新都可以正确传播，虽然我确信它会起作用，但这也意味着我我将使用钩子为标准 redux 样板提供很多便利。

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

Answer 1

这里是核心贡献者

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

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

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

我非常向您推荐 Graphcache，这是我们的规范化缓存，您也已经发现了它。至少在没有配置的情况下（！），它实际上是一个已经相当智能的直接替代品。 https://github.com/FormidableLabs/urql-exchange-graphcache

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

在初始查询响应不包含所需 __typename 的情况下，如何在突变时使用 urql 更新 grapqhl 缓存？

How do I update the grapqhl cache with urql upon a mutation, where the initial query response does not include the required __typename?

javascript

caching

reactjs

graphql

urql