WEBVTT 00:00.000 --> 00:00.240 Okay. 00:00.270 --> 00:02.190 Now let's take a look at the validation error. 00:02.190 --> 00:08.250 And if we just double check the format of what we get back from react query for this, what we've got 00:08.280 --> 00:10.590 is a data object an errors object. 00:10.590 --> 00:12.000 And then we've got our problem objects. 00:12.000 --> 00:19.320 What I'd really like to happen here is I'd just like these strings formatted as a simple array, so 00:19.320 --> 00:24.450 that we can return that to our component and let our component handle the validation errors, because 00:24.450 --> 00:27.000 that will be unique to the component on each occasion. 00:27.000 --> 00:31.920 So validation errors is something that we will need to handle on a component by component basis. 00:31.920 --> 00:37.710 But what I would like to do is ensure that we just send back a simple array of the different problem 00:37.710 --> 00:38.700 messages. 00:39.180 --> 00:41.010 So that's what we'll aim for in this. 00:41.010 --> 00:44.130 And let's go back to the base API query. 00:44.130 --> 00:50.070 And let's take a look at what we're doing for this part of the code where we've got our else if statement. 00:50.070 --> 00:53.550 And we have that errors object in response data. 00:53.580 --> 00:59.400 Now instead of a test for this one we will throw the error back to the component. 00:59.670 --> 01:03.240 And so that we can get the values from the objects. 01:03.240 --> 01:06.000 We can use the object values method. 01:06.000 --> 01:09.270 So I'm going to say objects dot values. 01:09.270 --> 01:13.350 And then I can pass in response data dot errors. 01:13.800 --> 01:19.500 And we want to flatten this array and make sure it's a single array. 01:19.530 --> 01:21.990 So we can use the flat function. 01:21.990 --> 01:24.240 And then we can use the join function. 01:24.240 --> 01:27.960 And in quotes we can specify comma space. 01:27.960 --> 01:34.620 And if we go and take a look at the effect of that because in our about page, let's just go back and 01:34.620 --> 01:37.380 make sure we're doing what I think we're doing inside here. 01:37.380 --> 01:40.470 When we trigger the validation error, we're catching the error. 01:40.470 --> 01:47.430 And we're logging out to the console now because we're throwing the error from the base API, then we 01:47.430 --> 01:53.490 should be able to catch this now inside here and see the outputs in our console. 01:53.490 --> 01:54.690 So let's go take a look. 01:54.720 --> 02:00.450 And if I click on Test Validation error then what we get is the error message. 02:00.450 --> 02:07.880 Sick and not quite what I'm looking for there, actually, because this is coming from page bundle and 02:07.880 --> 02:10.220 it's not actually coming from our component. 02:10.220 --> 02:14.240 So that's not quite the desired result we're looking for here. 02:14.240 --> 02:20.840 But we need to do something extra when it comes to RTK query in handling this type of response. 02:20.840 --> 02:26.120 So I'll just go back to the component and where we've got the trigger validation error. 02:26.150 --> 02:32.960 Then we can use unwrap inside here which will effectively give us the response rather than this page 02:32.960 --> 02:34.550 bundle thing that we saw just there. 02:34.550 --> 02:40.430 And if I go back and I test the validation error again, this time we get a better response. 02:40.430 --> 02:41.870 We can see the message. 02:41.870 --> 02:43.730 And this is the first error. 02:43.760 --> 02:45.140 This is the second error. 02:45.410 --> 02:50.360 So it's still not quite the format we're looking for because now we've just got a string with our two 02:50.390 --> 02:52.040 messages concatenated together. 02:52.040 --> 02:57.380 But what I really want is an array that we can loop over in our component so that we can display the 02:57.380 --> 02:58.430 errors more easily. 02:58.430 --> 03:00.410 So we've got a bit more work to do. 03:00.420 --> 03:02.610 So let's go back to our component here. 03:02.610 --> 03:05.310 And I'm going to create a helper function. 03:05.580 --> 03:09.360 And I'll say const get validation error. 03:09.360 --> 03:13.110 And I'll also combine this with the trigger function as well. 03:13.110 --> 03:17.370 So I'll make it async and add the opening parentheses. 03:17.400 --> 03:23.970 Add the arrow open curly brackets and then we'll use a try catch block inside here. 03:23.970 --> 03:29.460 And inside the try we'll specify await and then trigger Validation error. 03:29.460 --> 03:33.840 And we'll use the unwrap function on this as well. 03:33.840 --> 03:35.940 And then we catch our error. 03:35.940 --> 03:41.130 And I'll just use any filler short term and say console.log. 03:41.160 --> 03:48.630 And then instead of using the catch functionality in here for the onclick we'll just say get validation 03:48.630 --> 03:52.050 error to execute and call the function. 03:52.050 --> 03:54.510 And this doesn't really do anything great for us at the moment. 03:54.510 --> 03:59.190 If I just refresh the page and test the validation error, then we're back to where we were before, 03:59.190 --> 04:02.150 but now we've just extracted it into its own function. 04:02.150 --> 04:04.340 So how do we get this into an array then? 04:04.370 --> 04:05.660 Well, let's go take a look. 04:05.660 --> 04:09.500 So I'll just do this inside here for the time being. 04:09.530 --> 04:14.840 And I'll say const error array equals. 04:14.840 --> 04:19.550 And we need to use error.message dot split. 04:19.730 --> 04:22.580 And then open quotes add comma space. 04:22.580 --> 04:26.150 And that should give us the array of messages. 04:26.150 --> 04:27.950 So I'll specify error array. 04:27.980 --> 04:34.490 And if we go back and take a look at the console again and click the test validation error. 04:34.520 --> 04:37.160 Then this time we've got what we're looking for. 04:37.190 --> 04:39.920 We've got the array of error messages. 04:39.920 --> 04:43.370 And that's something that we'll be able to loop over. 04:43.370 --> 04:47.450 But we've got TypeScript warnings and we don't want any warnings in our code. 04:47.450 --> 04:53.960 And sure, we could go to our configuration and allow ourselves to use the any type without TypeScript 04:53.960 --> 04:55.670 spitting out a warning about this. 04:55.670 --> 04:58.520 But I don't want to do that in a training course. 04:58.550 --> 05:04.290 And even if it is a tiny bit awkward to give this the correct type, then that's what I'll endeavour 05:04.290 --> 05:06.900 to do so we can use unknown instead. 05:06.900 --> 05:13.710 We don't get a warning when we use unknown, but what we do get is an error or a warning telling us 05:13.710 --> 05:19.350 that error is type of type, unknown and unknown doesn't have a message property. 05:19.350 --> 05:25.740 So we could once again use a type guard for this to make sure there is a property and then use that 05:25.770 --> 05:26.820 on here. 05:26.820 --> 05:28.950 But we're going to see some complications here. 05:28.950 --> 05:31.680 So this one's going to get a tiny bit complex. 05:31.770 --> 05:34.800 So we're going to see if we've got an error first of all. 05:35.340 --> 05:41.910 And we're going to check to make sure that the type of is equal to object. 05:41.910 --> 05:47.040 And there's a message property in error. 05:47.040 --> 05:50.550 And because we've got a const here we're going to need to open up curly brackets. 05:50.550 --> 05:57.840 And I'll put our const and our console.log inside the curly brackets there. 05:57.840 --> 05:59.580 But we've still got another problem here. 05:59.580 --> 06:05.870 And it tells us that error message is of type unknown or the message is of type unknown. 06:05.870 --> 06:09.260 So we also need to specify the type for the message as well. 06:09.260 --> 06:13.370 And this is where unfortunately it gets a little bit more complicated. 06:13.370 --> 06:19.190 So after the in error we'll need to also check the message. 06:19.610 --> 06:27.620 And we'll specify a double ampersand and type of and in parentheses we'll check the error as. 06:27.650 --> 06:34.670 And then we need to specify message colon and unknown because that's what it is. 06:34.670 --> 06:38.840 And then we can specify after the parentheses we can access the message. 06:38.840 --> 06:42.470 And we can say that this is equal to a string. 06:42.770 --> 06:50.390 And then in order to make the TypeScript warning to go away, we'll need to put the error itself inside 06:50.390 --> 06:59.180 parentheses and say error as an in curly brackets message colon string. 06:59.190 --> 07:03.870 And then we can use the message split without any TypeScript warnings. 07:03.870 --> 07:10.230 Now, I appreciate this is horrendously complex for what feels like very simple functionality, but 07:10.230 --> 07:16.500 what we're really doing here is we're using type guards to narrow down what it is we're working with, 07:16.530 --> 07:20.100 so that TypeScript can understand this and take away the warnings. 07:20.100 --> 07:22.770 And if we take a look, I'll just move this down. 07:23.250 --> 07:27.330 And if we take a look at what we're really doing here, we're checking to make sure we've got an error. 07:27.360 --> 07:27.720 Great. 07:27.720 --> 07:28.590 We have. 07:28.620 --> 07:35.250 Then we're making sure that the type of error is an object, and there's a message property inside the 07:35.250 --> 07:36.510 error object. 07:36.870 --> 07:38.880 And then we're checking that message property. 07:38.880 --> 07:42.690 So if the type of error and then we use the as keyword. 07:42.690 --> 07:48.600 And the message is unknown at this point because that is what it is, then we're effectively setting 07:48.600 --> 07:51.060 the message to be equal a type of string. 07:51.060 --> 07:56.640 Once we have the message as a type of string, which is what it is, if we hover over this, then we 07:56.640 --> 08:04.280 can use a string function of split which allows us to split this string and effectively convert it into 08:04.280 --> 08:04.910 an array. 08:04.910 --> 08:08.630 And then once we have that, we can use the console log array. 08:08.660 --> 08:16.610 So TypeScript and probably this is why it sometimes gets a bit of a bad reputation is sometimes it can 08:16.610 --> 08:23.360 be a bit complex to use type guards and narrow down what it is that TypeScript is working with at that 08:23.360 --> 08:23.720 point. 08:23.720 --> 08:29.510 It's particularly tricky when it comes to error handling, because we do not know, or TypeScript has 08:29.510 --> 08:34.190 no way of knowing what the type is that's going to be coming back from an API server. 08:34.190 --> 08:39.470 So we end up doing all of this type checking before we can get to the point where we can actually use 08:39.470 --> 08:40.070 it. 08:40.070 --> 08:44.540 So the goal of this was really to convert this into an array, which we now have. 08:44.570 --> 08:50.960 And inside this component, because typically we would use validation messages inside the component 08:50.960 --> 08:51.890 itself. 08:51.890 --> 08:59.530 So we'll use local states and I'll specify const in square brackets I'll have validation errors As the 08:59.530 --> 09:09.370 property and sets validation errors as the function and say equals use states, and we'll give it an 09:09.370 --> 09:14.290 initial value of an empty array, and we'll give it a type of string array. 09:14.290 --> 09:22.750 And then inside our get validation error method, instead of the console dot log, we can set the validation 09:22.750 --> 09:26.620 errors and set it to the error array that we've created. 09:27.100 --> 09:29.380 And we shouldn't see any errors there. 09:29.800 --> 09:33.430 And then we can go ahead and use our validation errors. 09:33.430 --> 09:40.450 So down in our component just underneath the button group let's use the validation errors. 09:40.450 --> 09:44.050 And we're going to check to make sure it's length is greater than zero. 09:44.050 --> 09:49.690 Because we're initializing this with an empty array at the double ampersand open parentheses. 09:49.690 --> 09:53.860 And then we're going to use an alert that we get from Mui material. 09:54.280 --> 09:59.600 We'll give it a severity of error because we're displaying validation errors. 09:59.630 --> 10:08.360 We'll give it an alert title, and we'll just specify validation errors as the alert title. 10:08.480 --> 10:13.100 And then we'll use a list that we get from UI material. 10:13.100 --> 10:17.330 And inside the list we're going to loop over our validation errors. 10:17.360 --> 10:19.910 So we'll say validation errors dot map. 10:19.910 --> 10:21.860 We'll have the error which is just a string. 10:21.860 --> 10:22.880 At this point. 10:22.910 --> 10:27.410 Use the arrow open parentheses and then we'll have a list item. 10:27.410 --> 10:32.300 And we'll give it a key equal to error. 10:32.330 --> 10:38.870 And we'll specify inside the list item we'll use the error. 10:39.140 --> 10:45.650 And what we should have now is when we do have a validation error then this should be displayed inside 10:45.650 --> 10:46.700 our component. 10:46.760 --> 10:52.220 When it comes to using this again I'll move out this functionality into its own helper function. 10:52.220 --> 10:53.660 So we don't use this every time. 10:53.660 --> 10:57.320 We've got a simpler way of using it, but I won't do that just yet. 10:57.350 --> 10:58.760 I'll come back to that later. 10:58.840 --> 11:03.850 So when we use something for the second time and it's a bit of a chunky bit of code, then that's a 11:03.850 --> 11:05.950 good opportunity to move it into a helper function. 11:05.950 --> 11:06.970 But I won't do that right now. 11:07.000 --> 11:09.160 We'll just make sure we've got the functionality working. 11:09.190 --> 11:14.290 So inside here let's just refresh the page, make sure there's no actual errors from what we've done. 11:14.320 --> 11:20.770 And if I click on the test validation error button what we should get is our validation errors displayed 11:20.770 --> 11:23.830 inside the component where we're using them. 11:23.860 --> 11:28.660 So that's the complex one or the more complex one out of the way. 11:28.660 --> 11:34.180 And it's not complex in the case of what we've done here, it's the TypeScript stuff that makes this 11:34.210 --> 11:38.050 more complex than you would possibly think it was going to be. 11:38.050 --> 11:42.850 But anyway, that's done now, and we can come back to this and use this in any component we wish to. 11:42.850 --> 11:48.820 And we'll create a helper function for some of the boilerplate type code that we've created a bit later 11:48.820 --> 11:49.240 on. 11:49.240 --> 11:56.380 What we'll take a look at next is adding a component so that we can display server side errors in our 11:56.380 --> 11:59.560 client browser, and we'll take a look at that next.