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

(*1*)

Teacher: (*20*) From Insomnia, let’s replica the mutation for eliminating a bookmark. Open the tale part and create a brand new consistent referred to as eradicate bookmark mutation. This will likely use the GraphQL tag and template strings.

[0:11] Let’s paste the mutation within, open the terminal, and regenerate the kinds. Import the newly generated eradicate bookmarks mutation, and the eradicate bookmarks mutation variables from our generated operation varieties. Beneath the upload bookmark mutation, upload any other consistent.

[0:26] This will likely be an array and we will de-structure fetching as isRemoving bookmark. The second one merchandise within the array will likely be eradicate bookmark and it is going to be useMutation. We will go in to take away bookmark mutation. Let’s additionally go within the varieties.

[0:40] Take away bookmark mutation and take away bookmark mutation variables. Let’s upload any other prop to an element referred to as CTA. This will also be both upload or eradicate. Let’s de-structure it from the props. Within the render serve as, let’s handiest show this Upload Bookmark button if the CTA is upload.

[0:57] Beneath it, let’s take a look at if there’s a bookmark ID and we aren’t already eliminating a bookmark, and the CTA is-remove. Then let’s go back a pressable with some textual content within it pronouncing, eradicate bookmark. Another way, go back null. On a pressable, go in an on press prop.

[1:14] This will likely be an error serve as. In fact, eradicate bookmark. Right here, we will want to go within the bookmark ID. The bookmark ID goes to be merchandise bookmark ID. In spite of everything, for the loading state, we need to display that if we are including a bookmark or if we are eliminating one.

(*14*) At the house display, let’s scroll right down to the render merchandise. Let’s go in CTA = upload, as a result of we need to display the Upload button. Within the bookmark display, let’s scroll right down to the tale. Right here, we will go in CTA = eradicate, as a result of we need to display the Take away button.

[1:41] Now we will eradicate a bookmark, however we nonetheless must pull-to-refresh for it to if truth be told get got rid of. It’s because if we take a look on the eradicate bookmark mutation, it handiest returns a Boolean, true or false, for whether or not the bookmark was once got rid of.

[1:52] We will want to put into effect the remainder of the cache updates manually according to this consequence. Open app.tsx, and within the updates phase, let’s upload one for eradicate bookmark. This will likely go back the end result, args, and cache.

(*11*) Let’s import the eradicate bookmark mutation and take away bookmark mutation variables from our generated varieties. We will know that the results of eradicate bookmark will likely be of sort, eradicate bookmark mutation. The arguments will likely be of sort, eradicate bookmark mutation variables.

[2:20] As ahead of, let’s take a look at whether or not the end result, eradicate bookmark, returns true. If that is so, let’s do cache, replace question. We will go within the bookmarks question as ahead of. Within the replace serve as, we will get the knowledge, which will likely be of sort all-bookmarks question or null.

[2:34] Then we will take a look at if knowledge.bookmarks is outlined. Let’s do knowledge.bookmarks equals, and we will do knowledge bookmarks clear out. We get the article and we will handiest stay the pieces the place the article ID isn’t equivalent to the args bookmark ID. Let’s additionally go back the knowledge from the top. Once we eradicate the bookmark, it will get routinely got rid of from the bookmarks tab.

[2:55] Then again, after we head over to the house tab, the bookmark emoji remains to be being displayed right here subsequent to the identify and handiest will get up to date once we pull to refresh. Let’s upload those two tales again to our bookmarks.

[3:06] With a view to be certain this emoji disappears when the bookmark will get got rid of, we will want to make sure that as soon as a bookmark will get got rid of, then this bookmark ID within the tale abstract box will get set again to null. Another way, we will want to know the tale ID that this bookmark was once for.

[3:20] Let’s upload a let tale ID. Let’s initialize it to null. In our replace serve as, let’s do tale ID = knowledge.bookmarks.in finding. Let’s in finding the bookmark the place the bookmark ID is args bookmark ID. This will likely in finding both the proper bookmark or null.

[3:36] We will must additionally question for the tale and the ID of the tale. As soon as this replace question has run, then this tale ID must be populated with the ID of the tale that was once got rid of. We will want to import the GraphQL tag from Urql. After this replace question, we will do if Tale ID.

(*4*) Then, let’s create a fraction. This will likely be GraphQL tag, template strings, and fragment_on the tale sort. We will need to replace the ID and the bookmark ID. We will be able to do cache, proper fragment. We will go within the fragment we simply created.

(*3*) In an object, the fields we need to go in for the ID. This would be the tale ID of the tale that the bookmark belong to. For the bookmark ID, we need to set this to null, since the bookmark for this tale was once simply got rid of.

(*2*) Once we move to bookmarks and take away bookmark, it is going to get got rid of from the Bookmarks tab, in addition to the House tab.

(Visited 3 times, 1 visits today)