WEBVTT 00:00.000 --> 00:00.270 Okay. 00:00.300 --> 00:04.530 Now that we're using RTK query to go and get the products, let's do the same. 00:04.530 --> 00:06.750 But of course for the fetch products. 00:06.780 --> 00:13.080 Now in our catalog API, we've already I say we've created this hook, but it's been created on our 00:13.080 --> 00:16.140 behalf to go out and get an individual product. 00:16.140 --> 00:20.190 So let's go make use of this and we'll open up the product details. 00:20.670 --> 00:24.300 And inside here let's go up to the top. 00:24.300 --> 00:26.670 And once again we're using the Useeffect. 00:26.670 --> 00:28.200 We've got the Usestate. 00:28.320 --> 00:32.310 And we're well we're not checking to see if we are loading. 00:32.310 --> 00:35.610 We're just checking to see if we have or do not have the product. 00:35.610 --> 00:40.710 So we can remove the useeffect and the use state. 00:40.710 --> 00:42.600 We no longer need that. 00:42.630 --> 00:47.490 Now we do still need the ID of course, because that's where we're getting the ID of the product we 00:47.490 --> 00:52.350 want to load and we're going to say const and in curly brackets. 00:52.350 --> 00:53.760 We'll specify data. 00:53.910 --> 00:59.640 And what we can do if we want the data to be we have to use data because that's what's being returned 00:59.640 --> 00:59.970 to us. 00:59.970 --> 01:05.700 But if we want to use it as a different name, we can add a colon and then specify products instead. 01:05.700 --> 01:08.170 So we don't need to change the rest of our code here. 01:08.170 --> 01:12.730 And we can also use the Isloading again that we get from our hook. 01:12.760 --> 01:16.510 And we're going to use the Usefetch product details query. 01:16.510 --> 01:20.710 And we can pass in here the arguments we need. 01:20.740 --> 01:27.640 Now the way that these parameters work, then we may need to do something a little bit funky here. 01:27.640 --> 01:28.990 We'll see how it goes. 01:28.990 --> 01:34.540 But last time I wasn't able to just specify the ID as a number inside here. 01:34.540 --> 01:35.290 We'll see. 01:35.560 --> 01:38.320 And if I try the ID then sure, I get a warning. 01:38.320 --> 01:45.610 And the warning tells me that argument of type string or undefined is not assignable to type number 01:45.610 --> 01:47.320 or unique symbol. 01:47.320 --> 01:50.260 And the reason is is because I use params. 01:50.440 --> 01:55.540 Then if we hover over the id, then the id itself. 01:55.540 --> 02:00.730 Well, at the time of typing the code, or when we're writing this code, our compiler doesn't know 02:00.730 --> 02:06.730 if we have the id, because our compiler, of course cannot read a URL that hasn't been input yet by 02:06.730 --> 02:10.330 the user, so it doesn't know if that ID is going to be available. 02:10.330 --> 02:13.260 So it's defined as a string or undefined. 02:13.260 --> 02:15.090 And we can't pass a string. 02:15.090 --> 02:17.550 That could be a string or it could be undefined. 02:17.580 --> 02:22.710 So we effectively need to check be defensive for our ID here. 02:22.710 --> 02:31.200 So I'm going to add a question mark and say it's going to be the ID or it's going to be zero as in we 02:31.200 --> 02:34.050 don't have an ID but now we've got another complaint. 02:34.080 --> 02:36.780 Is that the same complaint or is it a different one. 02:37.170 --> 02:44.520 And because our URL is a string, then it tells us the argument of type string or zero is not assignable 02:44.550 --> 02:45.900 to type number. 02:45.900 --> 02:53.100 And because I've defined in the catalog API that we're expecting a type of number here, then that is 02:53.100 --> 02:56.130 what we have to pass to the query. 02:56.130 --> 03:03.540 So back in our product details, if we want to convert what is a string to a number, we can use something 03:03.540 --> 03:05.820 like pass int which is a function. 03:05.820 --> 03:08.190 Or we can use the shorthand version. 03:08.190 --> 03:10.800 And when I say pass int it's using this. 03:10.800 --> 03:15.330 And then using the id as a parameter here, that would work. 03:15.540 --> 03:20.620 And there's a shorthand way of doing this, though instead of Parseint, we can just use plus the plus 03:20.620 --> 03:24.310 symbol, and that will cast that into a number. 03:24.820 --> 03:26.980 And then we can check to see if we're loading. 03:26.980 --> 03:31.810 So we'll stick with the check to see if we have or do not have the product. 03:31.810 --> 03:39.040 And I'll say or is loading with the double pipe there for the Or condition. 03:39.190 --> 03:44.260 And then we can remove the unused imports at the top as well. 03:44.260 --> 03:46.870 And also the use effect and the use state. 03:46.870 --> 03:48.130 We're not using those anymore. 03:48.130 --> 03:49.360 So we can get rid of those. 03:49.360 --> 03:53.320 And what we should have now is a clean component. 03:53.800 --> 03:54.490 Marvelous. 03:54.490 --> 03:55.780 But does it work? 03:55.810 --> 03:57.340 And let's go take a look. 03:57.340 --> 04:01.840 So let's just refresh the page and we see the little loading. 04:01.840 --> 04:05.230 And if I go to view a product we see loading again. 04:05.230 --> 04:06.520 But we've got our product. 04:06.520 --> 04:09.610 And if I go back to the catalog no loading. 04:09.610 --> 04:13.570 If I go back to the product I just viewed no loading. 04:13.570 --> 04:15.130 And that will be the same here as well. 04:15.160 --> 04:18.250 And if I go to a different product, I didn't see the loading there. 04:18.250 --> 04:25.560 But sometimes things are just fast and I was expecting to see loading for level two, but perhaps not. 04:25.650 --> 04:27.120 And sure. 04:27.120 --> 04:32.640 But everything's a bit too quick at the moment, and we will add some fake delay so that we can genuinely 04:32.640 --> 04:35.880 see if there is loading happening. 04:35.880 --> 04:41.190 Because when everything's local on our developer machine, then there's not a great deal of loading 04:41.190 --> 04:46.710 going on between our user interface, our API, back end, our database. 04:46.710 --> 04:49.080 Everything can happen very, very quickly. 04:49.080 --> 04:53.970 So we will at some point in the not too distant future, add a fake delay to this. 04:53.970 --> 04:58.650 And what I'd recommend now is you spend a bit of time with your react dev tools and take a look and 04:58.650 --> 05:01.980 make different queries and just practice. 05:02.010 --> 05:07.680 Take a look at the different tools that we have at our disposal inside Chrome, and just click around 05:07.680 --> 05:10.890 a bit and just practice using these tools, see what's going on. 05:10.890 --> 05:14.010 Just become familiar with them just for a couple of minutes. 05:14.010 --> 05:21.450 And what we're going to take a look at next is creating a custom based query so we can centralize our 05:21.450 --> 05:27.660 query logic to the API, which will help us out as we build the rest of our application.