Use a GraphQL Fragment to Update Specific Item in urql GraphCache to Remove Items

Instructor: [0:00] From Insomnia, let's copy the mutation for removing a bookmark. Open the story component and create a new constant called remove bookmark mutation. This will use the GraphQL tag and template strings.

[0:11] Let's paste the mutation inside, open the terminal, and regenerate the types. Import the newly generated remove bookmarks mutation, and the remove bookmarks mutation variables from our generated operation types. Underneath the add bookmark mutation, add another constant.

[0:26] This will be an array and we can de-structure fetching as isRemoving bookmark. The second item in the array will be remove bookmark and it'll be useMutation. We'll pass in to remove bookmark mutation. Let's also pass in the types.

[0:40] Remove bookmark mutation and remove bookmark mutation variables. Let's add another prop to a component called CTA. This can be either add or remove. Let's de-structure it from the props. In the render function, let's only display this Add Bookmark button if the CTA is add.

[0:57] Underneath it, let's check if there is a bookmark ID and we're not already removing a bookmark, and the CTA is-remove. Then let's return a pressable with some text inside it saying, remove bookmark. Otherwise, return null. On a pressable, pass in an on press prop.

[1:14] This will be an error function. Of course, remove bookmark. Here, we'll need to pass in the bookmark ID. The bookmark ID is going to be item bookmark ID. Finally, for the loading state, we want to show that if we're adding a bookmark or if we're removing one.

[1:28] On the home screen, let's scroll down to the render item. Let's pass in CTA = add, because we want to show the Add button. In the bookmark screen, let's scroll down to the story. Here, we'll pass in CTA = remove, because we want to show the Remove button.

[1:41] Now we can remove a bookmark, but we still have to pull-to-refresh for it to actually get removed. This is because if we have a look at the remove bookmark mutation, it only returns a Boolean, true or false, for whether the bookmark was removed.

[1:52] We'll need to implement the rest of the cache updates manually based on this result. Open app.tsx, and in the updates section, let's add one for remove bookmark. This will return the result, args, and cache.

[2:05] Let's import the remove bookmark mutation and remove bookmark mutation variables from our generated types. We'll know that the result of remove bookmark will be of type, remove bookmark mutation. The arguments will be of type, remove bookmark mutation variables.

[2:20] As before, let's check whether the result, remove bookmark, returns true. If so, let's do cache, update query. We'll pass in the bookmarks query as before. In the update function, we'll get the data, which will be of type all-bookmarks query or null.

[2:34] Then we'll check if data.bookmarks is defined. Let's do data.bookmarks equals, and we'll do data bookmarks filter. We get the item and we'll only keep the items where the item ID is not equal to the args bookmark ID. Let's also return the data from the end. When we remove the bookmark, it gets automatically removed from the bookmarks tab.

[2:55] However, when we head over to the home tab, the bookmark emoji is still being displayed here next to the title and only gets updated after we pull to refresh. Let's add these two stories back to our bookmarks.

[3:06] In order to ensure this emoji disappears when the bookmark gets removed, we'll need to ensure that once a bookmark gets removed, then this bookmark ID in the story summary field gets set back to null. Otherwise, we'll need to know the story ID that this bookmark was for.

[3:20] Let's add a let story ID. Let's initialize it to null. In our update function, let's do story ID = data.bookmarks.find. Let's find the bookmark where the bookmark ID is args bookmark ID. This will find either the correct bookmark or null.

[3:36] We'll have to also query for the story and the ID of the story. Once this update query has run, then this story ID should be populated with the ID of the story that was removed. We'll need to import the GraphQL tag from Urql. After this update query, we'll do if Story ID.

[3:53] Then, let's create a fragment. This will be GraphQL tag, template strings, and fragment_on the story type. We'll want to update the ID and the bookmark ID. We can do cache, right fragment. We'll pass in the fragment we just created.

[4:09] In an object, the fields we want to pass in for the ID. This will be the story ID of the story that the bookmark belong to. For the bookmark ID, we want to set this to null, because the bookmark for this story was just removed.

[4:22] When we go to bookmarks and remove bookmark, it will get removed from the Bookmarks tab, as well as the Home tab.