WEBVTT 00:00.020 --> 00:04.610 Okay when it comes to react query, what we have here is caching. 00:04.610 --> 00:10.490 So when I go back to my catalog, as long as I haven't refreshed my page, I should go back and get 00:10.490 --> 00:12.770 the items instantly. 00:12.770 --> 00:16.280 And if I go back to the baskets, I don't see any loading. 00:16.280 --> 00:22.280 I just instantly get the items in the basket and if I go back to catalog, no loading caching. 00:22.280 --> 00:22.910 It's brilliant. 00:22.910 --> 00:27.320 It makes our application seem really responsive and really fast. 00:27.320 --> 00:33.170 Where caching becomes annoying is when we add something where we've made a change to our state, we 00:33.170 --> 00:36.650 go back to our cart and then we don't see it inside here. 00:36.650 --> 00:41.450 So what we really need to do here, and there's a few techniques to deal with this. 00:41.450 --> 00:47.000 And I'm going to demonstrate the simple one first of all, and we'll need to do this at various points 00:47.000 --> 00:48.080 in our application. 00:48.110 --> 00:52.010 So please don't think I'm only going to demonstrate one way of doing this. 00:52.010 --> 00:57.080 But for this circumstance what I'm going to demonstrate is invalidating the cache. 00:57.080 --> 01:04.010 So we know when we make a change to our basket that we don't want to retrieve the basket from cache 01:04.010 --> 01:06.780 the next time we need to go and get it. 01:07.140 --> 01:09.450 And that's what we'll aim to achieve here. 01:09.450 --> 01:14.580 So when I do go back to the catalogue and I add something else and then I go back to the shopping cart, 01:14.610 --> 01:22.920 effectively we will see loading after we've taken this action, because we have invalidated this cache. 01:22.920 --> 01:29.610 And the basket component will go out or react query will go out back to the API and it will get the 01:29.610 --> 01:31.350 updated basket. 01:31.440 --> 01:34.140 Still not ideal and we can do better. 01:34.140 --> 01:36.570 But I just want to show a simple example first of all. 01:36.570 --> 01:41.640 And then we'll look at other options as we build our application performance optimization. 01:41.760 --> 01:42.960 Well it's kind of performance. 01:43.140 --> 01:46.140 Well caching is definitely performance optimization. 01:46.140 --> 01:48.210 But we don't need to do everything straight away. 01:48.210 --> 01:53.430 And I'm just going to make sure we've got the functionality and then we can come back and make improvements 01:53.430 --> 01:53.850 later. 01:53.850 --> 02:00.540 But I want to show you the simple option first, because when it comes to mutating states and then mutating 02:00.540 --> 02:02.970 it inside our store, slightly more tricky. 02:03.000 --> 02:07.200 Not impossible, of course, but I want to show you the simple option first. 02:07.200 --> 02:14.770 So let's go back to our code and we're going to head over to our basket API on the client. 02:14.770 --> 02:19.210 And what we have here is our ad basket item method. 02:19.240 --> 02:21.130 Now this is the one that we're using at the moment. 02:21.130 --> 02:22.720 So I'll just focus on this. 02:22.720 --> 02:30.940 And the goal of this is when we make this query then we need to tell react query that that cache is 02:30.940 --> 02:33.550 now invalidated for this query. 02:33.550 --> 02:38.200 So the way that we achieve that is with a tag system inside our create API. 02:38.230 --> 02:44.200 First of all, at the top level, just below the base query we're going to specify tag types. 02:44.200 --> 02:45.760 And this is for TypeScript. 02:45.760 --> 02:50.170 So inside square brackets we're going to specify a tag type of basket. 02:50.170 --> 02:57.910 This is what is available now in this code for this create API. 02:58.210 --> 03:06.610 And then after our query inside the fetch basket method we'll add a comma and we'll say that this query 03:06.610 --> 03:07.810 provides tags. 03:07.810 --> 03:11.230 And inside here we can specify our basket. 03:11.230 --> 03:17.630 So the next step is after we've added an item to our baskets is to invalidate anything that's using 03:17.630 --> 03:24.800 this tag, this basket tag, and the way that we approach that, let's add a comma after the query in 03:24.800 --> 03:26.630 the add basket item. 03:26.630 --> 03:30.500 And we're going to use the add query started method. 03:31.790 --> 03:33.500 And I didn't want to use that version. 03:33.500 --> 03:39.080 So I'm just going to remove and repeat that again and use this version that doesn't populate anything. 03:39.080 --> 03:41.810 And this is going to be an async method. 03:41.810 --> 03:44.120 And we'll open parentheses. 03:44.150 --> 03:46.910 Now this on query started takes two arguments here. 03:46.910 --> 03:51.110 It takes an argument for parameters which we don't need to pass. 03:51.110 --> 03:59.840 And in the second argument then this gives us access to our store feature or one of the store features 03:59.840 --> 04:01.340 which is dispatch. 04:01.340 --> 04:04.040 So we'll specify dispatch inside here. 04:04.040 --> 04:07.490 And also we need to specify query fulfilled. 04:08.600 --> 04:13.010 And then we'll add the arrow and open curly brackets. 04:13.190 --> 04:16.370 So inside here we'll add a try catch block. 04:16.370 --> 04:22.380 And inside the try block we will say await query fulfilled and execute this function. 04:22.380 --> 04:24.660 And we don't need to execute this. 04:24.690 --> 04:26.940 We just close it off with a semicolon. 04:26.940 --> 04:32.040 And then we can use the dispatch because we're going to update our store. 04:32.280 --> 04:39.690 So what we're going to dispatch is we're going to dispatch a the baskets API. 04:39.690 --> 04:42.360 And then we're going to use the util. 04:42.360 --> 04:46.410 And then there's a method inside here where we can invalidate tax. 04:46.410 --> 04:51.150 And we're going to specify in square brackets in quotes baskets. 04:51.450 --> 04:56.070 And we will just console dot log any error we get from here. 04:56.790 --> 05:03.060 And the only reason I've put this in a try catch block is we use the await with the query fulfilled. 05:03.060 --> 05:08.340 Because this does return a promise to us. 05:08.700 --> 05:10.500 So we have to await this. 05:10.500 --> 05:15.390 And then once that has completed we can then dispatch this. 05:15.420 --> 05:17.940 So that's how we invalidate the cache. 05:17.940 --> 05:23.700 We provide it with some tag types so that we can easily use this type inside our code here. 05:23.770 --> 05:28.660 We then provide a tag for the query that is being cached. 05:28.660 --> 05:29.830 That's our fetch basket. 05:29.830 --> 05:31.480 This is the one that's being cached. 05:31.480 --> 05:37.870 And when we want to invalidate that cache, then we need to dispatch an action using a utility called 05:37.870 --> 05:42.370 invalidate tags on the basket API and specify which tag it is. 05:42.370 --> 05:44.830 We wish to invalidate what this means. 05:44.830 --> 05:49.300 If we go back to our browser, I'll just re. 05:49.330 --> 05:50.530 Well, let's go back to the catalog. 05:50.560 --> 05:54.850 First of all, I'll just refresh the page and let's pick a different product to add. 05:54.850 --> 05:59.410 I'll, I'll pick this react board and add to carts. 05:59.440 --> 06:06.010 If I go to the shopping cart, we'll see the loading and we see the new item added inside there. 06:06.010 --> 06:08.890 So let's go and pick a different product from the catalog. 06:08.890 --> 06:10.420 No loading going on there. 06:10.450 --> 06:15.190 Let's pick some boots down here and add these to the cart. 06:15.940 --> 06:18.430 Again we see the loading as we're being added. 06:18.430 --> 06:24.400 And if I go back to the shopping cart, we see the loading and we see the correct item being added there. 06:24.430 --> 06:30.200 Not perfect because we've lost our ability to cache when we add something to our basket and we have 06:30.200 --> 06:31.820 to go out to the API to get it. 06:31.850 --> 06:36.620 I'm sure you're thinking, can't we just add something to the basket so that we get it directly from 06:36.620 --> 06:39.950 the store, rather than going out to our API again? 06:39.980 --> 06:44.600 Sure we can, and we'll do that a bit later, but for now, I just wanted to demonstrate the simplest 06:44.600 --> 06:50.030 approach to get the correct working functionality of invalidating the cache, even though that does 06:50.030 --> 06:51.680 mean us going out to the API. 06:51.710 --> 06:54.800 So we're focusing on functionality first. 06:54.830 --> 06:57.410 We'll take a look at optimizations later. 06:57.410 --> 07:00.260 So now we've got a number of products in our carts. 07:00.260 --> 07:03.860 And one thing I didn't check actually was to make sure that the quantity goes up. 07:03.860 --> 07:06.920 So let's just pick on the. 07:06.920 --> 07:10.160 Net core Superbad's go back to our catalog. 07:10.280 --> 07:14.570 And this one here will add this one to the cart. 07:14.570 --> 07:19.160 And if we go to our shopping cart again we should see that the quantity has increased there. 07:19.160 --> 07:19.610 That's fine. 07:19.610 --> 07:23.000 We don't have any other functionality inside here yet, so that's no problem. 07:23.030 --> 07:28.760 So now we've got a number of items in our shopping carts or baskets, but it doesn't match what we see 07:28.790 --> 07:29.900 at the top here. 07:29.930 --> 07:34.160 So next we're going to take a look at affecting that in our application.