Okay when it comes to react query, what we have here is caching.
So when I go back to my catalog, as long as I haven't refreshed my page, I should go back and get
the items instantly.
And if I go back to the baskets, I don't see any loading.
I just instantly get the items in the basket and if I go back to catalog, no loading caching.
It's brilliant.
It makes our application seem really responsive and really fast.
Where caching becomes annoying is when we add something where we've made a change to our state, we
go back to our cart and then we don't see it inside here.
So what we really need to do here, and there's a few techniques to deal with this.
And I'm going to demonstrate the simple one first of all, and we'll need to do this at various points
in our application.
So please don't think I'm only going to demonstrate one way of doing this.
But for this circumstance what I'm going to demonstrate is invalidating the cache.
So we know when we make a change to our basket that we don't want to retrieve the basket from cache
the next time we need to go and get it.
And that's what we'll aim to achieve here.
So when I do go back to the catalogue and I add something else and then I go back to the shopping cart,
effectively we will see loading after we've taken this action, because we have invalidated this cache.
And the basket component will go out or react query will go out back to the API and it will get the
updated basket.
Still not ideal and we can do better.
But I just want to show a simple example first of all.
And then we'll look at other options as we build our application performance optimization.
Well it's kind of performance.
Well caching is definitely performance optimization.
But we don't need to do everything straight away.
And I'm just going to make sure we've got the functionality and then we can come back and make improvements
later.
But I want to show you the simple option first, because when it comes to mutating states and then mutating
it inside our store, slightly more tricky.
Not impossible, of course, but I want to show you the simple option first.
So let's go back to our code and we're going to head over to our basket API on the client.
And what we have here is our ad basket item method.
Now this is the one that we're using at the moment.
So I'll just focus on this.
And the goal of this is when we make this query then we need to tell react query that that cache is
now invalidated for this query.
So the way that we achieve that is with a tag system inside our create API.
First of all, at the top level, just below the base query we're going to specify tag types.
And this is for TypeScript.
So inside square brackets we're going to specify a tag type of basket.
This is what is available now in this code for this create API.
And then after our query inside the fetch basket method we'll add a comma and we'll say that this query
provides tags.
And inside here we can specify our basket.
So the next step is after we've added an item to our baskets is to invalidate anything that's using
this tag, this basket tag, and the way that we approach that, let's add a comma after the query in
the add basket item.
And we're going to use the add query started method.
And I didn't want to use that version.
So I'm just going to remove and repeat that again and use this version that doesn't populate anything.
And this is going to be an async method.
And we'll open parentheses.
Now this on query started takes two arguments here.
It takes an argument for parameters which we don't need to pass.
And in the second argument then this gives us access to our store feature or one of the store features
which is dispatch.
So we'll specify dispatch inside here.
And also we need to specify query fulfilled.
And then we'll add the arrow and open curly brackets.
So inside here we'll add a try catch block.
And inside the try block we will say await query fulfilled and execute this function.
And we don't need to execute this.
We just close it off with a semicolon.
And then we can use the dispatch because we're going to update our store.
So what we're going to dispatch is we're going to dispatch a the baskets API.
And then we're going to use the util.
And then there's a method inside here where we can invalidate tax.
And we're going to specify in square brackets in quotes baskets.
And we will just console dot log any error we get from here.
And the only reason I've put this in a try catch block is we use the await with the query fulfilled.
Because this does return a promise to us.
So we have to await this.
And then once that has completed we can then dispatch this.
So that's how we invalidate the cache.
We provide it with some tag types so that we can easily use this type inside our code here.
We then provide a tag for the query that is being cached.
That's our fetch basket.
This is the one that's being cached.
And when we want to invalidate that cache, then we need to dispatch an action using a utility called
invalidate tags on the basket API and specify which tag it is.
We wish to invalidate what this means.
If we go back to our browser, I'll just re.
Well, let's go back to the catalog.
First of all, I'll just refresh the page and let's pick a different product to add.
I'll, I'll pick this react board and add to carts.
If I go to the shopping cart, we'll see the loading and we see the new item added inside there.
So let's go and pick a different product from the catalog.
No loading going on there.
Let's pick some boots down here and add these to the cart.
Again we see the loading as we're being added.
And if I go back to the shopping cart, we see the loading and we see the correct item being added there.
Not perfect because we've lost our ability to cache when we add something to our basket and we have
to go out to the API to get it.
I'm sure you're thinking, can't we just add something to the basket so that we get it directly from
the store, rather than going out to our API again?
Sure we can, and we'll do that a bit later, but for now, I just wanted to demonstrate the simplest
approach to get the correct working functionality of invalidating the cache, even though that does
mean us going out to the API.
So we're focusing on functionality first.
We'll take a look at optimizations later.
So now we've got a number of products in our carts.
And one thing I didn't check actually was to make sure that the quantity goes up.
So let's just pick on the.
Net core Superbad's go back to our catalog.
And this one here will add this one to the cart.
And if we go to our shopping cart again we should see that the quantity has increased there.
That's fine.
We don't have any other functionality inside here yet, so that's no problem.
So now we've got a number of items in our shopping carts or baskets, but it doesn't match what we see
at the top here.
So next we're going to take a look at affecting that in our application.