如何从突变查询更新Apollo数据存储/缓存，更新选项似乎未触发 [英] How do I update the Apollo data store/cache from a mutation query, the update option doesn't seem to trigger

问题描述

在我的本机应用程序中，我有一个更高阶的组件来检索配置文件.当我称呼添加关注者"突变时，我希望它更新配置文件以反映其关注者集合中的新关注者.如何手动触发对商店的更新.我可以重新获取整个配置文件对象，但更喜欢只进行插入客户端而不进行网络重新获取.目前，当我触发突变时，配置文件无法在屏幕上反映出变化.

I have a higher order component in my react native application that retrieves a Profile. When I call an "add follower" mutation, I want it to update the Profile to reflect the new follower in it's followers collection. How do I trigger the update to the store manually. I could refetch the entire profile object but would prefer to just do the insertion client-side without a network refetch. Currently, when I trigger the mutation, the Profile doesn't reflect the change in the screen.

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

It looks like I should be using the update option but it doesn't seem to work for me with my named mutations. 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 });
    },
  });

推荐答案

刚刚意识到，您需要将更新添加到突变的graphql定义中.

Just realised that you need to add the update to the graphql definition of the mutation.

@MonkeyBonkey发现您必须在读取查询功能中添加变量

EDIT 2: @MonkeyBonkey found out that you have to add the variables in the read query function

@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功能链接 a>.

I suggest you update the store using the updateQueries functionality link.

例如参见此帖子

您可以使用compose将突变添加到组件中.在突变内部，您无需调用client.mutate.您只需点击跟随用户的点击即可调用该突变.

You could use compose to add the mutation to the component. Inside the mutation you do not need to call client.mutate. You just call the mutation on the follow user click.

也有可能让阿波罗为您处理更新.如果您稍微改变了变异响应，则可以将以下用户添加到关注的用户中，并添加dataIdFromObject功能. 链接

It might also be possible to let apollo handle the update for you. If you change the mutation response a little bit that you add the following users to the followed user and add the dataIdFromObject functionality. link

这篇关于如何从突变查询更新Apollo数据存储/缓存，更新选项似乎未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！