React Apollo：如何在多个地方使用相同查询的结果

Posted 2023-03-10

【中文标题】React Apollo：如何在多个地方使用相同查询的结果

【英文标题】：React Apollo: How to use the result of the same query on multiple places

【发布时间】：2018-03-27 19:40:12

【问题描述】：

我们想知道我们是否了解如何在 apollo 中查询的方式正确。我们的目标非常简单：我们需要应用程序中 2 个不同位置的来自 graphQL 的数据。两个地方都需要完成结果的信息，以及数据是否准备好的信息。

所以现在的问题是在 apollo 中最好的方法是什么？我们无法在文档中找到示例。

相同的查询 我们认为相同的查询可以完成这项工作。因此，我们使用相同的 graphql HOC 包装我们的组件，其中包含相同的 Query。

问题：这将导致查询将执行两次。我的意思是——当然——因为我们叫它两次。但是我们认为 apollo 会注意到我们正在使用相同的参数调用相同的查询。

存储在自己的商店中 是否有必要将信息存储在我们自己的 redux 存储中？如果是，我们需要用查询包装我们的第一个组件，并存储信息（如果它仍在加载）和查询结果。

访问阿波罗商店 有没有推荐的方法用另一个 HOC 包装组件以获得 apollo 商店？您将如何使用“仍在获取”和“结果”的信息访问正确的查询？

如果我们能像 1 中描述的那样做，我们会很高兴，但据我们所知，这是不可能的。如果您能告诉我这样做的阿波罗方式会是什么，那就太好了

编辑 我们遇到的问题还没有解决。我在 github 上发现了这个问题。所以他们知道这是一个“问题”，但还没有解决。所以我们需要改变我们的组件逻辑和调用查询。

参考： https://github.com/apollographql/apollo-android/issues/646

【参考方案1】：

我们使用相同的高阶组件 (HOC) 方法，并且运行良好。

如果您的目标是避免两次调用相同的查询，您可以将 fetchPolicy 设置为仅从缓存中提取的其他选项之一。

也就是说，您确定查询实际上在网络上被调用了两次吗？还是该操作仅在没有网络请求的情况下被调用两次（检查 Chrome 开发工具中的 Network 选项卡）？

Apollo 的默认行为是 cache-first，因此您可能看到的是操作，而不是实际的网络请求：

cache-first：这是我们总是首先尝试从缓存中读取数据的默认值。 如果完成查询所需的所有数据都在缓存中，则将返回该数据。如果缓存结果不可用，Apollo 只会从网络获取。此获取策略旨在最大限度地减少渲染组件时发送的网络请求数。

更新：另一个选项是query batching，应该可以解决这个问题。

【讨论】：

嘿。是的，我们确信它被调用了两次，因为我们在我们的 graphql 服务器上看到了日志。据我了解您引用的消息，当数据已经存在时，它将从缓存中获取数据。但是如果数据还没有准备好并且另一个组件正在调用相同的查询呢？因为这是我们的情况。因此，在我们的案例中，两个组件将在数据尚未准备好时调用查询，目标是两个组件都将显示“正在加载”或“待处理”状态。

啊，我明白了。 @TJR 你试过查询批处理吗？ dev-blog.apollodata.com/query-batching-in-apollo-63acfd859862