DEV Community


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

kimobrian254 profile image

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(

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} ;

lucis profile image
Lucis Author

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.