All right.
And once we're familiar how we can pass the query client down to a loader, let's also cache our current
user request.
Remember, since it's sitting in a dashboard layout, pretty much every time we're navigating around
our dashboard, we make that request.
So this is a good use case where we can cache this request.
Now, I can tell you right away that with this request, we actually want to invalidate it in few cases.
So please wait for the next video.
There is a bug that we'll need to fix.
So essentially in this video I just want to set up the request and I'm fully aware that there's going
to be one bug which we're going to work on in the following video.
For starters, we want to set up the user query.
Basically, I just want to set up the object again.
I'm going to call this user.
The functionality is going to be exactly the same again.
I'm looking for my data and then I want to right away pass in the query client in the loader.
And this is the case where remember in the dashboard we're actually accessing the user in the component.
So not only we want to pass it into a loader, but also in the component.
And I guess, you know what?
Let's start from that.
So I'm just going to navigate to app.
JS I'm looking for my dashboard.
So for starters, I can just pass here this query client That's going to be my prop.
Then we want to invoke this one also passing the query client.
And now let's quickly navigate back to the dashboard since at the moment we have a bug and basically
where we have the loader.
We want to turn it into a function which returns a function.
Let me just add here the proper syntax.
And once we have this functionality in place.
Let's again set up this user query with a query key.
With a query function.
And basically this function again is going to return our data.
So let's go to Dashboard layout.
Let's set up the user query.
So user.
Query.
That's going to be my object.
In the object I have query key.
I'll set it equal to my user.
And then also I want to have the query function.
And essentially, we can just set up here a sink.
Then as far as the function body, I think I'm just going to grab this.
Now, I will still place this in a try and catch though in the loader since if we get some kind of error,
I want to redirect back to the dashboard.
So that is not going to change basically the landing page.
My apologies.
I believe I said dashboard.
So let's go back right now to a loader.
We're looking for the query client, so that won't change.
And then in the try and catch, we can also just directly return the query client.
The only reason why I wasn't doing that in the stats page, I just wanted to demonstrate that of course
we are not relying on this data over here, so let's go here with the return.
Await then same method query client, then ensure.
Query.
And then theta, and then here we want to pass in the user query.
And of course I want to access the user.
Not from the loader, but actually I want to grab the query client and then remember we need to use
use query.
So hopefully my auto imports work.
So use query and then we'll pass in the user query.
And more specifically, the user is located in the data.
So let me save, let me navigate back to my browser.
If everything is correct, not only I'm going to have the stats one, but I'll also have the user one.
So as I'm navigating around my project, actually we won't trigger that request again.
Let me close this one.
Let's inspect and we'll see that essentially we make that request, we grab the current user.
But as I'm navigating around my project now, only the jobs request is the one that we keep making.
The current user and stats are both cached and therefore we get the results immediately.