javascript - React/Apollo 共享查询状态

Question

我有一个非常简单的应用程序，有一个 ListView 和一个详细 View 。 ListView 包含一个 graphql 查询，该查询映射到包含项目数组的 data 属性。选择一个项目会实例化一个详细 View ，其中项目的 ID 用于为该项目组成另一个 graphql 查询。

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

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

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

我看到了一些可能的解决方案，但没有一个看起来很好:

• 用查找 currentOffset + 1 和 currentOffset -1 的 graphql 查询包装上一个/下一个导航组件。这绝对是最“ Apollo ”的解决方案，但问题是 currentOffset 对该组件是未知的，因为它没有 data 属性。此外，我还必须确保 ListView 查询中的任何其他变量(例如过滤器、排序)都已通过，并且这些变量也在晦涩的 apollo 状态树中。
• 在我的 reducer 中监听 APOLLO_QUERY_RESULT 操作，并维护查询结果的第二个副本，其中包含我的其他组件所需的所有信息。
• 使用context 将data 属性分享给 children 。
• 显式地将 data 属性传递给 child 。

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

Answer 1

将数据作为 prop 向下传递可能是最简单的解决方案。

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