Question

我的反应本机应用程序中有一个更高阶的组件，用于检索配置文件。当我称之为“添加关注者”变种时，我希望它更新配置文件以反映其关注者集合中的新关注者。如何手动触发对商店的更新。我可以重新获取整个配置文件对象，但更喜欢在没有网络重新获取的情况下执行插入客户端。目前，当我触发突变时，配置文件不会反映屏幕上的变化。

看起来我应该使用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

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

1 个答案: