WEBVTT 00:00.350 --> 00:06.290 Okay, now let's take a look at how we can deal with the TypeScript issues we currently have in our 00:06.320 --> 00:11.390 base API query and this response data if we hover over the data. 00:11.420 --> 00:15.620 The reason we're getting the issues here is the data property is unknown. 00:15.650 --> 00:16.790 Of course it's unknown. 00:16.790 --> 00:23.000 How could react query possibly know the format of the responses that we're getting back from our API. 00:23.030 --> 00:30.380 So we need to give this a bit of help to tell it what types we can expect this data property to be in. 00:30.410 --> 00:33.200 And first of all, let's take a look at what we are getting back. 00:33.200 --> 00:38.360 So I'm just going to add in the console.log statement because now we're handling this inside here we're 00:38.360 --> 00:41.090 not returning the error to our components. 00:41.090 --> 00:47.090 We will need to console.log the result error here, just so we can take a look and see what kind of 00:47.090 --> 00:52.490 response we have in that data property, so that we can create a type for this and specify what this 00:52.490 --> 00:53.150 could be. 00:53.150 --> 00:58.070 And then what we'll need to look at is depending on that type is how we handle that response. 00:58.070 --> 01:01.970 And for that we're going to need to use something referred to as type guards. 01:01.970 --> 01:06.440 So we can check the type of something and then take the appropriate action. 01:06.860 --> 01:09.100 But first of all, let's just see what we're getting. 01:09.100 --> 01:15.910 If we take a look at the 401 error, for instance, then inside the data property or this is the 400, 01:15.940 --> 01:18.430 I should say it says this is not a good request. 01:18.430 --> 01:20.800 And this data property is a string. 01:20.800 --> 01:23.290 So that's one type we need to account for. 01:23.440 --> 01:28.270 If we take a look at the validation error then the data property inside here. 01:28.270 --> 01:31.930 Well this is an object and it contains an errors object. 01:31.930 --> 01:34.960 So that's another type that we need to account for. 01:34.990 --> 01:40.450 So we've got a data property in this one that is just a string. 01:40.450 --> 01:43.900 We've got a data property in this one that has an errors object. 01:43.900 --> 01:51.790 And if we take a look at the 401 error then we've got a data property that has a title property. 01:51.790 --> 01:57.790 So we need to accommodate a type that accommodates those three different types that we're getting back 01:57.790 --> 01:58.600 from our response. 01:58.600 --> 01:59.950 So we'll go back to VS code. 01:59.950 --> 02:03.790 And let's inside the base API file. 02:03.790 --> 02:05.920 I'm just going to create a type. 02:06.010 --> 02:08.530 And I'm going to call it error response. 02:08.530 --> 02:10.390 And I'm going to set this equal to. 02:10.420 --> 02:12.490 And I'm going to do this just on a single line. 02:12.490 --> 02:14.080 So I'm not going to open up curly brackets. 02:14.080 --> 02:15.660 We're going to start this with a pipe. 02:15.990 --> 02:19.410 And then we're going to have one type is going to be a string. 02:19.410 --> 02:24.390 Another type is going to be in curly brackets a title that's a type of string. 02:24.390 --> 02:28.050 And we've got another type that's an errors object. 02:28.050 --> 02:30.990 And this is a type of string array. 02:30.990 --> 02:32.880 That's what we get back from our server. 02:32.880 --> 02:37.290 And then we can use this error response where we've got our response data. 02:37.290 --> 02:42.300 We can specify this is as an error response that we've just created above. 02:42.330 --> 02:44.820 And sure we've got the response. 02:44.820 --> 02:51.480 Data is no longer giving us a warning, but it says property title does not exist on error response. 02:52.140 --> 02:55.560 Okay, so that means we've got a bit more work to do here. 02:55.590 --> 02:57.720 So when we use a type guard. 02:57.720 --> 03:00.570 And let's take a look at the case of the 401. 03:00.750 --> 03:08.070 We specify a condition and we can use the type of and we can check the type of the response data. 03:08.100 --> 03:19.380 And if this is equal to an object and the title, the property that we want to use is in response data, 03:19.410 --> 03:24.850 then we can specify the total error and response data.title. 03:25.150 --> 03:29.740 So we're effectively checking to make sure that we have the title before we try and use it. 03:29.740 --> 03:31.540 And then the warning goes away. 03:31.570 --> 03:36.340 Now when it comes to the 400 we've got a couple of different types of response data here. 03:36.340 --> 03:41.020 This could either be an object with errors in or it could just be a simple string. 03:41.020 --> 03:43.630 So again we're going to need to use another type guard here. 03:43.630 --> 03:50.770 So I'm going to say if and say type of response data is equal to string. 03:51.040 --> 03:57.550 Then we can simply use toast dot error and say response data. 03:57.550 --> 04:01.840 And we don't need to specify a string because well we've checked that beforehand. 04:01.840 --> 04:11.290 And below this line we'll add an else if and we're going to check for if there is an errors property 04:11.290 --> 04:14.890 in response data. 04:14.890 --> 04:20.320 And if there is then we'll open curly brackets for this one because we'll need to do a bit of work on 04:20.320 --> 04:20.530 this. 04:20.530 --> 04:24.190 But for the short term we'll just have a toast dot error. 04:24.190 --> 04:26.890 And we won't display the validation errors yet. 04:26.890 --> 04:34.590 But I'm just going to put a string in here saying validation error and we'll add another else just in 04:34.590 --> 04:39.240 case we have a title property and a 400 bad request. 04:39.450 --> 04:46.290 I'll say else toaster error and we'll use response data dot title. 04:46.530 --> 04:48.240 So these are type guards effectively. 04:48.270 --> 04:50.220 We check the type of thing that we're using. 04:50.220 --> 04:51.870 And then we can take an action. 04:51.870 --> 04:57.480 And because a type guard will notify TypeScript of exactly what to expect there. 04:57.480 --> 05:02.130 We don't need to worry about TypeScript warnings now because it can handle this itself. 05:02.130 --> 05:08.460 And what we should find if we go take a look is we should have still the same working functionality 05:08.490 --> 05:13.650 we had before, but we've removed the TypeScript warnings and if I check the 400 error, then we get 05:13.650 --> 05:13.830 the. 05:13.860 --> 05:15.090 This is not a good request. 05:15.090 --> 05:21.120 If I check the 401 error, we get the unauthorized and if we check the validation error, then we just 05:21.120 --> 05:22.350 get the validation error. 05:22.380 --> 05:27.180 A bit more work to do with that one, but this is the aim of what we're doing right now. 05:27.180 --> 05:29.460 So let's just go and add the other cases. 05:29.460 --> 05:34.760 Now that we have this structure in place and below the case with the 401. 05:34.760 --> 05:37.880 I'm going to add a case for oh four. 05:37.880 --> 05:44.750 And the way that we get our 404 back is this is an object that contains a title property. 05:44.780 --> 05:52.910 So I'm just going to use the same approach as the 401, because the format of the 404 is exactly the 05:52.910 --> 05:53.210 same. 05:53.210 --> 05:58.190 So I'm just going to use the same for this one, and then add the break clause below it. 05:58.190 --> 06:01.880 And then we'll add a case for the 500. 06:01.880 --> 06:06.080 And for the time being, because we've got the same kind of format, we'll do something different with 06:06.080 --> 06:06.590 this soon. 06:06.590 --> 06:12.020 I'm just going to copy down the code that we have in the one above, because this has a title property 06:12.020 --> 06:14.300 that we can use just to display this. 06:14.300 --> 06:19.250 And if we go and take a look, we should now have toasts for all occasions. 06:19.250 --> 06:23.210 So let's just go through and make sure that is indeed the case. 06:23.570 --> 06:24.980 And we can see the not found. 06:24.980 --> 06:28.100 And if we take the 500 error we can see that this is a server error. 06:28.100 --> 06:31.340 And of course we've still got the validation error as well. 06:31.370 --> 06:32.000 Perfect. 06:32.030 --> 06:34.250 Now that's what we're looking for right now. 06:34.250 --> 06:38.780 And what we'll take a look at next is what we're going to do for the validation errors and how we're 06:38.780 --> 06:41.420 going to display those inside our component.