WEBVTT 00:00.350 --> 00:00.830 Okay. 00:00.830 --> 00:06.440 So to continue on from the previous lesson, what we have here is the create API function. 00:06.440 --> 00:10.370 And in here we specify how we want to go and fetch our data. 00:10.370 --> 00:13.310 And what this creates API gives us. 00:13.310 --> 00:16.790 Well let's write the code and then I'll talk about it as we go through this. 00:16.790 --> 00:18.920 Because this is pretty cool. 00:18.950 --> 00:26.150 And we give this a reducer path and we specify or if we don't specify this it's just going to be API. 00:26.150 --> 00:32.630 But we're going to have several of these little create APIs for different features in our application. 00:32.630 --> 00:35.840 So I'm going to give this a name of catalog API. 00:35.870 --> 00:38.420 Then we give it a base query. 00:39.050 --> 00:46.370 And what comes along with the RTK query is we've got a fetch base query that we can utilize. 00:46.370 --> 00:47.630 So I'll bring this in. 00:47.630 --> 00:51.890 And then we can specify in parentheses the base URL. 00:51.890 --> 00:55.520 And I'm still just for the short term going to hard code this in. 00:55.520 --> 00:57.710 And I'll say forward slash API. 00:58.100 --> 01:03.900 After the 5001 I'll add a comma and then we specify the Endpoints. 01:03.930 --> 01:06.780 These are the API endpoints that we're going to hit. 01:06.780 --> 01:11.550 That's going to go out and fetch our data and bring it back into our application. 01:11.550 --> 01:15.990 So after the endpoints we specify builder inside parentheses. 01:15.990 --> 01:19.080 Then we add an arrow open more parentheses. 01:19.110 --> 01:22.620 Open curly brackets and then press return. 01:22.620 --> 01:26.100 And then we give our query a name. 01:26.100 --> 01:28.680 So I'm going to call this fetch products. 01:29.070 --> 01:32.130 And we specify after a colon builder. 01:32.130 --> 01:34.380 And then we specify a query. 01:34.650 --> 01:38.910 And then we specify inside angle brackets the result type. 01:38.910 --> 01:42.480 What are we going to get back from our API. 01:42.510 --> 01:45.390 That's the first type parameter. 01:45.390 --> 01:52.350 And the second type parameter is any query arguments that we need to specify along with this request. 01:52.380 --> 01:54.750 Now this is just going to go and get our list of products. 01:54.750 --> 01:57.660 So we don't specify any query arguments for this. 01:57.660 --> 02:01.860 But we are going to get back a product array from this. 02:01.860 --> 02:06.750 And then the second argument which we do need to provide for the type Filetype argument is just going 02:06.780 --> 02:12.960 to be void, because we don't have any arguments to pass up for this request yet. 02:13.020 --> 02:20.070 Then we open parentheses, more curly brackets, and then we can define the query that we're going to 02:20.070 --> 02:21.240 make to our API. 02:21.270 --> 02:23.370 So this is a callback function. 02:23.370 --> 02:25.530 So we add parentheses then the arrow. 02:25.530 --> 02:30.990 And then in more parentheses in curly brackets we pass this as an object. 02:31.170 --> 02:32.610 We'll specify URL. 02:32.610 --> 02:35.460 And then we just specify in quotes products. 02:35.460 --> 02:39.390 Because this is the URL we're going to make the request from. 02:39.390 --> 02:45.540 So it's going to go to this URL the base URL plus forward slash products. 02:45.540 --> 02:47.970 But we don't need the forward slash here. 02:47.970 --> 02:51.450 And we don't need a trailing forward slash here either. 02:51.480 --> 02:58.410 RQ query is going to correctly append this as a route parameter onto the base URL. 02:58.440 --> 03:03.420 Now we'll also create a second endpoint query. 03:03.420 --> 03:12.550 And this one we're going to call fetch products Details and we specify builder query. 03:12.550 --> 03:15.880 And once again in the type parameters we'll specify product. 03:15.910 --> 03:21.970 This one does take a type argument because we need to know our product ID, which is a type of number 03:21.970 --> 03:26.770 that we'll use as the argument parameter layer or the type parameter layer. 03:26.800 --> 03:27.910 Open parentheses. 03:27.940 --> 03:30.670 Open curly brackets, specify the query. 03:30.670 --> 03:33.880 And then we're going to specify the product id as the argument. 03:33.910 --> 03:35.200 We use that here. 03:35.200 --> 03:40.780 And then in backticks we're going to specify products forward slash dollar. 03:40.780 --> 03:45.790 And then the product ID the argument we're passing in here. 03:45.820 --> 03:49.090 So what this creates API does for us. 03:49.090 --> 03:55.180 This actually generates react hooks that we can use inside our components. 03:55.180 --> 04:03.580 So below the create API I'm going to say export const and then in curly brackets or just add empty curly 04:03.580 --> 04:03.970 brackets. 04:03.970 --> 04:08.140 For the time being we're just going to say equals catalog API. 04:08.170 --> 04:14.240 And then inside the curly brackets if I start typing you, then I can see all of the different react 04:14.270 --> 04:18.530 hooks that have been created for us from this small amount of code. 04:18.950 --> 04:22.640 So we have a use fetch product details query. 04:22.670 --> 04:25.190 I use fetch products query. 04:25.220 --> 04:28.790 We've got to use lazy fetch for both of them as well. 04:28.790 --> 04:31.880 And these are the four hooks based on our two endpoints we have. 04:31.910 --> 04:37.970 We can either lazily fetch them, which means we do something in relation to a button click. 04:37.970 --> 04:43.880 For example, we'd ask the user to click on or if we use this one, then it operates like a Useeffect 04:43.880 --> 04:48.770 as a side effect, when our component mounts, it goes and fetches the products. 04:48.890 --> 04:49.820 So great. 04:49.820 --> 04:58.550 We're going to effectively export the use fetch product detail query and also the use fetch products 04:58.550 --> 04:58.880 query. 04:58.910 --> 05:01.430 We don't need the lazy versions of this. 05:01.430 --> 05:03.470 So now we have our catalog API. 05:03.470 --> 05:05.810 We next need to tell our store about this. 05:05.810 --> 05:09.590 So let's head over to inside the App Store stores. 05:09.620 --> 05:12.800 Let's go and add this inside here. 05:12.830 --> 05:19.910 Now we add this as or inside our reducer, but we define it a slightly different way to how we did our 05:19.910 --> 05:20.390 counter. 05:20.390 --> 05:27.800 So in square brackets I'm going to specify catalog API and make sure we bring this in as well from our 05:27.800 --> 05:29.990 Features catalog folder. 05:29.990 --> 05:34.460 And then we specify the reducer path that we defined in that store. 05:34.490 --> 05:39.500 And then we add a colon and we'll say catalog API and reducer. 05:39.500 --> 05:41.090 And then add a comma. 05:41.300 --> 05:46.640 Now there's something else that we need to add specifically for API slices that we've just created. 05:46.670 --> 05:49.160 We need to also add middleware here. 05:49.160 --> 05:50.840 So I'm going to specify middleware. 05:50.870 --> 05:52.850 And then there's a function we need. 05:52.880 --> 05:54.770 We'll call it get default middleware. 05:54.770 --> 05:56.570 And then we add an arrow. 05:56.570 --> 05:59.660 And then we can use that function get default middleware. 05:59.660 --> 06:00.830 This all comes from the toolkit. 06:00.830 --> 06:03.200 We don't need to define this function ourselves. 06:03.230 --> 06:05.270 And then we can concat. 06:05.300 --> 06:09.830 And in parentheses we can say catalog API and middleware. 06:09.830 --> 06:15.110 So we're just configuring this to be used by our Redux store. 06:15.110 --> 06:21.480 And we need this middleware because this is responsible for actually handling the API request. 06:21.510 --> 06:28.890 It intercepts dispatched actions related to queries and it initiates the fetching process. 06:28.920 --> 06:32.190 It also helps us with caching and cache invalidation. 06:32.190 --> 06:35.940 We'll talk about that as we come across it, but it's all automatic for us. 06:36.060 --> 06:38.280 It all happens automagically. 06:38.310 --> 06:40.230 We don't need to configure caching. 06:40.230 --> 06:46.200 It's going to cache the data for us by itself, and we'll see that very soon in action. 06:46.200 --> 06:50.550 And it also helps us capture and handle errors from our API responses. 06:50.550 --> 06:54.480 So we just add the middleware from our catalog API. 06:54.480 --> 07:00.900 And all of that functionality comes from just not much code. 07:01.080 --> 07:05.010 So now I've given all the big this is great. 07:05.010 --> 07:06.750 Let's make sure it actually works. 07:06.750 --> 07:10.950 So we're going to go to our catalog dot TSX. 07:10.950 --> 07:16.680 What we have currently is a Useeffect that goes and fetches the data. 07:16.680 --> 07:19.570 But we don't need this use effect anymore. 07:19.600 --> 07:22.540 We also don't need the use states anymore. 07:22.570 --> 07:33.310 Either we can remove these and what we're going to use instead is the hook that we created or was created 07:33.310 --> 07:34.600 on our behalf, I should say. 07:34.600 --> 07:37.750 And we're going to use this use fetch products query. 07:37.960 --> 07:43.180 So back in the catalog we're going to say const and open curly brackets. 07:43.180 --> 07:49.690 And then just say equals use fetch products query just like so. 07:49.690 --> 07:53.650 And inside here we can get hold of the data. 07:53.650 --> 07:59.890 And we can see that the data is a type of the product array or undefined. 07:59.920 --> 08:05.230 And the reason it's either the product array or undefined is because this is asynchronous code. 08:05.230 --> 08:07.180 It has to go out and fetch the data. 08:07.180 --> 08:14.800 So for sure the initial value of the products or data is going to be undefined until such point as it's 08:14.800 --> 08:16.570 not undefined of course. 08:16.570 --> 08:17.770 So we'll use data. 08:17.770 --> 08:25.990 But what we can also use inside here is we've also got these is is fetching is loading is success. 08:25.990 --> 08:32.710 And we're going to utilize the is loading to tell us if we're actually loading or going out to get data 08:32.710 --> 08:33.940 from our API. 08:33.970 --> 08:37.420 And then we can use the or use a conditional. 08:37.420 --> 08:43.900 And we can say if is loading before the return statement then we're going to return just for the short 08:43.930 --> 08:46.840 term a div that says loading dot dot dot. 08:47.140 --> 08:51.820 And then for the products we can pass down the data. 08:51.820 --> 08:53.620 And what does this say. 08:53.650 --> 08:56.830 Well it tells us that products is possibly undefined. 08:56.860 --> 09:03.490 So just for the short term I'm just going to specify an Or condition inside or after the loading and 09:03.490 --> 09:10.810 say if is loading or not products or not data, then return the loading div. 09:10.810 --> 09:15.790 And then by the time we get to this return statement, well yes, we do have the data. 09:15.790 --> 09:20.110 And then I can remove the unused imports from inside here to clean this up. 09:20.260 --> 09:21.940 So we've removed a bunch of code. 09:21.940 --> 09:25.310 And what we should have is the functionality that we're looking for. 09:25.340 --> 09:28.700 So let's head over to our application. 09:28.700 --> 09:32.450 And if we click on the application, what we should see is our list of products. 09:32.450 --> 09:38.210 And it might have been quite quick, but there was a tiny bit of loading. 09:38.420 --> 09:43.910 And we do see it on the left there we can see that the div for loading is being displayed. 09:43.940 --> 09:44.810 Marvelous. 09:44.810 --> 09:47.690 Let's take a look at another couple of things before we move forward. 09:47.690 --> 09:55.040 Because if you recall from earlier on when we did check the network tab, we had two requests going 09:55.040 --> 09:55.910 out to the API. 09:55.940 --> 09:58.010 Because of the way the use effect works. 09:58.010 --> 10:00.050 Well, we're not using a use effect anymore. 10:00.050 --> 10:03.140 We're using RTK query for list functionality. 10:03.140 --> 10:08.570 So if I refresh the page now, what we should find if we take a look for the products, then we're only 10:08.570 --> 10:12.410 going to have a single request going to our API to go and get that data. 10:12.410 --> 10:14.360 And that is indeed the case. 10:14.360 --> 10:16.310 We can see that single request. 10:16.310 --> 10:22.220 And if we go and take a look at Redux and let's see what's going on in the Redux world, because RTK 10:22.220 --> 10:25.610 query is using our Redux store. 10:25.610 --> 10:31.230 And if we take a look at the Redux dev tools, then we can see what's going on when we refresh the page. 10:31.230 --> 10:33.540 So let's go ahead and refresh the page. 10:33.540 --> 10:37.170 What we can see is our initial state in our application. 10:37.170 --> 10:39.480 We can see that we've got our catalog API. 10:39.480 --> 10:43.830 And if we take a look inside here, we've got quite a bit of functionality going on. 10:43.830 --> 10:48.120 We can see what queries have been made, mutations provided, subscriptions. 10:48.120 --> 10:52.290 Then we've got some config with various configuration values as well. 10:52.920 --> 10:57.390 It then goes ahead after we've initialized our app and registers the middleware. 10:57.390 --> 11:03.570 And then because we're on our catalog page, then it's going to execute the query to go and fetch products. 11:03.570 --> 11:05.850 And we can see that query inside here. 11:05.850 --> 11:08.550 And it's currently got a status of pending. 11:08.550 --> 11:14.130 And it tells us the endpoint name, the request ID, the started timestamp etc.. 11:14.130 --> 11:19.770 And then once the products have been retrieved, then we get the execute query fulfilled. 11:20.040 --> 11:28.020 And what we see inside our store is that we do have the data inside here of our products, and this 11:28.020 --> 11:29.910 is stored in our global state. 11:29.910 --> 11:35.190 And then we've got another Redux thing for these subscriptions updated inside here. 11:35.190 --> 11:38.550 But this one here where we've got our products fulfilled. 11:38.580 --> 11:41.790 Well that means that we now have our products in the global store. 11:41.790 --> 11:47.160 What that would also mean is if I go to a product, then I see the loading. 11:47.160 --> 11:50.280 If I go back to the catalog, I don't see the loading. 11:50.310 --> 11:54.990 And if I go back to the same products I think was that same product or was that a different one? 11:54.990 --> 11:59.970 In fact, we're not using RTK query for this, so I would expect to see that loading. 11:59.970 --> 12:05.070 But when we go back to the catalog, we don't need to load it because it's already in memory. 12:05.070 --> 12:07.620 It's already in a global state store. 12:07.620 --> 12:14.460 So we have caching now as well enabled for our products without us needing to configure that. 12:14.490 --> 12:22.890 And believe me, caching doing it manually is tedious and can be complex work to especially get it right. 12:22.890 --> 12:24.870 So now we've made our first query. 12:24.900 --> 12:31.620 What we'll take a look at next is take a look at what we're doing for the Use fetch product details.