javascript - 在初始查询响应不包含所需类型名的情况下，如何在发生突变时使用 urql 更新 graphql 缓存？

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 返回一个 Products 数组，其中包含一个字段 crossSells，该字段返回一个 CrossSells 数组. Products 向下传播到 CrossSellForm，其中包含一个变异查询，该查询返回一个 CrossSells 数组。

问题是，当我提交 crossSellForm 时，请求成功通过，但 Products 中的 crossSells 没有更新，并且 UI 反射(reflect)了陈旧的数据。只有当 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 的内容，它将从缓存中提取它。如果 突变 与相同的 __typename 发生，它将使缓存中具有该 __typename 的所有对象无效，因此下次用户获取对象时__typename 它将执行网络请求而不是缓存。

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

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

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

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

Answer 1

这里是核心贡献者 👋

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

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

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

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

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