1 00:00:03,000 --> 00:00:05,694 We modified the SignInPage to use 2 00:00:05,694 --> 00:00:10,104 a React Query mutation when calling the API to log in. 3 00:00:10,686 --> 00:00:13,461 And this works fine, except for one thing. 4 00:00:13,961 --> 00:00:15,219 If we're signed out, 5 00:00:15,219 --> 00:00:17,169 and we need to reload the page, 6 00:00:17,169 --> 00:00:20,188 Incidentally, this other quirk with the Sign Out 7 00:00:20,188 --> 00:00:23,397 is a separate issue, but is actually quite similar. 8 00:00:24,085 --> 00:00:27,038 Anyway, what we want to tackle in this video 9 00:00:27,038 --> 00:00:28,514 is that if we sign in, 10 00:00:29,082 --> 00:00:30,920 we're sent to the HomePage, 11 00:00:30,920 --> 00:00:34,461 but the NavBar still thinks we're not authenticated. 12 00:00:35,030 --> 00:00:37,620 This is despite the logs showing that 13 00:00:37,620 --> 00:00:40,140 the login request clearly succeeded, 14 00:00:40,710 --> 00:00:43,368 and in fact it returned the "user" details. 15 00:00:43,868 --> 00:00:46,323 So, as I mentioned in the previous video, 16 00:00:46,323 --> 00:00:47,520 this happens because 17 00:00:48,079 --> 00:00:50,217 when we fetch the "user" data 18 00:00:50,217 --> 00:00:53,755 we use a query with a "staleTime" of 30 seconds. 19 00:00:54,329 --> 00:00:56,487 So when we first load the page 20 00:00:56,487 --> 00:00:58,502 and we're not authenticated, 21 00:00:58,502 --> 00:01:00,444 "user" will be "undefined", 22 00:01:00,444 --> 00:01:02,603 and that value will be cached. 23 00:01:03,319 --> 00:01:05,110 Even if we sign in later, 24 00:01:05,110 --> 00:01:08,263 the NavBar will keep using the cached value, 25 00:01:08,835 --> 00:01:12,613 until that data expires, or we reload the page. 26 00:01:13,113 --> 00:01:16,456 To fix this problem we basically need a way 27 00:01:16,456 --> 00:01:19,489 to update the "user" value in the cache 28 00:01:19,489 --> 00:01:20,811 after we sign in. 29 00:01:21,467 --> 00:01:24,960 We can manipulate the React Query cache directly 30 00:01:24,960 --> 00:01:26,926 by using the "queryClient", 31 00:01:27,499 --> 00:01:30,232 that we can access from any component 32 00:01:30,232 --> 00:01:33,040 by calling this "useQueryClient" hook. 33 00:01:33,614 --> 00:01:36,305 So this hook returns the "queryClient", 34 00:01:36,305 --> 00:01:38,789 that by the way is the same instance 35 00:01:38,789 --> 00:01:41,480 we created in our custom App component. 36 00:01:42,118 --> 00:01:44,817 Anyway, now that we have this "queryClient" 37 00:01:44,817 --> 00:01:47,704 we can use it after we get the login response. 38 00:01:48,284 --> 00:01:50,553 To update the cache we can call 39 00:01:50,553 --> 00:01:52,456 the "setQueryData" method. 40 00:01:53,030 --> 00:01:55,186 Here we need to pass the query key, 41 00:01:55,686 --> 00:01:59,058 that in this case should be exactly the same string 42 00:01:59,058 --> 00:02:01,503 that we used when calling "useQuery", 43 00:02:02,069 --> 00:02:04,519 because we want to update the value 44 00:02:04,519 --> 00:02:07,248 that we first fetched using that query. 45 00:02:07,817 --> 00:02:09,900 Then we can pass the new value, 46 00:02:09,900 --> 00:02:12,722 that in this case can be the "user" object 47 00:02:12,722 --> 00:02:14,603 returned by the API request. 48 00:02:15,237 --> 00:02:18,249 Note that we can put this "user" value 49 00:02:18,249 --> 00:02:19,993 into the cache because 50 00:02:19,993 --> 00:02:22,291 the "login" API route returns 51 00:02:22,291 --> 00:02:25,779 the same kind of object as the "user" route. 52 00:02:26,516 --> 00:02:29,062 Now let's save, and go and test it, 53 00:02:29,062 --> 00:02:30,589 by signing out first. 54 00:02:31,782 --> 00:02:33,287 And then signing in again, 55 00:02:33,287 --> 00:02:34,618 with the usual details. 56 00:02:35,315 --> 00:02:37,837 But I also want to show you what happens 57 00:02:37,837 --> 00:02:39,665 in terms of network requests. 58 00:02:40,228 --> 00:02:41,399 Let's clear them all, 59 00:02:41,399 --> 00:02:43,518 so we can easily see any new requests. 60 00:02:44,073 --> 00:02:45,444 Ok. If we sign in now, 61 00:02:45,944 --> 00:02:48,558 first of all we can see that this time 62 00:02:48,558 --> 00:02:51,859 the NavBar is immediately showing the new state. 63 00:02:52,427 --> 00:02:54,740 We are signed in, so it's displaying 64 00:02:54,740 --> 00:02:57,309 the user name and the "Sign Out" button. 65 00:02:57,873 --> 00:02:59,881 Now, looking at the network requests 66 00:03:00,381 --> 00:03:03,106 it made a "login" request, which is obvious 67 00:03:03,106 --> 00:03:06,402 because that's what happens when we click "Sign In". 68 00:03:06,966 --> 00:03:09,228 But the interesting thing is that 69 00:03:09,228 --> 00:03:11,559 it didn't make any "user" request, 70 00:03:11,559 --> 00:03:14,849 and yet the NavBar is showing the new user data. 71 00:03:15,487 --> 00:03:18,482 If we look at the console we can see that 72 00:03:18,482 --> 00:03:20,893 "user" was initially "undefined", 73 00:03:20,893 --> 00:03:23,377 until we signed in, at which point 74 00:03:23,377 --> 00:03:25,276 the NavBar was re-rendered 75 00:03:25,276 --> 00:03:27,541 with the "user" data for Alice, 76 00:03:27,541 --> 00:03:31,121 because that's what we got from the "login" route 77 00:03:31,121 --> 00:03:34,481 and we manually put that value into the cache. 78 00:03:35,420 --> 00:03:37,125 If we navigate to a new page, 79 00:03:38,286 --> 00:03:39,889 you can see that again 80 00:03:39,889 --> 00:03:43,461 the NavBar was rendered with "Alice" as the user, 81 00:03:44,034 --> 00:03:47,042 so that's the value returned by "useQuery". 82 00:03:47,542 --> 00:03:50,277 But if we if we go back to the network tab 83 00:03:50,277 --> 00:03:52,427 it still didn't make any requests 84 00:03:52,427 --> 00:03:53,729 to the "user" route, 85 00:03:54,360 --> 00:03:57,369 because it's still getting the data from the cache. 86 00:03:58,793 --> 00:04:02,263 So by writing the value directly into the cache 87 00:04:02,263 --> 00:04:03,444 after we sign in 88 00:04:03,444 --> 00:04:05,364 not only we make sure that 89 00:04:05,364 --> 00:04:07,727 the data is updated immediately, 90 00:04:07,727 --> 00:04:09,499 and the new user details 91 00:04:09,499 --> 00:04:11,861 will be displayed in the NavBar. 92 00:04:12,731 --> 00:04:15,898 But we also avoid making a separate request 93 00:04:15,898 --> 00:04:17,665 to the "user" API route, 94 00:04:17,665 --> 00:04:19,654 because we can use the data 95 00:04:19,654 --> 00:04:22,453 returned by the "login" route instead. 96 00:04:23,174 --> 00:04:25,533 Modifying the query cache directly 97 00:04:25,533 --> 00:04:27,476 is a very powerful technique 98 00:04:27,476 --> 00:04:29,419 once you get the hang of it.