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

Question

我的情况有 4 个组件，按以下顺序相互嵌套：Products(page)、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 时，请求成功通过，但crossSellsupProducts没有更新，并且 UI 反映了过时的数据。仅当初始提取Products不包含 no时才会发生这种情况crossSells，因此初始响应如下所示：

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

如果存在现有的crossSell，则没有问题，用户界面会正确更新并且响应如下所示：

{
  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页面没有更新，因为没有对带有__typenameof的对象的引用CrossSell，但在第二种情况下有，所以它破坏了缓存并再次执行查询，刷新产品和交叉销售，并且 UI 已正确更新。

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

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

在 中提交表单后，如何在仍然使用 urql 和 hooks 的情况下优雅地进行Products更新？crossSellsCrossSellForm

Answer 1

核心贡献者在这里

\n\n

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

\n\n

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

\n\n

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

\n\n

我强烈推荐您 Graphcache，我们的标准化缓存，您也已经发现了。至少无需配置（！），它实际上是一个简单的替代品，而且已经更加智能了。https://github.com/FormidableLabs/urql-exchange-graphcache

\n\n

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

\n