是否可以将 GraphQL 查询拆分为单独的反应查询缓存

Posted 2023-03-08

【中文标题】是否可以将 GraphQL 查询拆分为单独的反应查询缓存

【英文标题】：Is it possible to split a GraphQL query into separate react-query caches

【发布时间】：2021-10-04 05:21:00

【问题描述】：

我一直在使用 React-Query 进行项目工作，我非常喜欢它（实际上用它替换了 redux，因为 99% 的状态只是服务器状态）。

我有一个问题，但我不太确定。

项目本身就是一个小部件仪表板。一个仪表板可能有 10 多个小部件。

我们正在使用 GraphQL api，因此当仪表板加载我们需要的每个数据集并将相关数据传递给每个小部件时，可以（并且理想）进行单个 api 调用。使用 react-query，这将是一个查询，因此所有小部件都将订阅这个单个查询。

问题是我们想为每个单独的小部件添加诸如“刷新”、“过滤”和“分页”之类的功能，这将涉及仅针对那个小部件的 api 调用，但由于订阅了整个小部件仪表板一个查询，整个仪表板就会刷新等等。

有没有办法：-

在初始加载时进行一次 graphql 调用以获得潜在的 10+ 每个小部件的数据集

让每个小部件订阅它们自己的数据集 （单独查询）

我在文档中看到我们可以访问查询客户端，并且可能会使用 onSuccess 函数来“setQueryClient”来选择单个查询，但我读到这不是一个好方法，而且“ setQueryClient' 应该只用于乐观更新。

希望上述解释是有道理的，任何提示将不胜感激。

【参考方案1】：

听起来您想在仪表板上为所有小部件发出一个请求，然后呈现它们。但是，我不会向下传递数据，而是在每个小部件中创建另一个 useQuery，它只会获取该小部件的数据。您可以使用initialData 为该查询准备缓存，您可以在其中从仪表板查询中提取该小部件的数据。这样，您将从仪表板查询中获取第一次渲染的数据（并且没有额外的加载状态），但每个小部件仍然只订阅自己的数据。不要忘记设置一个小的staleTime，否则您将获得即时后台重新获取:)

另外，select 选项在优化重新渲染方面也能很好地工作，但总会有“大”请求获取所有小部件的所有数据。如果它们都需要同时刷新，这也是一个不错的选择。