React / Apollo 共享查询状态答案

【问题标题】：React / Apollo shared query stateReact / Apollo 共享查询状态
【发布时间】：2017-12-20 10:35:01
【问题描述】：

我有一个非常简单的应用程序，有一个列表视图和一个详细视图。列表视图包含一个 graphql 查询，该查询映射到一个包含项目数组的 data 道具。选择一个项目会实例化一个详细视图，其中项目的 id 用于为该项目组成另一个 graphql 查询。

const ListView = graphql(ALL_ITEMS, ...)(ListViewComponent);

<ListView data={ [....] }>
  <Detail>
      <Next /> <Prev /> {/* <-- need info from ListView.data */}          
  </Detail>
  { this.props.data.map(....) }
</ListView>

我遇到的麻烦是将上一个/下一个导航添加到该详细视图。 detail 组件不知道包含 ListView 组件中所有项目的 data 属性中的内容。在典型的 redux 应用程序中，我会将项目存储为全局应用程序状态，并将它们注入到组件中将是微不足道的，但 Apollo 似乎不是这样工作的。它的状态树不是很容易使用（例如使用connect()）。

我看到了一些可能的解决方案，但似乎都不是很好：

使用查找currentOffset + 1 和currentOffset -1 的graphql 查询包装上一个/下一个导航组件。这绝对是最“阿波罗”的解决方案，但问题是该组件不知道currentOffset，因为它没有data 属性。此外，我还必须确保列表视图查询中的任何其他变量（例如过滤器、排序）都通过了，并且这些变量也在模糊的 apollo 状态树中。
收听我的 reducer 中的 APOLLO_QUERY_RESULT 操作，并维护查询结果的第二个副本以及我的其他组件所需的所有信息。
使用context 将data 道具分享给孩子们。
将data 属性显式传递给子级。

似乎是一个常见的场景。什么是正确的方法？

【问题讨论】：

标签： javascript reactjs graphql apollo

【解决方案1】：

将数据作为道具传递可能是最简单的解决方案。

您可能要考虑的另一个选项是简单地将您希望访问相同查询数据的任何组件与另一个graphql HOC 一起包装。如果您使用 same 查询用于 ListView 的 HOC (ALL_ITEMS)，则可以像在 ListView 中一样在您的孩子中使用 data 属性。这种方法的巧妙之处在于——只要你use the default fetchPolicy——你的子组件不会触发对你的服务器的第二次查询；它只会利用缓存中已经存在的内容。

【讨论】：