首页 文章

React / Apollo共享查询状态

提问于
浏览 次
1

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

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

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

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

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

  • 使用查找 currentOffset + 1 和 currentOffset -1 的graphql查询包装prev / next导航组件 . 这绝对是最容易解决的问题，但问题是 currentOffset 对于该组件是未知的，因为它没有 data 道具 . 此外，我必须确保列表视图查询中的任何其他变量（例如过滤器，排序）都已通过，并且这些变量也在不明显的 apollo 状态树中 .

  • 收听我的reducer中的 APOLLO_QUERY_RESULT 动作，并使用我的其他组件需要的所有信息维护查询结果的第二个副本 .

  • 使用 context 与儿童分享 data 道具 .

  • 明确地将 data 道具传递给儿童 .

看起来像一个常见的场景 . 什么是正确的方法？

javascript reactjs graphql apollo

1 回答

  • 2

    将数据作为支柱传递可能是最简单的解决方案 .

    您可能要考虑的另一个选项是将您想要访问的任何组件包装到另一个 graphql HOC中 . 如果您使用用于ListView的HOC（ ALL_ITEMS ）的 same 查询，则可以像在ListView中一样使用子项中的 data prop . 这种方法的巧妙之处在于 - 只要您use the default fetchPolicy - 您的子组件不会触发针对您的服务器的第二次查询;它将简单地利用缓存中已有的内容 .

    回复于

相关问题