我有getMovies查询和addMovie变异工作.当addMovie发生时,我想知道如何最好地更新“编辑电影”和“我的个人资料”中的电影列表以反映更改.我只需要一个通用/高级概述,或者甚至只需要一个概念的名称,如果它很简单,就如何实现这一点.
我最初的想法只是把我所有的电影放在我的Redux商店里.当变异结束时,它应该返回新添加的电影,我可以连接到我的商店的电影.
在“添加电影”之后,它将弹回“编辑电影”屏幕,您可以在其中看到新添加的电影,然后如果您返回“我的个人资料”,它也会在那里.
有没有比在我自己的Redux商店中拥有它更好的方法呢?是否有任何我不知道的阿波罗魔法可以为我处理这个更新?
编辑:我发现了updateQueries的想法:http://dev.apollodata.com/react/cache-updates.html#updateQueries我认为这就是我想要的(如果这不是正确的方法,请告诉我).这似乎比使用我自己的Redux商店的传统方式更好.
// this represents the 3rd screen in my picture const AddMovieWithData = compose( graphql(searchMovies, { props: ({ mutate }) => ({ search: (query) => mutate({ variables: { query } }), }), }), graphql(addMovie, { props: ({ mutate }) => ({ addMovie: (user_id, movieId) => mutate({ variables: { user_id, movieId }, updateQueries: { getMovies: (prev, { mutationResult }) => { // my mutation returns just the newly added movie const newMovie = mutationResult.data.addMovie; return update(prev, { getMovies: { $unshift: [newMovie], }, }); }, }, }), }), }) )(AddMovie);
在addMovie变异之后,这会正确更新“我的个人资料”中的视图,因为它使用了getMovies查询(哇)!然后我将这些电影作为道具传递给“编辑电影”,那么如何在那里更新呢?我应该让他们都使用getMovies查询吗?有没有办法将getMovies的新结果拉出商店,所以我可以在“编辑电影”上重复使用它,而无需再次进行查询?
EDIT2:使用getMovies查询容器包装MyProfile和EditMovies似乎工作正常.在addMovie之后,由于getMovies上的updateQueries,它在两个地方都得到了更新.它也很快.我认为它正在被缓存?
一切正常,所以我想这只是一个问题:这是最好的方法吗?
标题中问题的答案是使用updateQueries“通知”驱动数据已更改的其他视图的查询(如您所发现的).
本主题在react-apollo slack渠道中得到了持续的讨论,这个答案是我所知道的共识:没有明显的选择.
请注意,您可以更新多个查询(这就是名称为复数的原因,并且参数是包含与需要更新的所有查询的名称匹配的键的对象).
正如您可能猜到的,这种“模式”确实意味着您需要在设计和使用查询时要小心,以便在设计突变时使生活变得简单和易于维护.更常见的queires意味着您在突变updateQueries操作中错过一个的可能性更小.