Okay.
Before we set up our first query with React Query, let me also show you another way how we can handle
errors in the pages.
So yes, we're going back to error handling and effectively this is going to go back to one of the things
I mentioned before where errors are bubbling up.
So here's the deal.
We can actually handle errors on a page level.
So what am I talking about?
Well, for starters, let's go to components and let's create the error element.
Now, this is going to be extremely similar to our error page.
The only difference we're just going to have one heading for, but we'll still log the error in the
same way.
So let's go to components.
I'm going to go with Error Element JS Then let's create our component.
We're looking for the same hook use root error.
So let's navigate up over here.
Or you know what?
I'm just gonna use the auto import, I guess.
So.
Const.
And we're looking for use route and somewhere there we should have error.
Okay.
Awesome.
We definitely want to log it and say, you know what?
It's not going to be errors.
I'm just going to go with error.
And then as far as what we want to display.
Like I said, in this case, it's going to be somewhat simple where we're just going to go with heading
four and we'll just type some message.
So there was an error and then a few dots.
Okay, good.
We're exporting.
I mean, we can set it up here in the index, but we're only going to use it in App.jsx, so it doesn't
really matter.
So what I'm trying to say is we can just keep this export default.
We're good to go.
So once we have this component in place, now let's navigate back to the stats.
So where's my stats page?
Over here.
And then again, let's go over our typical approach.
So pretty much every time we have a loader we set up over here, try and catch.
We make a request and then if there is an error, we do something about it.
Meaning sometimes we navigate to a different page.
Sometimes we display the toast and that type of thing.
But here's the deal.
We can actually skip this part.
I can just set up a code for successful response, and if there is an error, it's going to bubble up.
So you know what?
Actually, I'm just going to take this because I don't want to start everything from scratch.
Okay.
Copy and paste.
Good.
And now let's navigate back to the browser.
Let's just check it out whether everything works again.
I'm going to use my test user and go to stats.
Okay, everything is awesome.
But what happens if let's say I go to a custom fetch and I mess the URL?
Okay, now have something went wrong.
So again, we don't display 404 because this is different type of error, but of course we do see the
error page.
So hopefully that is clear.
So if there's going to be an error, it's going to bubble up to.
Well, let's take a look at the app.jsx.
Remember in here we have the error element for the home layout.
And since that's the parent for all of our pages, that's why we end up over here.
So if there's some kind of error, yes, it will right away trigger this chain of events and eventually
we will end up in some kind of error.
Page Now, the whole point of this video is following where we can actually go to a stats and we can
nicely add over here the error element.
So in a way you can think of it that will just intercept that error.
So again, we go with error element and yes, you can add the same property for all of the pages.
It's totally an option.
So we're going to go here with error element and we can either hard code.
So I'll start by simply hard coding and yep, I'll write the same thing.
There was an error dot, dot dot and of course since we set up the component, you can probably already
guess what we're going to do next.
So check it out.
Now we're actually displaying, Hey, listen, there was some kind of error.
Again, we're not navigating away.
We're not displaying a toast.
We simply.
Set up a code.
What do we want to fetch?
What we want to do.
And if there's going to be an error, bam, then we'll right away display our element and notice how
it nicely fits into our layout so we can add this error element property to our page.
And essentially we can still keep the same layout.
So it's not just going to blow up.
We still have the same structure.
The only difference well in this page there is some kind of error.
Now of course you can make a good argument that if we cannot fetch stats, is there really a point for
that user to sit there?
And you'll definitely be correct.
That's why we're trying different approaches where in some pages, if there's an error, we actually
navigate away.
Hopefully that is clear.
And if I can provide over here an element and heading for, I can probably provide here a component.
So let's go here with error and I'm looking for this component.
Like I said, it's only component here in the app.jsx, so it doesn't really matter whether we add it
to index or no.
And the reason why we want to set up the component, well, we can reuse it in multiple pages, correct.
So again, we navigate back and the result is going to be exactly the same.
Only this time we're using component.
Now this is super useful, especially when we start dealing with the React query because there's a gotcha
that I'll cover later.
Long story short, initially data is undefined.
Again, we'll come back to that topic, so don't worry about it too much.
Now, lastly, in this video I want to mention something important.
Once we know how to set up the error element most likely.
Your next question is following What about actions?
For example, in a login page, what if, let's say instead of setting up this try and catch and instead
of using the hook, the use action data?
What if I just want to show the error?
You can definitely do so.
But please keep in mind that notice how pretty much this is what we display right now if there's an
error.
So what I'm saying is at the moment in the login one or pretty much a lot of times when you have action,
you'll have a form.
So if there's some kind of error, for example, 400, what do you want to do?
Do you want to display a toast?
Do you want to display maybe a paragraph with a text or you just want to remove the form and display
the error?
That's why it's possible.
Yeah, for sure.
If there's an error, it will trigger and you'll display the basically element, whether that's heading
four or maybe you have some other stuff.
But just remember that pretty much is going to break your entire layout.
Just something to keep in mind.
But effectively here and there, once we set up React Query, we'll actually use this error element
approach.
Essentially the property we can add on a page.
So if there's some kind of error, basically we go, Hey, listen, there was an error and we display
some error element on the page.