How to update Apollo data store / cache from mutation request, update option doesn't seem to fire
I have a higher order component in my react native app that fetches a profile. When I call the add follower mutation, I want it to update the profile to reflect the new follower in its follower collection. How to start updating the repository manually. I could restore the entire profile object, but would rather just insert the client side without updating the network. Currently, when I run a mutation, the profile doesn't reflect the changes on the screen.
It looks like I should be using a parameter update
, but it doesn't 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 });
},
});
source to share
EDIT: just realized that you need to add an update to the graphql mutation definition.
EDIT 2: @MonkeyBonkey found that you need to add variables to the read requests 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: { .... },
);
I suggest you update the repository using updateQueries
the link functionality .
See for example this post
You can use compose
to add mutation to a component. Inside the mutation, you don't need to call client.mutate
. You just invoke the mutation on the next click.
It might also be possible for apollo to handle the update for you. If you modify the mutation answer a bit by adding the following users to the next user and adding functionality dataIdFromObject
. link
source to share