Okay, now let's take a look at how we can deal with the TypeScript issues we currently have in our
base API query and this response data if we hover over the data.
The reason we're getting the issues here is the data property is unknown.
Of course it's unknown.
How could react query possibly know the format of the responses that we're getting back from our API.
So we need to give this a bit of help to tell it what types we can expect this data property to be in.
And first of all, let's take a look at what we are getting back.
So I'm just going to add in the console.log statement because now we're handling this inside here we're
not returning the error to our components.
We will need to console.log the result error here, just so we can take a look and see what kind of
response we have in that data property, so that we can create a type for this and specify what this
could be.
And then what we'll need to look at is depending on that type is how we handle that response.
And for that we're going to need to use something referred to as type guards.
So we can check the type of something and then take the appropriate action.
But first of all, let's just see what we're getting.
If we take a look at the 401 error, for instance, then inside the data property or this is the 400,
I should say it says this is not a good request.
And this data property is a string.
So that's one type we need to account for.
If we take a look at the validation error then the data property inside here.
Well this is an object and it contains an errors object.
So that's another type that we need to account for.
So we've got a data property in this one that is just a string.
We've got a data property in this one that has an errors object.
And if we take a look at the 401 error then we've got a data property that has a title property.
So we need to accommodate a type that accommodates those three different types that we're getting back
from our response.
So we'll go back to VS code.
And let's inside the base API file.
I'm just going to create a type.
And I'm going to call it error response.
And I'm going to set this equal to.
And I'm going to do this just on a single line.
So I'm not going to open up curly brackets.
We're going to start this with a pipe.
And then we're going to have one type is going to be a string.
Another type is going to be in curly brackets a title that's a type of string.
And we've got another type that's an errors object.
And this is a type of string array.
That's what we get back from our server.
And then we can use this error response where we've got our response data.
We can specify this is as an error response that we've just created above.
And sure we've got the response.
Data is no longer giving us a warning, but it says property title does not exist on error response.
Okay, so that means we've got a bit more work to do here.
So when we use a type guard.
And let's take a look at the case of the 401.
We specify a condition and we can use the type of and we can check the type of the response data.
And if this is equal to an object and the title, the property that we want to use is in response data,
then we can specify the total error and response data.title.
So we're effectively checking to make sure that we have the title before we try and use it.
And then the warning goes away.
Now when it comes to the 400 we've got a couple of different types of response data here.
This could either be an object with errors in or it could just be a simple string.
So again we're going to need to use another type guard here.
So I'm going to say if and say type of response data is equal to string.
Then we can simply use toast dot error and say response data.
And we don't need to specify a string because well we've checked that beforehand.
And below this line we'll add an else if and we're going to check for if there is an errors property
in response data.
And if there is then we'll open curly brackets for this one because we'll need to do a bit of work on
this.
But for the short term we'll just have a toast dot error.
And we won't display the validation errors yet.
But I'm just going to put a string in here saying validation error and we'll add another else just in
case we have a title property and a 400 bad request.
I'll say else toaster error and we'll use response data dot title.
So these are type guards effectively.
We check the type of thing that we're using.
And then we can take an action.
And because a type guard will notify TypeScript of exactly what to expect there.
We don't need to worry about TypeScript warnings now because it can handle this itself.
And what we should find if we go take a look is we should have still the same working functionality
we had before, but we've removed the TypeScript warnings and if I check the 400 error, then we get
the.
This is not a good request.
If I check the 401 error, we get the unauthorized and if we check the validation error, then we just
get the validation error.
A bit more work to do with that one, but this is the aim of what we're doing right now.
So let's just go and add the other cases.
Now that we have this structure in place and below the case with the 401.
I'm going to add a case for oh four.
And the way that we get our 404 back is this is an object that contains a title property.
So I'm just going to use the same approach as the 401, because the format of the 404 is exactly the
same.
So I'm just going to use the same for this one, and then add the break clause below it.
And then we'll add a case for the 500.
And for the time being, because we've got the same kind of format, we'll do something different with
this soon.
I'm just going to copy down the code that we have in the one above, because this has a title property
that we can use just to display this.
And if we go and take a look, we should now have toasts for all occasions.
So let's just go through and make sure that is indeed the case.
And we can see the not found.
And if we take the 500 error we can see that this is a server error.
And of course we've still got the validation error as well.
Perfect.
Now that's what we're looking for right now.
And what we'll take a look at next is what we're going to do for the validation errors and how we're
going to display those inside our component.