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

问题描述

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

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.

编辑 2:@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 功能更新商店 链接.

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.

也可以让 apollo 为您处理更新.如果您稍微更改突变响应，则将以下用户添加到关注的用户并添加 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屋！