Okay.
What we're going to take a look at now is we're going to create some fetchrequest, basically, so that
we can call these different endpoints from our client and test the error responses on the client.
And then we'll be able to take a look at how we handle each different type of error response we get
back from our server.
So back to VS code then.
And this is the output in the logs.
Nothing to be worried about here by the way.
That's just from the server error that we're testing before.
And that's what we'd expect to see inside our logs as well.
Just the this is a server error.
Anyway, let's get on with creating the code in the client side.
So no longer in Solution Explorer.
Back to the File Explorer view of our code and inside the client folder.
And another one of these features that we're not really going to have, such as an about page.
I'm just going to use the about feature to demonstrate error handling in our application.
So I'm just going to right click and say new file and say error API dot RTS inside here.
And we'll make use of RTK query again to do this.
So I'm going to say export const And call it error API and equals create API, which we get from Redux
Toolkit.
Please make sure you select the one with react, because this is the one that helps us generate the
react hooks that we need to use in our react components.
So please make sure you've got the correct imports inside here.
And then we open up parentheses curly brackets.
And then we can specify the reducer path.
And I'm just going to specify error API there.
We'll also have the base query.
And we'll make use of the custom base query that we created called base query with error handling.
And we'll specify endpoints and then pass in builder as an argument.
Add the arrow and then open parentheses curly brackets.
And we can define our different fetch requests that we want inside here.
So I'm going to have a get 400 error.
We specify builder and then query.
And this doesn't return anything to us as in a product or something like that.
It's just going to return an error response.
So for the first argument for the type here it's going to be void.
And same for the second argument there as well because we're not sending up any arguments with this.
Inside here we can specify the query and we'll open parentheses at the arrow and inside parentheses
curly brackets.
We're going to specify the URL.
And this is going to be buggy forward slash bad dash request.
So that's our first one.
And slightly dangerous because it's easy to make mistakes with this kind of approach.
But I'm just going to copy this down four more times or three more times now four more times.
And we're just going to make adjustments inside here.
So all we need to change here is the name of the request.
This is going to be a get 401 error.
And instead of going to bad request I'm going to go to the unauthorized with a Z endpoint.
The next one will be a 404 error.
And this is going to go to the endpoint with not Found.
And we'll have a get 404 error.
And we'll have a get 500 error.
And this is going to go to buggy forward slash server error.
And then we'll have a validation error for the final one.
And this is going to go to instead of badrequest validation error.
So plenty of opportunity to make typos here.
So if you do run into any problems then obviously do come back and double check your work.
Make sure there's no typos in the endpoints.
If you're not getting what you expect to see.
When we're in a position to actually test this, wherever you're using strings, please make it one
of your first troubleshooting steps to check for typos.
It's very easy to make mistakes, and it's very simple to solve, of course.
And then we're going to export const.
I'll open up curly brackets and I'll say equals error API.
Now specifically what we want to get from this.
The hooks we wish to use, we want the fetch to go on after the user has clicked on a button.
So we'll say use, but we want to use the lazy versions of each one of these requests or each one of
these hooks.
So I'm going to have the use lazy get 400, use lazy get 401.
Use lazy get 500.
Use lazy.
Get 404 and use lazy.
Get validation error query as we don't want these to execute when our component loads of course.
So now we've got a new error API.
Using the create API, we need to update our store so that we can use this functionality.
So I'm going to open up the store TS.
And inside here we're going to below the catalog API.
I'm going to specify the error API and say reducer path and add a colon and say error API, dot reducer
and a comma.
And we also need to concat onto this the error API middleware as well.
So I'll pass in error API dot middleware.
So great.
That's our Redux side of this setup for using RTK query.
And what we'll do next is we'll use our about page component so that we've got some buttons to click
on in our user interface.
That's going to call those different endpoints, so that we can see what we get back from our server.
And we'll take a look at that next.