如何从 apollo 缓存中获取更新的数据 [英] 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) 查询组件，2) graphql HOC，以及 3) 直接使用客户端调用 watchQuery.在所有三种情况下，您都提供了一些查询和任何适当的选项，然后您就可以获得一种方法来最初获取该查询并监听它的更新.
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 中，您将可以访问在缓存中反映查询结果的 props 和这将在缓存更新时更新(与 connected 组件一样).
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).
但我没有查询可使用！"如果您将写入缓存作为保留某些任意客户端状态的一种方式，那么您应该使用 <一个 href="https://github.com/apollographql/apollo-link-state" rel="noreferrer">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 组件一起使用时，实际上并不需要相同的功能——您可以直接操作渲染道具.在任何一种情况下，编写一些可以在整个项目中重复使用的 reducer 都是一个好主意，这些reducer 只需获取返回的数据并将其转换为您需要的形状.我参与的最后一个大项目就是在客户端做的，它使事情更易于管理.
"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.
这篇关于如何从 apollo 缓存中获取更新的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
