Update GraphCache cacheExchange Directly After a urql Mutation

Instructor: [0:00] Right now, we don't have any stories bookmarked. We'll go to the home screen and add a bookmark. The story on the home page get updated, but when we head over to the bookmarks tab, the bookmark doesn't appear here.

[0:10] We'll still have to do pull-to-refresh for the bookmark to appear. This is because there is no connection between the addBookmark mutation and the allBookmarks query.

[0:19] When the addBookmark mutation gets run, there is no way for Graphcache to know that it would also get returned from the allBookmarks query. Let's open app.tsx, and in the cache exchange, we can add an update section for the mutation called addBookmark.

[0:33] This will get the result of the mutation, the arguments, and access to the cache. This will return an error function. Let's import the addBookmark mutation type from our generator types. We can use it in the addBookmarks mutation update.

[0:48] We know that the result will be of type addBookmark mutation. In here, we'll want to check if result.addBookmark is defined. If so, we'll want to update the allBookmarks query in the cache.

[0:59] In order to update a particular query from the cache, we'll need to first query for it. In the bookmark screen, let's export the bookmarks query and import it in our app.tsx. Now we can do cache, update query. Here for the first argument, we'll pass in an object with the query.

[1:16] The query will be our bookmarks query. The second argument will be the update function. The update function will get the data that was fetched from the cache as the argument. This data will be of the return type of the bookmarks query.

[1:30] We can import the allBookmarks query from our generated types, and type this data as the allBookmarks query. In this update function, we will check if data is undefined. If this query was able to be fetched from the cache.

[1:44] If data.bookmarks is defined, and result.addBookmark is defined, then data.bookmarks.push. We'll add the return value from this addBookmark mutation, so result.addBookmark. Finally, return the data.

[2:01] This is complaining because it's saying that the summary field isn't defined in the result addBookmark. Where exactly does this result come from? In our story component, where we call the addBookmark mutation, the result is essentially this.

[2:14] Whereas if we go to the bookmark screen, and look at the data type for the story in a bookmark, we'll see that we're using the story summary fields here. In particular, the story summary fields include the ID, title, summary, and bookmark ID.

[2:26] Whereas in our story, we only include the ID, title, and the bookmark. In the story component, import the story summary fields from our fragments file, add it to the addBookmark mutation, and spread the story summary fields under the story. Let's update our types.

[2:40] If you're using VS code, it's often necessary to open the generated types file before they actually take effect. Heading over to our app.tsx, we'll see that this function no longer errors. The only error we have left is here. This is saying that the result of data might be null.

[2:53] We can just do allNull here. When we go to Home, and add this story to our bookmarks, and head over to the bookmark screen, it appears immediately.