当前位置 : 主页 > 网页制作 > React >

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

来源:互联网 收集:自由互联 发布时间:2021-06-15
我有getMovies查询和addMovie变异工作.当addMovie发生时,我想知道如何最好地更新“编辑电影”和“我的个人资料”中的电影列表以反映更改.我只需要一个通用/高级概述,或者甚至只需要一个

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

网友评论