WEBVTT 00:00.380 --> 00:00.740 Okay. 00:00.740 --> 00:05.300 What we're going to take a look at now is we're going to create some fetchrequest, basically, so that 00:05.300 --> 00:10.250 we can call these different endpoints from our client and test the error responses on the client. 00:10.250 --> 00:15.050 And then we'll be able to take a look at how we handle each different type of error response we get 00:15.050 --> 00:16.640 back from our server. 00:16.640 --> 00:18.500 So back to VS code then. 00:18.500 --> 00:20.000 And this is the output in the logs. 00:20.000 --> 00:21.650 Nothing to be worried about here by the way. 00:21.650 --> 00:24.980 That's just from the server error that we're testing before. 00:25.010 --> 00:28.940 And that's what we'd expect to see inside our logs as well. 00:28.940 --> 00:30.710 Just the this is a server error. 00:30.740 --> 00:34.610 Anyway, let's get on with creating the code in the client side. 00:34.610 --> 00:37.130 So no longer in Solution Explorer. 00:37.160 --> 00:42.350 Back to the File Explorer view of our code and inside the client folder. 00:42.350 --> 00:48.680 And another one of these features that we're not really going to have, such as an about page. 00:48.680 --> 00:55.340 I'm just going to use the about feature to demonstrate error handling in our application. 00:55.340 --> 01:02.600 So I'm just going to right click and say new file and say error API dot RTS inside here. 01:02.600 --> 01:06.980 And we'll make use of RTK query again to do this. 01:06.980 --> 01:17.150 So I'm going to say export const And call it error API and equals create API, which we get from Redux 01:17.150 --> 01:17.630 Toolkit. 01:17.630 --> 01:22.340 Please make sure you select the one with react, because this is the one that helps us generate the 01:22.340 --> 01:27.050 react hooks that we need to use in our react components. 01:27.050 --> 01:30.590 So please make sure you've got the correct imports inside here. 01:30.590 --> 01:33.080 And then we open up parentheses curly brackets. 01:33.080 --> 01:35.990 And then we can specify the reducer path. 01:36.110 --> 01:38.900 And I'm just going to specify error API there. 01:38.990 --> 01:41.150 We'll also have the base query. 01:41.150 --> 01:47.180 And we'll make use of the custom base query that we created called base query with error handling. 01:47.180 --> 01:52.340 And we'll specify endpoints and then pass in builder as an argument. 01:53.030 --> 01:56.450 Add the arrow and then open parentheses curly brackets. 01:56.450 --> 02:00.470 And we can define our different fetch requests that we want inside here. 02:00.470 --> 02:03.350 So I'm going to have a get 400 error. 02:03.380 --> 02:06.620 We specify builder and then query. 02:06.620 --> 02:11.420 And this doesn't return anything to us as in a product or something like that. 02:11.420 --> 02:13.190 It's just going to return an error response. 02:13.190 --> 02:16.160 So for the first argument for the type here it's going to be void. 02:16.160 --> 02:21.510 And same for the second argument there as well because we're not sending up any arguments with this. 02:21.540 --> 02:29.040 Inside here we can specify the query and we'll open parentheses at the arrow and inside parentheses 02:29.070 --> 02:29.910 curly brackets. 02:29.910 --> 02:31.710 We're going to specify the URL. 02:31.740 --> 02:37.170 And this is going to be buggy forward slash bad dash request. 02:37.200 --> 02:38.640 So that's our first one. 02:38.640 --> 02:43.680 And slightly dangerous because it's easy to make mistakes with this kind of approach. 02:43.680 --> 02:49.920 But I'm just going to copy this down four more times or three more times now four more times. 02:50.430 --> 02:53.220 And we're just going to make adjustments inside here. 02:53.220 --> 02:56.610 So all we need to change here is the name of the request. 02:56.610 --> 02:58.530 This is going to be a get 401 error. 02:58.530 --> 03:07.650 And instead of going to bad request I'm going to go to the unauthorized with a Z endpoint. 03:07.680 --> 03:11.250 The next one will be a 404 error. 03:11.250 --> 03:15.180 And this is going to go to the endpoint with not Found. 03:15.180 --> 03:18.570 And we'll have a get 404 error. 03:18.570 --> 03:21.750 And we'll have a get 500 error. 03:22.320 --> 03:26.910 And this is going to go to buggy forward slash server error. 03:26.940 --> 03:32.010 And then we'll have a validation error for the final one. 03:32.010 --> 03:38.310 And this is going to go to instead of badrequest validation error. 03:38.340 --> 03:40.950 So plenty of opportunity to make typos here. 03:40.950 --> 03:46.530 So if you do run into any problems then obviously do come back and double check your work. 03:46.530 --> 03:48.690 Make sure there's no typos in the endpoints. 03:48.690 --> 03:50.730 If you're not getting what you expect to see. 03:50.760 --> 03:55.740 When we're in a position to actually test this, wherever you're using strings, please make it one 03:55.740 --> 03:59.100 of your first troubleshooting steps to check for typos. 03:59.100 --> 04:03.870 It's very easy to make mistakes, and it's very simple to solve, of course. 04:03.870 --> 04:06.450 And then we're going to export const. 04:06.450 --> 04:10.350 I'll open up curly brackets and I'll say equals error API. 04:10.380 --> 04:13.560 Now specifically what we want to get from this. 04:13.560 --> 04:19.980 The hooks we wish to use, we want the fetch to go on after the user has clicked on a button. 04:19.980 --> 04:26.310 So we'll say use, but we want to use the lazy versions of each one of these requests or each one of 04:26.310 --> 04:27.360 these hooks. 04:27.540 --> 04:32.910 So I'm going to have the use lazy get 400, use lazy get 401. 04:32.940 --> 04:37.000 Use lazy get 500. 04:37.120 --> 04:38.320 Use lazy. 04:38.350 --> 04:40.930 Get 404 and use lazy. 04:40.960 --> 04:49.030 Get validation error query as we don't want these to execute when our component loads of course. 04:49.030 --> 04:52.900 So now we've got a new error API. 04:52.930 --> 04:57.970 Using the create API, we need to update our store so that we can use this functionality. 04:57.970 --> 05:00.430 So I'm going to open up the store TS. 05:00.490 --> 05:04.150 And inside here we're going to below the catalog API. 05:04.150 --> 05:13.210 I'm going to specify the error API and say reducer path and add a colon and say error API, dot reducer 05:13.870 --> 05:15.130 and a comma. 05:15.130 --> 05:21.970 And we also need to concat onto this the error API middleware as well. 05:21.970 --> 05:25.510 So I'll pass in error API dot middleware. 05:25.870 --> 05:26.530 So great. 05:26.530 --> 05:32.230 That's our Redux side of this setup for using RTK query. 05:32.230 --> 05:38.770 And what we'll do next is we'll use our about page component so that we've got some buttons to click 05:38.770 --> 05:40.240 on in our user interface. 05:40.240 --> 05:43.960 That's going to call those different endpoints, so that we can see what we get back from our server. 05:43.960 --> 05:46.090 And we'll take a look at that next.