DEV Community

Update Apollo Cache after a mutation and get instant benefits on your UI

Lucis on January 17, 2020

I'm very fond of the products developed by the Apollo team, specially the Apollo Client. It started as a simple tool to connect your frontend data ...
Collapse
 
cautioncreation profile image
Byron Hill

Great post!

As per the Apollo-Client docs "Do not modify the return value of readQuery. The same object might be returned to multiple components. To update data in the cache, instead create a replacement object and pass it to writeQuery."

I attempted to use your solution for adding to a list of a users chats on creation and ran into "Error: Cannot assign to read only property 'edges' of object '#'"

Once again, great post, just thought I'd put this here for anyone running into similar issues. You must create a new object, you cannot mutate the return value of cache.readQuery anymore and apollo will throw an error.

Collapse
 
jeremyhunter profile image
Jeremy Hunter

This is what the Apollo docs for local state should look like - much easier to follow for real use cases. It seems like it will get a bit convoluted, but not unmanageable, when paired with optimisticResponse since they both interact with the cache. Thanks :)

Collapse
 
ephremdeme profile image
Ephrem Demelash

Helpful post and thanks for sharing. here is my package npmjs.com/package/mutation-cache-u... motivated by you.

Collapse
 
lucis profile image
Lucis

Very nice, Ephrem!

Collapse
 
usman174 profile image
Muhmmad Usman

Does it updates cache automatically?

Collapse
 
kimobrian254 profile image
Warrior254

I've run into some issues and no one seems to respond either in the apollo community, graphql or redit. The issue is cache update but for a paginated api result. Here's the problem as I wrote it on reddit(reddit.com/r/graphql/comments/frr7...)

I'm running into an issue with cache updates. I've a list of posts fetched using a query FETCH_POSTS which returns an array of type Post. I also have a CREATE_POST and UPDATE_POST mutations which return an item of type Post too. When I create a post, and use writeQuery to update the cache it works ok. The new object will be [...existingPosts, newPost]. When it comes to updating a post. When I readQuery and log the result, it seems to have updated the cache already(I'm guessing it's an auto update since the type and id are the same and exist) so writeQuery in that situation doesn't make sense. The only issue is these updates do not appear on the UI. Any idea why I may be experiencing this? This implementation works when the list of posts is not paginated. But on pagination the edit to the item in the list does not work. This is my query to fetch posts using the connection directive to ignore the pagination params.

const FETCH_POSTS = gql query getPosts($params: FetchPostsParams!, $pagination: PaginationParams) { posts(params: $params, pagination: $pagination) @connection(key: "posts", filter: ["params"]) { ...PostFragment } } ${FRAGMENTS.POST_FRAGMENT} ;

Collapse
 
lucis profile image
Lucis

Things like this usually happen because the query is cached paired with the pagination variables... There was a solution I've found on Github Issues years ago where you could retrieve the "last used params" for the pagination, and, with that, your cache update would work just fine.

But, I see it's a simple update, the resolutions algorithm should work just fine, it's the easiest of cases. One thing you can look into is the use of Fragments, I've never used it, so it might be the point of the problem.

Collapse
 
maryvorontsov profile image
Mary Vorontsov

Hey Luciano! Will you be interested in a paid writing opportunity in your spare time?

Collapse
 
lucis profile image
Lucis

Hey Mary!

How would that work? It depends on the load, I guess...

Collapse
 
maryvorontsov profile image
Mary Vorontsov

sure. do you have skype or twitter? my twitter @maryvorontsov

Collapse
 
cforsyth68 profile image
Charles Forsyth

"here" link (apollographql.com/docs/react/data/...) is broken

Collapse
 
edon92 profile image
Edon

Great Post.
Thanks for sharing

Collapse
 
lico profile image
SeongKuk Han

It helped a lot. Thank you for sharing