[英]React / Apollo shared query state
I have a very simple app, with a list view and a detail view. 我有一个非常简单的应用程序,具有列表视图和详细信息视图。 The list view is wrapped with a graphql query that maps to a
data
prop containing an array of items. 列表视图用graphql查询包装,该查询映射到包含项数组的
data
prop。 Selecting one item instantiates a detail view, where the id of the item is used to compose another graphql query for that one item. 选择一个项目将实例化一个详细视图,其中该项目的ID用于为该项目构成另一个graphql查询。
const ListView = graphql(ALL_ITEMS, ...)(ListViewComponent);
<ListView data={ [....] }>
<Detail>
<Next /> <Prev /> {/* <-- need info from ListView.data */}
</Detail>
{ this.props.data.map(....) }
</ListView>
The trouble I'm having is adding previous/next navigation to that detail view. 我遇到的麻烦是在该详细信息视图中添加了上一个/下一个导航。 The detail component is unaware of what is in that
data
prop containing all the items in the ListView
component. detail组件不知道包含
ListView
组件中所有项目的data
道具中的内容。 In a typical redux application, I would store the items as global application state, and injecting them into a component would be trivial, but Apollo doesn't seem to work that way. 在典型的redux应用程序中,我会将项目存储为全局应用程序状态,并将它们注入到组件中是微不足道的,但是Apollo似乎无法正常工作。 Its state tree is not very consumable (eg using
connect()
). 它的状态树不是很消耗(例如,使用
connect()
)。
I see a few possible solutions for this, and none of them seem great: 我看到了一些可能的解决方案,但似乎没有一个很好:
currentOffset + 1
and currentOffset -1
. currentOffset + 1
和currentOffset -1
。 This is definitely the most "apollo" solution, but the problem there is that currentOffset
is unknown to that component because it doesn't have the data
prop. currentOffset
,因为它没有data
道具。 Further, I would have to ensure that any other variables (eg filters, sort) on the list view query got passed through, and those are in the obscure apollo
state tree, as well. apollo
状态树中。 APOLLO_QUERY_RESULT
action in my reducer and maintain a second copy of the query results with all the information my other components need. APOLLO_QUERY_RESULT
动作,并维护查询结果的第二个副本以及其他组件所需的所有信息。 context
to share the data
prop to children. context
将data
道具共享给孩子。 data
prop to children. data
属性传递给孩子。 Seems like a common scenario. 似乎是一种常见情况。 What's the right approach?
什么是正确的方法?
Passing data down as a prop would probably be the easiest solution. 将数据作为道具传递可能是最简单的解决方案。
One other option you may want to consider is simply wrapping whatever component you want to have access to the same query data with another graphql
HOC. 您可能要考虑的另一个选择是,用另一个
graphql
HOC包装要访问相同查询数据的任何组件。 If you utilize the same query you use for ListView's HOC ( ALL_ITEMS
), you can use the data
prop in your child just like you do in ListView. 如果您使用与 ListView的HOC(
ALL_ITEMS
) 相同的查询,则可以像在ListView中一样在孩子中使用data
ALL_ITEMS
。 The neat thing about this approach is -- as long as you use the default fetchPolicy -- your child component will not trigger a second query against your server; 这种方法的优点是-只要您使用默认的fetchPolicy ,您的子组件就不会触发对服务器的第二次查询; it will simply utilize what's already in the cache.
它只会利用缓存中已有的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.