All right.
And up next, let's see why we want to invalidate the queries.
So, yes, it's awesome that we're caching the requests effectively.
We're not overloading the server, but there are some gotchas we need to be aware of.
So for starters, let's navigate back to our project.
And let me actually log in as John.
So let me go over here.
I'm going to provide my.
Email and password.
Let me click on Submit.
Okay.
Everything is awesome.
Now I want to navigate over here and notice how I have information about zip.
Why?
Well, because I still have this user request cached.
So essentially we're not getting the current user.
We still have this user in the cache.
And even if this would be a correct user, let's say I'm going to refresh now, this should be for John.
If I'm going to change it over here to Peter again, nothing is going to happen in my application.
I successfully changed this value.
I can guarantee you that in a database.
But since we're caching this user, well, we are still getting the old data.
Now, in order to fix it, we want to invalidate queries in three places.
So for starters, when we log in.
So essentially, before I even navigate to a dashboard, I want to make sure that all of the queries
are invalidated.
So that includes user and stats and eventually we'll have one for jobs as well.
Then also in the dashboard layout when we log out, I also want to clear out all of the queries.
And lastly in the profile one, when we update the profile before we show the success and all that,
If we're successful, I want to invalidate the user query.
And as a result, of course, we'll display the latest values.
Now everything starts, of course, where well, in the main file, the app.jsx, where we have the
query client.
So now we just need to remember which pages are looking for that.
So we'll start over here with login one.
We have query client.
I believe in a dashboard when we already have access to.
So now I just want to go to profile.
So just like with the loader when it comes to action, we simply want to turn it into a function that
returns a function.
That's it.
That's all we need to do.
So now let's navigate, I guess.
Let's start with login one.
Same deal.
Let's turn it into a function which returns a function.
And in my case, I'm going to go right above the.
Toast.
Let's also access it actually here.
So we're looking for query.
Client and we want to go with the method invalidate queries.
Now, if we don't pass anything in, then we'll invalidate all of the queries, which is exactly what
we're looking for.
In this case.
So we just want to invoke here Invalidate.
And queries and we're not going to provide any arguments.
Then the same deal we want to do in a dashboard.
So dashboard layout when we log out.
So let's navigate to our log out.
And again, I'm going to do it right above the success.
And lastly, let's navigate to profile page, refactor our action function, grab the query client,
and in this case we want to invalidate only user query.
And if everything is correct, we'll navigate back to the dashboard.
So let's start over here with action.
Remember, we want to turn it into a function which returns a function.
Then we want to access the query client.
And in here, like I said.
Essentially I'll change some things around where if we're successful, we'll return a redirect and we'll
navigate to a dashboard.
And when it comes to an error, again, this is totally up to you, but I'm just going to go with return
Null.
Then, like I said, we're going to go with the return redirect.
We want to navigate back to a dashboard page and essentially right after the successful request, if
we were successful, if we were able to update the user info now we want to go with query client and
the method we're looking for is invalidate.
Queries only in this case we do want to pass in the argument and that argument is going to be an array
and we'll pass over here the user.
Why?
Well, because that's the name of my query.
Again, we can double check if we navigate to dashboard layout.
So notice this is the key that I'm providing, and since I don't want to invalidate all of the queries,
that's why we pass in only the user one And with this in place we have successfully cached the user
request as well as invalidated queries.
When we log in, when we log out and when we update the user info.