如何从阿波罗缓存中获取更新的数据 [英] How to get updated data from apollo cache
问题描述
Apollo客户端是否具有mapStateToProps(Redux)之类的东西?
Does Apollo client have some sort of thing like mapStateToProps (Redux)?
假设我有一个组件，查询后我知道缓存中有数据，所以我做类似的事情:
let's say I have a component, after query I know there's data in the cache so I do something like:
class Container extends React.Component {
...
...
render() {
const notes = this.props.client.readFragment(NOTES_FRAGMENT)
// notes has everything I need
return (<Child notes={notes} />);
}
}
export default WithApollo(Container);
但是，当我有一个名为mutation并进行更新的同级组件时，<Child />组件的道具永远不会得到更新.
However when I have a sibling component which calls mutation and do update, the <Child /> component's props never get updates.
class AnotherContainer extends React.Component {
render() {
return(
<Mutation
mutation={UPDATE_NOTE}
update={(cache, {data: {updateNote}}) =? {
const list = cache.readFragment({
fragment: NOTES_FRAGMENT
})
// manipulate list
cache.writeFragment({fragment:NOTES_FRAGMENT, data })
}
}
)
}
}
所以我的问题是，每当我执行writeFragment时如何更新<Child />组件的道具?是否有诸如mapStateToProps之类的东西可以将notes道具连接"到缓存，所以无论何时更新，都会触发React生命周期?
so my question is, how do I update the <Child /> component's props whenever I do writeFragment? is there anything like mapStateToProps thing to "connect" the notes props to the cache, so whenever it updates, will trigger the React lifecycle?
推荐答案
react-apollo提供了三种侦听缓存中更改的方法:1)
react-apollo provides three ways you can listen for changes in the cache: 1) the Query component, 2) the graphql HOC, and 3) calling watchQuery directly using the client. In all three cases, you provide some query and any appropriate options, and you get a way to initially fetch that query as well as listen to updates to it.
这里的关键是查询而不是片段是读取缓存的目标工具. readFragment方法仅是一种方便的方式来读取一次缓存(通常在突变后更改缓存的情况下)，并且不提供任何形式的反应性.
The key here is that queries, and not fragments are the intended vehicles for reading the cache. The readFragment method is only meant as a convenient way to read the cache a single time (usually in the context of changing the cache after a mutation) and does not provide any sort of reactivity.
因此，最重要的是，将您的组件包装在Query组件或graphql HOC中，您将可以访问可在缓存中反映查询结果并在缓存更新时更新的道具(相同connect组件的操作方式).
So, bottom line, wrap your components in either the Query component or the graphql HOC and you will have access to props that reflect the query results in the cache and that will update when the cache updates (the same way connected components do).
在这一点上，可能有几件事正在发生:
At this point a couple of things might be going through your head:
但是我不需要发出另一个服务器请求！" 不用担心-默认情况下，Apollo将只请求一次相同的查询，并且将对所有后续调用使用缓存.您可以通过设置适当的为您的查询获取政策.这包括一个cache-only策略，该策略只会从缓存中提取数据(尽管默认的cache-first策略对于大多数用例而言已足够).
"But I don't need to make another server request!" No worries -- by default, Apollo will only request the same query once, and will use the cache for all subsequent calls. You can modify this behavior by setting the appropriate fetch policy for your query. This includes a cache-only policy that will only pull data from cache (although the default cache-first policy is sufficient for most use cases).
但是我没有要使用的查询！" 如果您要写缓存来保持某些任意客户端状态，那么您应该使用 apollo-link-state 即可.
"But I don't have a query to work with!" If you're writing to the cache as a means of persisting some arbitrary client-side state, then you should be using apollo-link-state to do so.
但是我不需要整个查询结果，只是其中的一部分！" graphql HOC提供了一个props函数，您可以将其传递给配置，该配置将使您可以将查询数据转换为想要使用的任何形状.将渲染道具模式与Query组件一起使用时，实际上并不需要相同的功能-您可以直接操作渲染道具.无论哪种情况，最好编写一些化简器，以便您可以在整个项目中重复使用这些化简器，这些化简器只获取返回的数据并将其转换为所需的形状.我从事的最后一个大型项目就是在客户端进行的，它使事情变得更易于管理.
"But I don't need the entire query result, just a part of it!" The graphql HOC provides a props function you can pass in to the configuration that will let you transform your query data into whatever shape you want to work with. The same functionality isn't really needed when using the render props pattern with the Query component -- you can just manipulate the render props directly. In either case, it may be a good idea to write some reducers that you can reuse throughout your project that just take the returned data and transform it into the shape you need. The last big project I worked on did just that client side and it kept things much more manageable.
这篇关于如何从阿波罗缓存中获取更新的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
