1
00:00:01,840 --> 00:00:06,010
As we just saw, we are double fetching the current user between the landing page and the app component.

2
00:00:06,170 --> 00:00:09,460
So we can fix that up really quickly inside this video to get started.

3
00:00:09,490 --> 00:00:11,530
I'm going to go backwards, my index dot, G.S. file.

4
00:00:12,280 --> 00:00:14,530
We're going to find the get initial props function.

5
00:00:14,950 --> 00:00:17,560
I'm going to delete everything that we have inside there for right now.

6
00:00:18,130 --> 00:00:20,650
Instead, I'm going to return an empty object.

7
00:00:22,810 --> 00:00:27,620
I'm also going to delete the Bild client statement at the very top, because we are not importing that.

8
00:00:27,640 --> 00:00:30,850
We're not making any use of with that build client function right now.

9
00:00:32,670 --> 00:00:37,870
Now, if I go back over to my application after saving that file and refresh the page, you might see

10
00:00:37,870 --> 00:00:39,840
it that you are now no longer signed in.

11
00:00:39,990 --> 00:00:41,820
Even if you actually are signed in.

12
00:00:42,840 --> 00:00:47,730
So if I click on the logo right there, again, that's going to reissue the current user request.

13
00:00:47,940 --> 00:00:52,320
And if I look at the response, I can see very plainly that I am, in fact, signed into the application.

14
00:00:52,350 --> 00:00:56,160
But the outcome or the landing page component definitely thinks that I'm not.

15
00:00:56,790 --> 00:01:01,360
The reason for that is that the landing page is not receiving the current user as a prop.

16
00:01:02,100 --> 00:01:06,330
So we need to go back over to our app component, which is still fetching the current user.

17
00:01:07,780 --> 00:01:12,380
So when the app component renders itself with the current user, we need to make sure that we take that

18
00:01:12,380 --> 00:01:16,670
current user and pass it down as a property down into the child component.

19
00:01:17,390 --> 00:01:21,290
This is going to make sure that every single child component inside of our application.

20
00:01:21,350 --> 00:01:26,900
So essentially every component side, the pages directory will always receive the current user as a

21
00:01:26,900 --> 00:01:29,000
prop, which is probably a very good thing.

22
00:01:29,480 --> 00:01:33,500
There's probably gonna be many scenarios, many different pages that we're going to create that need

23
00:01:33,500 --> 00:01:35,450
to understand who the current user is.

24
00:01:35,830 --> 00:01:39,860
But this is going to be a nice little thing that's going to help us easily understand who the current

25
00:01:39,860 --> 00:01:41,840
user is and all the different pages in the future.

26
00:01:42,800 --> 00:01:46,250
So on our component right there, we'll add in a prop of current user.

27
00:01:47,760 --> 00:01:48,660
And assigned to it.

28
00:01:49,720 --> 00:01:50,260
Burnt user.

29
00:01:52,260 --> 00:01:54,600
Now, I can flip back over if I refresh the page.

30
00:01:54,900 --> 00:01:57,120
I will once again see that I am signed in.

31
00:01:58,410 --> 00:02:03,020
And if I click on the Get Ticks logo yet again, I'll see that I'm now only making one request to fetch

32
00:02:03,020 --> 00:02:03,650
the current user.

33
00:02:04,340 --> 00:02:04,510
OK.

34
00:02:04,580 --> 00:02:05,000
Very good.

35
00:02:06,170 --> 00:02:09,940
That's one little fix, but there's one other fix that I would like to make as well.

36
00:02:10,970 --> 00:02:14,780
Inside of our app components, we are importing that build client helper.

37
00:02:15,290 --> 00:02:20,150
Now, as a reminder on what that build client thing is, we can go to our API directory inside the client

38
00:02:20,150 --> 00:02:22,220
folder and find the build client file.

39
00:02:23,070 --> 00:02:28,790
Remember, depending upon whether we are running our application or really rendering our app on the

40
00:02:28,820 --> 00:02:29,750
Cuban Nettie's cluster.

41
00:02:29,840 --> 00:02:34,700
So during the server side rendering phase, or whether we are running our app inside the browser, we

42
00:02:34,700 --> 00:02:37,040
are creating a slightly different copy of Axios.

43
00:02:37,550 --> 00:02:42,710
So every single time we fetch data, we need to first run this build client function.

44
00:02:43,280 --> 00:02:47,540
In other words, for every get initial props, we need to somehow get the current client.

45
00:02:48,930 --> 00:02:55,020
Rarely connected either to Ingress and Genex or to, well, just use the base, you are all in other

46
00:02:55,020 --> 00:03:00,180
words, just use the current domain, make a request back off to our endpoint or our back and servers.

47
00:03:02,300 --> 00:03:06,500
Now, as we just saw inside the index, such as File, we had the build client impressed him at the

48
00:03:06,500 --> 00:03:10,970
very top and then we were just a moment ago reading client inside of get initial props.

49
00:03:11,600 --> 00:03:15,770
That would be a really tedious to repeat for every single page component inside of our app.

50
00:03:16,400 --> 00:03:21,380
In other words, would be just a little bit of a pain every single time to have to import, build a

51
00:03:21,390 --> 00:03:24,770
client and then build up client inside to get initial props.

52
00:03:25,430 --> 00:03:26,660
So we're gonna fix that up here.

53
00:03:26,720 --> 00:03:30,710
We're gonna make it a little bit easier to fetch some data very easily without having to first import

54
00:03:30,710 --> 00:03:32,000
that build client helper.

55
00:03:33,370 --> 00:03:38,320
Back inside of our app component, you might recall that we are building a client up inside of your.

56
00:03:39,680 --> 00:03:44,930
And you might also recall, as we discussed in the last video, that we are invoking the child components

57
00:03:45,170 --> 00:03:47,000
get initial props function right here.

58
00:03:47,840 --> 00:03:54,380
So how about we say that whenever we are about to call the child's get initial props function?

59
00:03:54,980 --> 00:04:01,100
Let's just take the client that we have already built and provide it as a second argument to get initial

60
00:04:01,100 --> 00:04:01,590
props.

61
00:04:02,730 --> 00:04:04,860
So for the child components, get initial props function.

62
00:04:04,900 --> 00:04:09,510
I'm going to add in the client, which we already built up right there as a second argument.

63
00:04:11,850 --> 00:04:17,100
I'm also going to take the current user do we fetch from right here and I'm going to provide that as

64
00:04:17,100 --> 00:04:19,110
a third argument to get initial props.

65
00:04:19,530 --> 00:04:23,040
This is just in case we ever decide that to fetch some data tied to a user.

66
00:04:23,280 --> 00:04:27,990
We have to understand maybe who the users I.D. is or what the user's ideas are, something like that.

67
00:04:28,560 --> 00:04:34,050
So as the third argument to get initial props, I will provide data dot current user.

68
00:04:36,610 --> 00:04:37,690
Now, the reason that we are.

69
00:04:38,840 --> 00:04:43,130
Referring to data current user right here is remember, whenever we fetch the current user using this

70
00:04:43,130 --> 00:04:43,550
end point.

71
00:04:43,760 --> 00:04:47,060
That gives us back an object that has the current user property in it.

72
00:04:47,090 --> 00:04:48,650
And then that refers to the current user.

73
00:04:49,430 --> 00:04:52,010
That's why we're referring to just current user right here.

74
00:04:53,760 --> 00:04:54,360
Let's save that.

75
00:04:54,930 --> 00:04:56,870
And now back inside of index dodgiest file.

76
00:04:57,210 --> 00:05:01,140
If we need to get access to our clients, we can receive it as the second argument.

77
00:05:01,730 --> 00:05:06,120
And if we need to get access to the current user just so we can use their I.D. to fetch some data or

78
00:05:06,120 --> 00:05:09,000
something like that, we can receive it as the third argument.

79
00:05:10,080 --> 00:05:10,260
All right.

80
00:05:10,350 --> 00:05:10,740
That's it.

81
00:05:10,800 --> 00:05:13,560
We're not going to do anything with this just right now inside this video.

82
00:05:13,800 --> 00:05:18,060
But I hope that you can understand that now it's can be really easy for us to fetch some data using

83
00:05:18,060 --> 00:05:23,370
this client argument right here or current user without having to make a follow up request to fetch

84
00:05:23,370 --> 00:05:23,970
the current user.

85
00:05:24,480 --> 00:05:29,160
And without having to import that build client function to build up a client, which we've already done

86
00:05:29,160 --> 00:05:29,790
once before.

87
00:05:30,710 --> 00:05:30,920
OK.

88
00:05:31,070 --> 00:05:32,060
That is it.

89
00:05:32,090 --> 00:05:35,600
Those are two improvements that I really just wanted to make on this next application.

90
00:05:36,050 --> 00:05:40,610
Now that those two improvements are all done, we're gonna take one more pause and then start working

91
00:05:40,610 --> 00:05:42,500
on our new routes in the next video.