WEBVTT 00:00.000 --> 00:00.240 Okay. 00:00.240 --> 00:01.050 I'm just going to demonstrate. 00:01.080 --> 00:03.900 Now, how do you go about the delete product method. 00:03.900 --> 00:06.540 Hopefully you gave this a go and you were successful. 00:06.540 --> 00:12.480 And if you can delete a product and it updates the inventory, then please feel free to skip this. 00:12.480 --> 00:19.110 All I'm going to do is literally demonstrate what we need to do to enable this delete product functionality. 00:19.110 --> 00:22.410 So please feel free to skip if you've already got this functionality working. 00:22.410 --> 00:29.280 There's no need to watch this, but just in case you didn't or don't want to, that's fine as well. 00:29.280 --> 00:34.380 I'm going to run through what we need to do to achieve this, and I'm going to start off in the admin 00:34.410 --> 00:35.130 API. 00:35.160 --> 00:39.690 We need to add another method inside here of course to delete a product. 00:39.690 --> 00:45.570 So I'll just go through and add another query to delete products. 00:45.990 --> 00:50.190 And this is going to use the builder dot mutation. 00:50.550 --> 00:55.170 And the first parameter here is what are we returning from a delete. 00:55.170 --> 00:56.100 Well our delete method. 00:56.100 --> 00:57.180 It doesn't return anything. 00:57.180 --> 01:00.450 So we specify void as the first type parameter there. 01:00.450 --> 01:03.780 And then we can specify number as the second parameter. 01:03.780 --> 01:09.560 Because this is for a deletion or we need to send up is the id as the root parameter. 01:10.220 --> 01:14.960 So we'll open parentheses curly brackets and we'll add a query in here. 01:15.020 --> 01:17.270 It's going to take an ID that is a number. 01:17.300 --> 01:23.600 We'll add the arrow open curly brackets and we can return in curly brackets the URL. 01:23.960 --> 01:25.820 And this is going to be in Backticks. 01:25.820 --> 01:30.260 We'll specify products forward slash and then dollar ID. 01:30.830 --> 01:38.810 And then for the method we'll specify that this is a delete operation. 01:38.810 --> 01:40.850 And do we need to do anything else in here. 01:40.880 --> 01:46.430 Well all we need to do is just export our used delete product mutation. 01:46.430 --> 01:51.650 So I'll add that to the exports here and say use delete product mutation. 01:51.650 --> 01:53.240 So nothing outrageous there. 01:53.240 --> 01:54.740 Pretty straightforward stuff. 01:54.740 --> 01:59.690 And we'll go to our inventory page to handle this. 01:59.720 --> 02:04.460 So inside our inventory page let's just add the hook that we need. 02:04.460 --> 02:12.440 So we need the const and in square brackets we'll just say delete products and set it equal to use delete 02:12.860 --> 02:18.140 product mutation inside here and we'll add a helper method for this. 02:18.140 --> 02:20.570 Or at least I've chosen to, because we need to do two things here. 02:20.570 --> 02:25.760 Really, we need to first of all delete the product using the hook. 02:25.760 --> 02:31.250 But also we want to make use of the Refetch so that we update our inventory page as well, so that the 02:31.280 --> 02:35.780 admin can see that this product is now gone from the inventory. 02:35.780 --> 02:42.200 So I'll do this inside a helper method I'll just say const handle delete products. 02:43.580 --> 02:45.530 And we'll make this an async method. 02:45.530 --> 02:49.370 It will take the ID of number as a parameter. 02:49.370 --> 02:50.600 I'll add the arrow. 02:50.600 --> 02:56.540 And then inside here I'll just do this inside a try catch block and just console log any error. 02:57.140 --> 03:02.780 And inside the try I'll just await and then use the delete product method and pass in the id. 03:03.140 --> 03:08.510 And then I'll use the Refetch method so that the inventory page gets updated. 03:08.510 --> 03:14.570 Of course, that does mean going out to our API again, and it's not the most efficient way to do this 03:14.570 --> 03:20.030 because we could optimistically update our inventory page if we wish to do so. 03:20.270 --> 03:26.510 I'm not going to go that far for simplicity, and because this is not a user facing really functionality, 03:26.510 --> 03:28.880 it's just the admin that's going to use this. 03:29.300 --> 03:33.560 And how often is a delete product activity going to take place? 03:33.560 --> 03:38.390 These are all things that you can ask yourself and think, well, do I need optimistic updates for absolutely 03:38.390 --> 03:39.140 everything? 03:39.140 --> 03:44.330 You could say that this would be an example of no, I do not need any optimistic updating because for 03:44.330 --> 03:49.070 sure, we know that our client knows what's been deleted. 03:49.070 --> 03:53.480 And sure, we could and have seen how to do optimistic updates. 03:53.480 --> 03:56.420 But I'm going to say no, we don't need it for this occasion. 03:57.410 --> 04:02.270 And yes, you can call me lazy if you wish, but I have demonstrated how to do that earlier on, so 04:02.270 --> 04:08.330 please do do that if you want to practice using an optimistic update here. 04:08.450 --> 04:11.390 Now fully handle delete product method. 04:11.390 --> 04:20.810 Let's go down to our action buttons and I'll use inside this button. 04:20.810 --> 04:24.680 I'll give it the onclick and add parentheses. 04:24.680 --> 04:34.100 And I'll just say handle delete products and just passed in the product.id as the parameter layer, 04:34.940 --> 04:42.530 and that is that we'll have loading taking place or the loading indicator taking place automatically 04:42.530 --> 04:46.820 because of our work that we've done in RTK query to handle that. 04:46.820 --> 04:48.650 So that should be it really. 04:48.650 --> 04:50.300 So let's go across and take a look. 04:50.300 --> 04:57.440 So inside our inventory let's pick on the products that I have just created which is test product one. 04:57.440 --> 04:59.570 I would like to see that disappear from this list. 04:59.570 --> 05:02.510 So if I click delete we'll see the loading. 05:02.510 --> 05:08.030 And we should see the product disappear from this list. 05:08.360 --> 05:11.360 And we're back to 18 products now as well. 05:11.360 --> 05:12.170 So that's it. 05:12.170 --> 05:14.150 That's the delete method taken care of. 05:14.150 --> 05:17.180 We've still got a 1 or 2 things to finish off in this section. 05:17.180 --> 05:18.530 This final section. 05:18.560 --> 05:24.260 And next we'll take a look at how we can I'm going to use the word secure even though it's not really 05:24.260 --> 05:25.160 security. 05:25.370 --> 05:34.340 We'll take a look at how we can protect our inventory from people like Bob who do not have the authority 05:34.340 --> 05:36.170 to edit our products. 05:36.170 --> 05:38.330 And we'll take a look at that next.