All right.
And once we know how we can add error element to pretty much any page, now let's set up our first query.
And again, please, let's focus on the main task.
We want to cache our requests.
So if we navigated to a stats page, we made a request.
We want to cache it for five minutes, one minute, whatever, whatever value you set up in App.jsx,
that is irrelevant.
I just don't want to keep making those requests pretty much every time I navigate to the page.
Now, for starters, we will need a hook and the hook name is use query and guess what?
It's coming from React Query.
Now I do want to fix this since we are.
Familiar how the element property works.
Then let's go with.
Your query.
I said it's coming from React Query.
And for now we'll just set up here in the component.
And yes, eventually we'll also do that in the loader.
And actually, just so you see that everything works, here's what I want to do from the loader.
I will return null so we won't invoke this functionality.
Please keep that in mind.
So we're not prefetching we're not doing this before the page loads.
Essentially we'll do it the old fashioned way in React component.
Now of course, since we're returning a null, this is also not going to make sense.
Now as far as these returns, well, they will also break.
Correct.
So therefore, let's just go with some hardcoded value.
And of course, eventually we'll have functionality which takes care of these values as well.
So if I navigate back right now again, I'm going to go with explore app stats.
I should only see the heading one.
So again, we go back to the component.
We want to set up some kind of variable.
In my case, it's going to be response.
We want to set it equal to use query.
So that's the hook.
And inside of it, we want to pass in the object.
Now, inside of the object, there's going to be two properties.
First one is going to be query key.
So essentially think of this as some kind of identifier, because later on we'll also invalidate some
queries because, well, let's say if we have cached the jobs request.
If I add a job, I kind of want to invalidate, otherwise I'll always get back those cached results.
And if this again sounds iffy, don't worry, we'll cover that a little bit later on.
So in my case I'm going to go with stats and yes, the syntax is following.
Essentially we go here with the array syntax.
So we go here with the square brackets and then we provide string values because later when we set up
that jobs query, remember we have a form and in the form we have potential values for job status,
jobs type and all that.
And of course we do want to add them over here.
Otherwise, well, our functionality is not going to work.
Again, something we're going to cover later, just for now, keep that in mind.
Yes.
Essentially we'll have this syntax.
Then we want to go with query function.
And when it comes to query function, we want to return a promise.
As a side note, I messed up over here, so this is not a query function.
This is a query key.
My apologies.
So the property you're looking for is query key, and this is the query function again property, which
is looking for the promise.
Now where we can get our promise.
Well, remember, if we go with custom fetch and get and then provide the URL, we will get back a promise.
That's what Axios returns.
So let's set up our function.
I'm going to go with my arrow one.
Then custom fetch.
And you know what?
I think I can just utilize this one over here.
So I'll just copy and paste.
Set it up over here.
Good.
I have my function now.
It's complaining right now that there's some kind of syntax bug.
Of course, since I don't have the value.
So.
You know what?
Let me add it here.
Just so we don't have any bugs.
And now let's just log this response and what's super important, take a look at the first value.
So let me navigate back to my browser.
Let me take a look at the console.
You know what?
I'll clean everything.
Let's refresh and notice we have this initial value.
So if we take a look at this response, we get this giant object with a bunch of properties and we'll
use some of them.
We'll focus on his error.
So this one essentially is false initially.
But if there's an error, yes, it's going to be true.
Same goes for is loading.
Initially, it's true, but then it's going to be actually false.
And then lastly, our data is located over here.
Now, check it out.
Initially, this is undefined why it's so important.
Well, because remember, we have this functionality where we're basically pulling out the default stats
and monthly applications and JavaScript will complain if we'll try to do this.
With undefined and therefore when it comes to react query, we need to be more careful, I should say.
So then let's navigate back to our console.
And now let's take a look at our last log.
And as a side note, the reason why we have so many logs is because we have the strict mode enabled.
And you know what?
I'll actually disable it right now.
So in order to do that, we want to navigate to main JS.
Notice the strict mode.
I'll just set it up as a react fragment.
That's one of those things with React strict mode.
Essentially during development, it just provides a bunch of logs and this is the case where I don't
want it.
So let me navigate back over here and I'm going to restart everything.
Again, I'm going to go with my test user.
Let's take a look at the stats.
And now I only have two logs.
So this is the initial value and this is what we get back.
Again, if everything is correct, we should have our data over here.
So we have data and notice.
So this is going to be our Axios response.
Correct?
And this is that funny thing where React Query uses data, then Axios uses data and then we have our
default stats.
So in the following video, we will refactor our code a little bit, basically our query function.
But for now, yes, it's going to be data dot data and then we have this default stats and monthly applications.
So now let's see how typically we would set up the query request.
Again, I'm saying typically because our setup is going to be different, we have a loader and that
changes things.
So this would be just typical kind of react component setup where we have use query and yes, we're
not using any use effect, none of that stuff.
We just use React query and essentially we need to set up this object and pretty much we're good to
go.
Now, of course we want to handle two things we want to handle when we're loading, which is of course,
initially, and then also if there is an error, again, we will remove this code in the following videos
because we will use the loader.
But I do want to make sure we are all on the same page.
So in here, since I know that there's going to be that giant object, well we can nicely destructure
correct.
So I can say is loading then I can also look for is error and I can also look for my data.
So now let me remove this.
And let's set up some temporary conditions.
I'll say if it's loading, what do I want to do?
Well, let me just return over here.
A heading for.
And I'll go loading.
Loading.
Dot, dot, dot.
Now, if there is.
An error.
What do I want to do?
Well, pretty much the same thing I'll say is error.
And now I want to work with the data again in order to access this data.
I want to do it after is loading or is error.
Otherwise, if you'll try to structure the default stats and monthly applications out of the data when
it's undefined, you will have a big fat error.
So in here, essentially we're looking for the same thing default stats, then monthly applications.
And that is equal to what?
Well, remember, it's data dot and then data again.
Please keep in mind we want to do this over here and then once we have access to it, well, now, of
course I can actually set up my proper return.
Right?
So now let's navigate back and notice a few interesting things in the browser and settled.
For some reason I kept this as loading.
It should be an error.
So we navigate back.
Let me start from scratch over here.
Let me actually refresh and you'll notice something pretty interesting.
Now, of course, everything is going to happen fast, and therefore, I'm going to tell you what's
going to happen and then we'll take a look at it together.
So essentially, there's going to be no loading spinner like we have in all jobs.
Why?
Well, because we're not prefetching anymore.
Again, we're not making that request.
So that's the first thing.
Then second, the first time we navigate to stats, we'll see that loading for split second and then
we'll get our stats.
Now with React query, we'll cache this result.
So when we come back to the same page, within those next five minutes, actually data is going to be
there instantly.
And you can clearly see that if you take a look at the network requests.
So let's take a look.
Notice stats and at the moment it complains that there was an error.
Let me see.
I have in the console.
Let me scroll up.
Says reading data cannot read properties of undefined.
As a side note, this is what I was talking about.
So essentially, if we're trying to get data out of undefined, it's not going to work.
Now, the reason for that is because I forgot the returns over here.
My bad.
But yes, effectively this is the error.
You'll see if you'll try to access both of them right before.
So again, let me refresh, you know what, actually, let me refresh and start from the different page
and same deal.
Now let's navigate to stats.
Notice this little loading.
So essentially we made a request to the stats page.
Correct.
But now check it out.
I go to all jobs, I navigate back and there is no request.
So that's the first thing.
And second, notice how data gets there instantly.
Why?
Again, because we have cached it with React query.
So now if I take a look at the devtools, check it out.
This is the query which currently is fresh.
What it means is that it's valid and then in five minutes or whatever time you set up, it's not going
to be valid anymore.
And then of course, once the user navigates to the stats page, we will make another request to get
the latest data.
And with this in place, we have successfully made our first request with React Query.