graphql - 突变后，如何跨 View 更新受影响的数据？

Question

这个问题在这里已经有了答案:





Auto-update of apollo client cache after mutation not affecting existing queries

(1 个回答)


去年关闭。






我有 getMovies查询和addMovie突变工作。当addMovie尽管如此，我想知道如何最好地更新“编辑电影”和“我的个人资料”中的电影列表以反射(reflect)更改。我只需要一个一般/高级概述，或者甚至只是一个概念的名称，如果它很简单，关于如何实现这一点。

我最初的想法只是在我的 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突变，这会正确更新“我的个人资料”中的 View ，因为它使用了 getMovies查询(哇)!然后我将这些电影作为 Prop 传递给“编辑电影”，那么我如何在那里更新它？我应该让他们都使用 getMovies询问？有没有办法拉取getMovies的新结果出商店，所以我可以在“编辑电影”中重复使用它而无需再次查询？

编辑2:包装MyProfile和 EditMovies都与 getMovies查询容器似乎工作正常。后 addMovie , 由于 updateQueries 在两个地方都更新了在 getMovies .它也很快。我认为它正在被缓存？

这一切都有效，所以我想这只是一个问题:这是最好的方法吗？

Answer 1

标题中问题的答案是

使用 updateQueries以“通知”驱动其他 View 的查询数据已更改(如您所见)。

这个话题在 react-apollo slack channel 中得到了持续的讨论，这个答案是我所知道的共识:没有明显的替代方案。

请注意，您可以更新多个查询(这就是名称是复数的原因，并且参数是一个包含与所有需要更新的查询的名称匹配的键的对象)。

正如您可能猜到的那样，这种“模式”确实意味着您在设计和使用查询时需要小心谨慎，以使设计突变的过程变得轻松和可维护。更常见的 queires 意味着您在突变中错过一个的机会更少 updateQueries行动。