如何从突变查询中更新 Apollo 数据存储/缓存，更新选项似乎没有触发

Question

我的 React Native 应用程序中有一个高阶组件，用于检索配置文件。当我调用“添加追随者”突变时，我希望它更新个人资料以反映其追随者集合中的新追随者。如何手动触发对商店的更新。我可以重新获取整个配置文件对象，但更愿意只在没有网络重新获取的情况下进行插入客户端。目前，当我触发突变时，配置文件不会反映屏幕上的变化。

看起来我应该使用update 选项，但它似乎不适用于我命名的突变。 http://dev.apollodata.com/react/api-mutations.html#graphql-mutation-options-update

const getUserQuery = gql`
 query getUserQuery($userId:ID!) {
    User(id:$userId) {
      id
      username
      headline
      photo
      followers {
        id
        username
        thumbnail
      }
    }
 }
`;
...

const followUserMutation = gql`
  mutation followUser($followingUserId: ID!, $followersUserId: ID!) {
    addToUserFollowing(followingUserId: $followingUserId, followersUserId: $followersUserId) {
      followersUser {
        id
        username
        thumbnail
      }
    }
  }`;
...

@graphql(getUserQuery)
@graphql(followUserMutation, { name: 'follow' })
@graphql(unfollowUserMutation, { name: 'unfollow' })
export default class MyProfileScreen extends Component Profile

...

  this.props.follow({
    variables,
    update: (store, { data: { followersUser } }) => {
      //this update never seems to get called
      console.log('this never triggers here');
      const newData = store.readQuery({ getUserQuery });
      newData.followers.push(followersUser);
      store.writeQuery({ getUserQuery, newData });
    },
  });

Answer 1

编辑：刚刚意识到您需要将更新添加到突变的 graphql 定义中。

编辑 2：@MonkeyBonkey 发现您必须在读取查询函数中添加变量

@graphql(getUserQuery)
@graphql(followUserMutation, {
  name: 'follow',
  options: {
    update: (store, { data: { followersUser } }) => {

       console.log('this never triggers here');
       const newData = store.readQuery({query:getUserQuery, variables});
       newData.followers.push(followersUser);
       store.writeQuery({ getUserQuery, newData });
     }
  },
});
@graphql(unfollowUserMutation, {
  name: 'unfollow'
})
export default class MyProfileScreen extends Component Profile

  ...

  this.props.follow({
      variables: { .... },
    );

我建议您使用updateQueries 功能link 更新商店。

例如看这个post

您可以使用compose 将突变添加到组件中。在突变内部，您不需要调用client.mutate。您只需在关注用户点击时调用突变。

也可以让 apollo 为您处理更新。如果您稍微更改突变响应，则将以下用户添加到被关注用户并添加 dataIdFromObject 功能。 link