1 00:00:00,050 --> 00:00:00,410 All right. 2 00:00:00,410 --> 00:00:04,660 And up next, let's see why we want to invalidate the queries. 3 00:00:04,670 --> 00:00:09,200 So, yes, it's awesome that we're caching the requests effectively. 4 00:00:09,200 --> 00:00:15,040 We're not overloading the server, but there are some gotchas we need to be aware of. 5 00:00:15,050 --> 00:00:19,010 So for starters, let's navigate back to our project. 6 00:00:20,040 --> 00:00:22,220 And let me actually log in as John. 7 00:00:22,230 --> 00:00:24,000 So let me go over here. 8 00:00:24,480 --> 00:00:25,980 I'm going to provide my. 9 00:00:27,100 --> 00:00:28,150 Email and password. 10 00:00:28,920 --> 00:00:30,390 Let me click on Submit. 11 00:00:30,420 --> 00:00:30,970 Okay. 12 00:00:30,990 --> 00:00:32,140 Everything is awesome. 13 00:00:32,159 --> 00:00:38,910 Now I want to navigate over here and notice how I have information about zip. 14 00:00:39,180 --> 00:00:40,020 Why? 15 00:00:40,050 --> 00:00:45,840 Well, because I still have this user request cached. 16 00:00:45,990 --> 00:00:48,960 So essentially we're not getting the current user. 17 00:00:48,990 --> 00:00:51,360 We still have this user in the cache. 18 00:00:51,660 --> 00:00:59,100 And even if this would be a correct user, let's say I'm going to refresh now, this should be for John. 19 00:00:59,280 --> 00:01:04,849 If I'm going to change it over here to Peter again, nothing is going to happen in my application. 20 00:01:04,860 --> 00:01:07,260 I successfully changed this value. 21 00:01:07,260 --> 00:01:09,740 I can guarantee you that in a database. 22 00:01:09,750 --> 00:01:16,380 But since we're caching this user, well, we are still getting the old data. 23 00:01:16,410 --> 00:01:22,740 Now, in order to fix it, we want to invalidate queries in three places. 24 00:01:22,740 --> 00:01:25,260 So for starters, when we log in. 25 00:01:25,930 --> 00:01:31,930 So essentially, before I even navigate to a dashboard, I want to make sure that all of the queries 26 00:01:31,960 --> 00:01:33,450 are invalidated. 27 00:01:33,460 --> 00:01:38,890 So that includes user and stats and eventually we'll have one for jobs as well. 28 00:01:39,220 --> 00:01:46,150 Then also in the dashboard layout when we log out, I also want to clear out all of the queries. 29 00:01:46,150 --> 00:01:54,550 And lastly in the profile one, when we update the profile before we show the success and all that, 30 00:01:54,550 --> 00:01:59,650 If we're successful, I want to invalidate the user query. 31 00:01:59,800 --> 00:02:03,370 And as a result, of course, we'll display the latest values. 32 00:02:03,400 --> 00:02:11,860 Now everything starts, of course, where well, in the main file, the app.jsx, where we have the 33 00:02:11,860 --> 00:02:13,000 query client. 34 00:02:13,000 --> 00:02:17,440 So now we just need to remember which pages are looking for that. 35 00:02:18,090 --> 00:02:20,540 So we'll start over here with login one. 36 00:02:20,550 --> 00:02:21,990 We have query client. 37 00:02:22,020 --> 00:02:25,130 I believe in a dashboard when we already have access to. 38 00:02:25,140 --> 00:02:27,480 So now I just want to go to profile. 39 00:02:28,090 --> 00:02:35,920 So just like with the loader when it comes to action, we simply want to turn it into a function that 40 00:02:35,920 --> 00:02:37,030 returns a function. 41 00:02:37,030 --> 00:02:37,750 That's it. 42 00:02:37,930 --> 00:02:39,220 That's all we need to do. 43 00:02:39,250 --> 00:02:41,230 So now let's navigate, I guess. 44 00:02:41,260 --> 00:02:42,970 Let's start with login one. 45 00:02:43,830 --> 00:02:44,970 Same deal. 46 00:02:45,120 --> 00:02:48,780 Let's turn it into a function which returns a function. 47 00:02:48,780 --> 00:02:51,900 And in my case, I'm going to go right above the. 48 00:02:52,680 --> 00:02:53,410 Toast. 49 00:02:53,610 --> 00:02:55,740 Let's also access it actually here. 50 00:02:55,740 --> 00:02:58,350 So we're looking for query. 51 00:02:59,140 --> 00:03:03,580 Client and we want to go with the method invalidate queries. 52 00:03:03,610 --> 00:03:11,110 Now, if we don't pass anything in, then we'll invalidate all of the queries, which is exactly what 53 00:03:11,110 --> 00:03:11,830 we're looking for. 54 00:03:11,860 --> 00:03:12,760 In this case. 55 00:03:13,090 --> 00:03:15,550 So we just want to invoke here Invalidate. 56 00:03:16,590 --> 00:03:21,240 And queries and we're not going to provide any arguments. 57 00:03:21,330 --> 00:03:24,210 Then the same deal we want to do in a dashboard. 58 00:03:24,210 --> 00:03:27,330 So dashboard layout when we log out. 59 00:03:28,770 --> 00:03:31,650 So let's navigate to our log out. 60 00:03:32,220 --> 00:03:36,120 And again, I'm going to do it right above the success. 61 00:03:37,340 --> 00:03:44,600 And lastly, let's navigate to profile page, refactor our action function, grab the query client, 62 00:03:44,600 --> 00:03:48,560 and in this case we want to invalidate only user query. 63 00:03:48,800 --> 00:03:52,900 And if everything is correct, we'll navigate back to the dashboard. 64 00:03:52,910 --> 00:03:55,130 So let's start over here with action. 65 00:03:55,280 --> 00:04:00,320 Remember, we want to turn it into a function which returns a function. 66 00:04:00,890 --> 00:04:03,560 Then we want to access the query client. 67 00:04:04,910 --> 00:04:07,010 And in here, like I said. 68 00:04:08,140 --> 00:04:14,920 Essentially I'll change some things around where if we're successful, we'll return a redirect and we'll 69 00:04:14,920 --> 00:04:16,829 navigate to a dashboard. 70 00:04:16,839 --> 00:04:22,990 And when it comes to an error, again, this is totally up to you, but I'm just going to go with return 71 00:04:22,990 --> 00:04:23,590 Null. 72 00:04:23,740 --> 00:04:27,760 Then, like I said, we're going to go with the return redirect. 73 00:04:27,940 --> 00:04:35,650 We want to navigate back to a dashboard page and essentially right after the successful request, if 74 00:04:35,650 --> 00:04:43,810 we were successful, if we were able to update the user info now we want to go with query client and 75 00:04:43,810 --> 00:04:46,870 the method we're looking for is invalidate. 76 00:04:48,000 --> 00:04:55,710 Queries only in this case we do want to pass in the argument and that argument is going to be an array 77 00:04:56,070 --> 00:04:57,990 and we'll pass over here the user. 78 00:04:57,990 --> 00:04:58,410 Why? 79 00:04:58,410 --> 00:05:00,530 Well, because that's the name of my query. 80 00:05:00,540 --> 00:05:04,950 Again, we can double check if we navigate to dashboard layout. 81 00:05:04,950 --> 00:05:11,160 So notice this is the key that I'm providing, and since I don't want to invalidate all of the queries, 82 00:05:11,160 --> 00:05:19,200 that's why we pass in only the user one And with this in place we have successfully cached the user 83 00:05:19,200 --> 00:05:22,680 request as well as invalidated queries. 84 00:05:22,680 --> 00:05:29,040 When we log in, when we log out and when we update the user info.