加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

graphql – 突变后,如何跨视图更新受影响的数据?

发布时间:2020-12-15 16:16:33 所属栏目:百科 来源:网络整理
导读:我有getMovies查询和addMovie变异工作.当addMovie发生时,我想知道如何最好地更新“编辑电影”和“我的个人资料”中的电影列表以反映更改.我只需要一个通用/高级概述,或者甚至只需要一个概念的名称,如果它很简单,就如何实现这一点. 我最初的想法只是把我所有

enter image description here

我有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操作中错过一个的可能性更小.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读