Question

我有getMovies个查询和addMovie突变。当addMovie发生时，我想知道如何最好地更新电影列表＆＃34;编辑电影＆＃34;和＆＃34;我的个人资料＆＃34;反映变化。我只需要一个通用/高级概述，或者甚至只是一个概念的名称，如果它很简单，就如何实现这一点。

我最初的想法是把我所有的电影放在我的Redux商店里。当变异结束时，它应该返回新添加的电影，我可以连接到我的商店的电影。

在＆＃34;添加电影＆＃34;之后，它会弹回＆＃34;编辑电影＆＃34;屏幕，你应该能够看到新添加的电影，然后如果你回到＆＃34;我的个人资料＆＃34;，它也会在那里。

有没有比在我自己的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突变后，这会正确更新＆＃34;我的个人资料＆＃34;因为它使用getMovies查询（哇）！然后我将这些电影作为道具传递到编辑电影＆＃34;，那么如何在那里更新它？我应该让他们都使用getMovies查询吗？有没有办法将getMovies的新结果拉出商店，所以我可以在＃34;编辑电影＆＃34;没有再次进行查询？

EDIT2：使用MyProfile查询容器包装EditMovies和getMovies似乎工作正常。在addMovie之后，由于updateQueries上的getMovies，它在两个地方都得到了更新。它也很快。我认为它被缓存了？

一切正常，所以我想这只是一个问题：这是最好的方法吗？

Answer 1

标题中问题的答案是

使用JOBS = 1 CATEGORY_CHOICES = ((JOBS, {'title':"Jobs",'icon':"fa fa-briefcase",'slug':"jobs"}),)来＆＃34;通知`驱动数据发生变化的其他视图的查询（如您所发现的那样）。

本主题在react-apollo冗余渠道中得到了持续的讨论，这个答案是我所知道的共识：没有明显的选择。

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

正如您可能猜到的，这种＆＃34;模式＆＃34;这意味着你需要小心设计和使用查询，以便在设计突变时使生活变得简单和易于维护。更常见的queires意味着您在突变updateQueries动作中错过一个的可能性更小。

Answer 2

Apollo客户端仅在更新突变时更新商店。因此，当您使用创建或删除突变时，您需要告诉Apollo Client如何更新。我原本以为商店会自动更新但不会......

我做了突变后，我已经与resetStore建立了一种解决方法。您在进行突变后立即重置商店。然后当你需要查询时，商店是空的，所以apollo重新获取新数据。

这是代码：

import { withApollo } from 'react-apollo'

...

  deleteCar = async id => {
    await this.props.deleteCar({
      variables: { where: {
        id: id
      } },
    })
    this.props.client.resetStore().then(data=> {
      this.props.history.push('/cars')
    })
  }


...


export default compose(
  graphql(POST_QUERY, {
    name: 'carQuery',
    options: props => ({
      fetchPolicy: 'network-only',
      variables: {
        where: {
          id: props.match.params.id,
        }
      },
    }),
  }),
  graphql(DELETE_MUTATION, {
    name: 'deleteCar',
  }),
  withRouter,
  withApollo
)(DetailPage)

完整代码在这里：https://github.com/alan345/naperg hack之前的错误resetStore

发生变异后，如何跨视图更新受影响的数据？

2 个答案: