1
00:00:03,000 --> 00:00:05,339
In the previous step we created

2
00:00:05,339 --> 00:00:07,451
this "useSignIn custom hook,

3
00:00:07,451 --> 00:00:10,545
that takes care of making a login request

4
00:00:10,545 --> 00:00:12,959
and also update the "user" value

5
00:00:12,959 --> 00:00:14,846
in the React Query cache.

6
00:00:15,647 --> 00:00:17,694
By the way, both this hook

7
00:00:17,694 --> 00:00:19,425
and the "useUser" hook

8
00:00:19,425 --> 00:00:22,809
use the same query key for the "user" data.

9
00:00:23,466 --> 00:00:25,074
So it's a good thing that

10
00:00:25,074 --> 00:00:27,647
we have both of them in the same module.

11
00:00:28,211 --> 00:00:31,162
In fact, we could extract a common constant,

12
00:00:31,162 --> 00:00:33,241
let's call it "USER_QUERY_KEY",

13
00:00:34,677 --> 00:00:36,164
and then use this constant

14
00:00:36,164 --> 00:00:37,879
instead of the string literal,

15
00:00:38,777 --> 00:00:41,151
so it should be absolutely clear

16
00:00:41,151 --> 00:00:43,598
to anybody reading this file that

17
00:00:43,598 --> 00:00:46,565
we must use the same key in both places.

18
00:00:46,565 --> 00:00:49,383
Ok. That was just a quick refactoring.

19
00:00:50,105 --> 00:00:52,261
What I want to do in this video is

20
00:00:52,261 --> 00:00:54,988
finally fix that problem with the sign out.

21
00:00:55,551 --> 00:00:57,633
As we've seen a number of times,

22
00:00:57,633 --> 00:01:00,884
ever since we started using useQuery in the NavBar

23
00:01:01,449 --> 00:01:04,257
if we click "Sign Out", the NavBar doesn't

24
00:01:04,257 --> 00:01:07,199
immediately update to reflect the new state,

25
00:01:07,765 --> 00:01:10,235
and we always had to reload the page

26
00:01:10,235 --> 00:01:13,048
for it to show that we're now signed out.

27
00:01:13,616 --> 00:01:19,398
So, to resolve this issue, we'll want to use "useMutation" for the "logout" request,

28
00:01:19,898 --> 00:01:21,804
just like we do for the "login".

29
00:01:22,304 --> 00:01:24,828
But in the mutation function of course

30
00:01:24,828 --> 00:01:27,285
we should call "/api/logout" instead.

31
00:01:27,851 --> 00:01:30,320
And after we logout we also want to

32
00:01:30,320 --> 00:01:33,775
update the "user" value in the React Query cache,

33
00:01:33,775 --> 00:01:35,749
like we do after we sign in.

34
00:01:36,390 --> 00:01:38,563
We also know by this point that

35
00:01:38,563 --> 00:01:40,875
every time we make an API request

36
00:01:40,875 --> 00:01:43,328
it's good to encapsulate that logic

37
00:01:43,328 --> 00:01:44,519
in a custom hook.

38
00:01:45,229 --> 00:01:47,733
So let's write a new hook function,

39
00:01:47,733 --> 00:01:49,879
that we can call "useSignOut".

40
00:01:49,879 --> 00:01:52,454
If you feel like doing some exercise

41
00:01:52,454 --> 00:01:55,888
you can try implementing this function yourself,

42
00:01:55,888 --> 00:01:59,321
since I already outlined what we should do here,

43
00:01:59,321 --> 00:02:03,184
and there are no new concepts you need to be aware of.

44
00:02:03,184 --> 00:02:06,689
So if you want to try this, pause this video now,

45
00:02:06,689 --> 00:02:09,335
and write the code for this function,

46
00:02:09,335 --> 00:02:12,769
otherwise I'll continue with the implementation.

47
00:02:12,769 --> 00:02:14,128
Ok. Let's go ahead.

48
00:02:15,271 --> 00:02:18,850
The first thing we want to do is call "useMutation",

49
00:02:18,850 --> 00:02:21,052
to prepare the "logout" request.

50
00:02:21,620 --> 00:02:24,209
And to actually make the HTTP request

51
00:02:24,209 --> 00:02:26,378
we can simply call "fetchJson",

52
00:02:26,378 --> 00:02:28,967
like we previously did in the NavBar.

53
00:02:29,606 --> 00:02:32,564
Let's assign the result to a "mutation" variable.

54
00:02:33,064 --> 00:02:35,583
What requires a little bit of thought is:

55
00:02:35,583 --> 00:02:37,549
what should we return from here?

56
00:02:38,110 --> 00:02:40,283
I think we should return a function.

57
00:02:42,076 --> 00:02:44,258
This way when we use that hook,

58
00:02:44,258 --> 00:02:46,017
we can call "useSignOut",

59
00:02:48,542 --> 00:02:50,550
and obtain the returned function,

60
00:02:50,550 --> 00:02:52,193
that we can name "signOut".

61
00:02:52,753 --> 00:02:55,300
So then, when the user clicks the button

62
00:02:55,300 --> 00:02:58,038
we can simply call that "signOut" function.

63
00:02:58,602 --> 00:03:01,328
In fact, at this point it's not even worth

64
00:03:01,328 --> 00:03:04,054
having a separate "handleSignOut" handler.

65
00:03:04,618 --> 00:03:07,218
We could just pass "signOut" directly

66
00:03:07,218 --> 00:03:09,395
as the "onClick" event handler.

67
00:03:09,966 --> 00:03:11,307
Which means we can remove

68
00:03:11,307 --> 00:03:12,971
this other function altogether.

69
00:03:14,966 --> 00:03:16,857
At this point we can also remove

70
00:03:16,857 --> 00:03:18,216
the "fetchJson" import.

71
00:03:18,776 --> 00:03:21,968
Ok, so this simplifies our NavBar code,

72
00:03:22,468 --> 00:03:24,542
but we haven't actually implemented

73
00:03:24,542 --> 00:03:26,202
this "signOut" function yet.

74
00:03:26,762 --> 00:03:30,146
What we want to do here is make the API request

75
00:03:30,146 --> 00:03:32,738
by calling "mutation.mutateAsync()",

76
00:03:33,311 --> 00:03:36,520
and we can "await" for that request to complete.

77
00:03:37,020 --> 00:03:39,150
Because after that we want to

78
00:03:39,150 --> 00:03:41,720
update the value of the "user" data

79
00:03:41,720 --> 00:03:43,557
in the React Query cache.

80
00:03:44,204 --> 00:03:47,347
So that's the same thing we did in "useSignIn".

81
00:03:47,847 --> 00:03:50,560
We first need the "queryClient" instance

82
00:03:50,560 --> 00:03:53,545
that we can get by calling "useQueryClient",

83
00:03:54,113 --> 00:03:55,779
and then we want to call

84
00:03:55,779 --> 00:03:57,653
"queryClient.setQueryData".

85
00:03:58,613 --> 00:04:01,134
But in this case, since we signed out

86
00:04:01,134 --> 00:04:03,792
the "user" value should be "undefined".

87
00:04:04,361 --> 00:04:06,997
This way as soon as the user signs out

88
00:04:06,997 --> 00:04:09,773
the NavBar should reflect the new state.

89
00:04:10,343 --> 00:04:11,898
Let's see if this actually works.

90
00:04:12,398 --> 00:04:15,743
We'll need to sign in first, before we can sign out.

91
00:04:16,243 --> 00:04:18,374
So let's enter the usual credentials,

92
00:04:18,374 --> 00:04:21,082
and I'll reload the page as well, just in case.

93
00:04:21,640 --> 00:04:23,476
Now, before I click "Sign Out",

94
00:04:23,476 --> 00:04:25,727
let me show the Chrome Developer tools

95
00:04:25,727 --> 00:04:28,038
so we can look at the network requests.

96
00:04:28,657 --> 00:04:30,195
Ok. Let's click sign out,

97
00:04:30,790 --> 00:04:33,391
and this triggered a "logout" request,

98
00:04:33,391 --> 00:04:34,966
so the mutation worked.

99
00:04:35,535 --> 00:04:39,246
But this time the NavBar also re-rendered itself,

100
00:04:39,246 --> 00:04:43,109
showing that the "user" data managed by React Query

101
00:04:43,109 --> 00:04:44,775
was updated correctly.

102
00:04:45,427 --> 00:04:47,438
"user" will now be "undefined",

103
00:04:47,438 --> 00:04:50,358
because that's the value we put in the cache.

104
00:04:50,923 --> 00:04:53,781
And even if we navigate to different pages

105
00:04:53,781 --> 00:04:56,639
it will continue to use that cached value,

106
00:04:56,639 --> 00:05:00,177
without making any new requests to the "user" route.

107
00:05:00,814 --> 00:05:04,324
Ok. So we proved that our new code works.

108
00:05:04,824 --> 00:05:06,699
And this is my implementation

109
00:05:06,699 --> 00:05:08,833
for our "useSignOut" custom hook.

110
00:05:08,833 --> 00:05:11,291
If you tried implementing it yourself,

111
00:05:11,291 --> 00:05:13,619
hopefully you did something similar.