5

我的情况有 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 时，请求成功通过但crossSellsup inProducts没有更新，并且 UI 反映了陈旧的数据。这仅在初始提取Products包含 no时发生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页面没有更新，因为没有对带有__typenameof的对象的引用CrossSell，但在第二种情况下，它会破坏缓存并再次执行查询，刷新产品和交叉销售，并且 UI 已正确更新。

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

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

如何在提交表单时优雅地更新Productswith ，同时仍然使用 urql 和钩子？crossSellsCrossSellForm

4

1 回答 1

8

核心贡献者在这里

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

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

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

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

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

于 2019-09-08T12:53:48.900 回答