Use urql's useMutation Hook in React Native to Execute a Mutation
We'll use the useMutation hook to expose the mutation function. Call the mutation function to add a story to bookmarks when the user taps the bookmark button.
Then we will ensure the bookmarkId is returned in the mutation request value so its gets updates in the cache (and so also the UI).
During this process, we'll generate some types for the useMutation to ensure we are passing in the correct data.
Resources:
- Bookmark emoji: https://emojipedia.org/bookmark/
urqlmutations docs: https://formidable.com/open-source/urql/docs/basics/react-preact/#mutations
Checkpoint: Add a story to bookmarks
Instructor: [0:00] Looking at our GraphQL schema in Insomnia, we can see that in our API, the story has a field for the bookmark ID, which returns the bookmark ID, if one exists, and null, otherwise. In the story summary fields fragment, we'll want to query for the bookmark ID.
[0:14] Open the terminal and update the types. Since we're querying for the bookmark ID, we'll have access to this field in the story component. When using emoji in your app, one thing to note is that the emoji will look different depending on the user's platform.
[0:28] Let's copy the bookmark emoji. Next to the title, let's check if the item has a bookmark ID. If so, we'll display the bookmark emoji. Otherwise, just an empty string. The banana story which we have bookmarked, will have a bookmark emoji next to it to indicate this.
[0:42] If the story is not bookmarked, so if not item.bookmark ID, then let's display a pressable with a text inside it to say, Add Bookmark. Otherwise, display null. Let's import view from React Native, and let's wrap the text and the pressable inside the view. Give this view a style of styles.row.
[1:01] In our stylesheet, we'll add a row style with flex direction row, align item center, and justify content base between. Let's also move this margin bottom from the title, down to the row styles. Heading over to Insomnia, we can copy the addBookmark mutation.
[1:16] In the story component, let's import GraphQL tag from Urql, and declare a const addBookmark mutation. This equals GraphQL tag with template strings, and we'll paste our mutation. Now that we've added a new mutation, we'll want to open a terminal and regenerate the types.
[1:30] Let's import useMutation from Urql. Underneath our navigation hook, let's do const and destructure the fetching state. Let's rename this to, "Is-adding Bookmark", and the sticken item here will be the addBookmark function. This will equal useMutation.
[1:45] We'll need to pass in the addBookmark mutation we just created. If we look at our generated types, we'll find the addBookmark mutation and addBookmark mutation variables. Let's import these at the top of the file, so addBookmarks mutation and addBookmarks mutation variables.
[2:01] We'll want to pass them into the useMutation, so addBookmarks mutation, and addBookmarks mutation variables. If you hover over the addBookmark, we'll see that this already knows that we'll need to pass in a story ID to call this function.
[2:13] In our pressable, let's do on-press. This will take an arrow function. Let's call addBookmark, and the story ID being item.ID. Let's also import activity indicator from React Native. Let's do, if is-adding bookmark, then let's show the activity indicator. Otherwise, null.
[2:29] In the if-statement above, let's only show this button if there isn't a bookmark ID and if we're currently not already adding a bookmark. We can add a new bookmark, but we'll need to do pull-to-refresh for the data to update.
[2:41] This is because in our addBookmark mutation, when we add the bookmark, we have the opportunity to re-request a new fields from the story. What changes in the story when we add a bookmark? Well, it's the bookmark ID.
[2:53] Let's query the new value of the bookmark ID from the story after we add a bookmark. Let's reload the app, and now when we add the third story to our bookmarks, the emoji appears immediately after the query has finished.
[3:05] This is because Graphcache can find a story based on the type name, in our case, story, and the ID, and will automatically update these fields in the cache. All of this data is stored locally in our API.
[3:17] If we open the API and data.json, we can delete the bookmarks from the bookmarks array. When we go back to our app, we can pull-to-refresh, and all the bookmarks will be gone again.