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

Question

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

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

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

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

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

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

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

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

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

Answer 1

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

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

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

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

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

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