Okay.
And up next, let's add React query to our application, which is a library that provides a bunch of
features when working with remote data.
Now, in our case, we'll mostly use it to cache our requests.
But in the Readme you will find more benefits, which by the way, you get by default.
So of course once we set up React Query in our app, we'll also immediately have those features.
Now it has quite a few versions and in this project we're going to use version four, which at the time
of the recording is the latest version.
And also since we cannot use hooks in React router loaders.
The setup might seem a little bit clunky, but in my opinion it's well worth it.
Now, if you want to explore the docks, basically, maybe you're looking for more features, just follow
this link and remember that we want to install this library in the client.
So take a look at the package Json in the client, whether you have installed both of the libraries.
If not, then of course navigate there and install.
And before I show you the setup, first, let's take a look at the problem.
Now, when I say problem, what I mean by it is that we can make some improvements to our application.
So if I navigate to the browser and if I inspect my network tab and all that, of course we'll see that
we're making quite a few requests.
But now let's think about it.
So let's say I navigate to all jobs and at the moment these are the values that I have in the search
form.
So essentially I get back 100 jobs, correct?
Now, if I go to stats and if I come back.
Notice how again, we're making pretty much the same request.
But here's the thing.
We already received this data.
And in that short span, let's say one second or so, the data didn't really change on the server.
And this is where React Query comes into play, where effectively we'll have some kind of stale time.
Basically we'll have some kind of time.
How long the query is valid, how long our request is valid, and in our case we're going to go with
five minutes.
But of course you'll be able to change that.
And if.
We make the same request in those five minutes.
Essentially, it's going to be cached and we'll right away get that data.
So as a side note, we'll also have that loading spinner.
So we'll compare.
Hey, listen, do we already have this data?
If yes, well then we don't need to make that request.
And of course, if some of this sounds iffy, once we set up the functionality, you'll see what I'm
talking about.
So for starters, let me navigate to a client, I guess, and let me just make sure that it's over there.
Let me find where is my package Json here.
Let's just double check.
So in this case I only have the React query one.
So let me go here.
Grab this command.
We want to go to a client.
Then let's install both of them.
Then we're going to navigate back to the server and we'll set up some imports.
So CD back over here and now we want to go npm run, not def, we want to go with npm run and then dev.
Okay, good.
I think for now I can close the integrated terminal.
And if you take a look, we're also installing dev tools.
Now, please keep in mind that dev tools are only going to be active while in development, so automatically
they will be removed once we push this up to production.
So we don't really need to do anything.
Now why I want to install dev tools because it's going to be very useful to see what queries are cached.
Now what do we want to import?
Query client and query client provider from React Query.
And then as far as the dev tools is a separate component from separate package.
And you know what?
In order to avoid some typos.
I'm just going to take the stuff from the Readme.
So again, let me close everything.
I'm going to start from scratch.
We're looking for App.js and this is super, super, super important.
And you'll see why once we start setting up the loaders functionality, we want to go, of course,
where we have the imports.
Again, two components query client, query client provider and React query dev tools.
Then we want to set up the client.
And again, location is important because we'll utilize it here in the Create browser router and we're
going to go with const, then query client.
So this is a instance.
Query client is equal to then we want to go with new then query client.
And in here essentially we want to pass in the object and we want to go with default options.
And in this object we want to set up queries and we will go with some kind of stale time.
So essentially we're setting up how long the query is going to be valid.
Again, you can provide different values, but in my case I want to show you with five minutes.
Now, we do need to provide this in milliseconds.
Therefore, I'm going to go with 1000 times 160 and then times five.
Let me save it.
I have my instance, something we're going to use a little bit later.
For now, we want to navigate to app and effectively I want to wrap my entire application in query client
provider and also I want to set up those DevTools.
So how's that going to look like?
For now, let me move the router provider.
Below we're going to go with query client provider.
It's looking for prop called client.
And guess what?
We'll pass in the query client.
Then inside of it we want to set up our router provider and also we're going to go with those dev tools.
So dev tools and essentially it has this prop initial is open and we'll set it equal to false.
Let me close it.
And now let me make sure that the return is correct.
Let's save it.
I'm going to take a look at the console.
There are no issues.
Once we refresh, we should see the button to open up the dev tools again.
Our requests are not going to change at the moment.
Of course we do need to set up the functionality.
But notice over here in the bottom we have the dev tools and once we open of course we have nothing
in the dev tools since we haven't set up any functionality yet.
And again, don't worry, once you push this up to production, React query dev tools are going to be
removed by default and with this in place now we can move on to the next step.