可以让 ApolloProvider 提供给 state 而不是 props 吗？答案

【问题标题】：Can ApolloProvider be made to provide to state instead of props?可以让 ApolloProvider 提供给 state 而不是 props 吗？
【发布时间】：2017-12-12 06:34:40
【问题描述】：

Redux 的Provider 组件和connect 函数通过mapStateToProps 提供了对包装组件的存储状态的引用。正如可爱的文章How to Build a Redux 中提到的那样，这样做是为了您无需引用全局存储对象或将数据无休止地传递到 DOM。

这有一个很大的优势：存储状态与 DOM 无关。您可以将任意两个元素放在页面上的任何位置，并为它们提供您想要从商店获取的任何数据。如果您有一个用于客户搜索的表单和一个客户搜索结果列表……这些表示元素的关系不会影响它们对数据的访问。

据我所知，Apollo-react 的ApolloProvider 并不认同这个原则。当我使用graphql 使用查询包装组件时，该查询的结果将作为道具提供给包装的组件。如果应用程序的其他地方需要这些结果，则必须手动传递或存储在全局引用中。特别是，从 graphql 查询返回的 props 不能向上传递到 DOM。

有没有办法让 ApolloProvider 像 redux 的 Provider 一样向应用程序的其余部分“提供”查询结果？我需要自己构建这个功能吗？或者，更好的是，我是不是误会了什么？

【问题讨论】：

标签： reactjs react-redux react-apollo

【解决方案1】：

Apollo 使用 Redux 缓存 graphql 查询结果。本质上，如果您有多个组件需要相同的数据，只需使用 Apollo 用相同的 graphql 查询包装每个组件。您甚至可以定义一次 graphql 连接器，然后使用相同的连接器来包装您的 N 个组件。

【讨论】：

看，我没想到！我肯定会用它来向自己证明缓存的工作原理与宣传的一样。例如，如果一个查询依赖于从 mapStateToProps 传入的变量，是否只有其中一个会触发，而其他的会使用缓存？
这听起来有点像 Re-frame 的“订阅”。
嗯...似乎也可以通过使用 state.apollo.data.ROOT_QUERY.customers 作为 Apollo 数据的 id 进入商店...
嗯！在测试您的建议后，它有效！但它很脆弱：如果有问题的查询需要变量，并且如果出于任何原因不同的组件提供不同的变量，那么不正确的查询将被视为新的单独查询，获取并添加到存储中。对于您的单一事实来源而言，这似乎是一个冒险的举动。
如果查询接受变量并且 2 个组件的 props 产生不同的变量，那么每个组件将获得与其 props 匹配的数据。这是一件好事，也是一个有用的用例。如果您不希望这样，那么您需要确保您的组件获得相同的道具。如果两个组件都从 redux 获取它们的 props，应该不难。你最终会得到一个 connect(...)(graphql(...)(Component)) 链来从 redux 获取变量以传递给 graphql 查询。