React/Apollo共享查询状态

我有一个非常简单的应用程序，具有列表视图和详细视图。列表视图包含一个graphql查询，该查询映射到包含项目数组的data prop。选择一个项目实例化一个细节视图，其中该项目的id用于为该项目组合另一个graphql查询。React/Apollo共享查询状态

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()）。

我看到一些可能的解决方案这一点，他们都不大：

包裹上/下一个导航组件与graphql查询，查找currentOffset + 1和currentOffset -1。这绝对是最“apollo”的解决方案，但问题在于currentOffset对于该组件是未知的，因为它没有data支柱。此外，我将不得不确保列表视图查询中的任何其他变量（例如过滤器，排序）都已通过，并且这些变量也位于不明确的apollo状态树中。
收听我的reducer中的APOLLO_QUERY_RESULT操作，并使用其他组件需要的所有信息维护查询结果的第二个副本。
使用context共享data道具给儿童。
明确地通过data道具给儿童。

似乎是一种常见的情况。什么是正确的方法？

来源

2017-07-15 UncleCheese

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

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

来源

2017-07-15 20:20:49

React/Apollo共享查询状态

回答

相关问题