1
00:00:00,400 --> 00:00:04,590
In the last video we saw that defining a get initial props function on the app component.

2
00:00:04,600 --> 00:00:08,170
Somehow disabled the one we had put together inside of our landing page.

3
00:00:08,170 --> 00:00:12,250
So in this video we're gonna figure out how to solve this so quick diagram.

4
00:00:12,290 --> 00:00:14,160
So this is what is going on behind the scenes.

5
00:00:14,210 --> 00:00:19,670
We've got our app component it is trying to fetch some data and get that as props down into the app.

6
00:00:19,670 --> 00:00:22,480
We've also got the landing page rather than calling indexed objects.

7
00:00:22,490 --> 00:00:27,650
I'll call it landing page right here and that it's got has its own get initial props function and right

8
00:00:27,650 --> 00:00:29,690
now the thing is not being invoked.

9
00:00:29,840 --> 00:00:31,370
But here's how we're gonna fix this.

10
00:00:31,370 --> 00:00:37,190
We are going to get that components get initial prompts function and we are going to manually invoke

11
00:00:37,190 --> 00:00:40,730
it inside of the custom app components get initial props.

12
00:00:40,790 --> 00:00:45,680
So we're going to be fetching two sets of data one set of data for the app component and one set of

13
00:00:45,680 --> 00:00:47,460
data for the landing page.

14
00:00:47,540 --> 00:00:52,430
So we'll take all that information and pass it down into the app component as props and we're going

15
00:00:52,430 --> 00:00:58,010
to somehow chop up that information and make sure some of it goes down eventually into the landing page

16
00:00:58,010 --> 00:00:58,360
as well.

17
00:01:00,100 --> 00:01:01,600
Let me show you how we're going to do this.

18
00:01:01,780 --> 00:01:05,380
Back inside my editor I'll find the app components get initial props.

19
00:01:05,380 --> 00:01:08,790
Remember that app context argument right there.

20
00:01:08,830 --> 00:01:11,020
Let's do a full console log of it.

21
00:01:11,080 --> 00:01:14,670
Previously we had just done a console log of the keys this time around.

22
00:01:14,770 --> 00:01:18,780
Let's do a console log of the entire thing.

23
00:01:18,890 --> 00:01:24,980
I can save that and then going to go and refresh my application just to execute that stuff well then

24
00:01:24,980 --> 00:01:28,820
go back over to my terminal and I'll see a big console log right here.

25
00:01:28,820 --> 00:01:34,390
So this big console log is that app context I'm going to scroll up a little bit maybe a lot.

26
00:01:34,400 --> 00:01:39,430
I suppose and then up here is the top of that console log.

27
00:01:39,430 --> 00:01:45,520
You'll notice that it has a property on it of capital C component so that component property right there

28
00:01:45,550 --> 00:01:51,240
is a reference to the component or the page that we are currently trying to render since we have a reference

29
00:01:51,240 --> 00:01:57,400
to the component we can access that components or that pages get initial prompts function directly.

30
00:01:57,510 --> 00:02:04,200
So we are going to get the component dot get initial props and we will just invoke it on our own when

31
00:02:04,200 --> 00:02:04,770
we invoke it.

32
00:02:04,800 --> 00:02:09,750
We'll make sure that we pass down some arguments related to say context so that that thing can work

33
00:02:09,750 --> 00:02:11,130
correctly.

34
00:02:11,130 --> 00:02:15,690
We will let it fetch some data and we're gonna take the data that comes back and we will return it manually

35
00:02:15,720 --> 00:02:17,520
from get initial props.

36
00:02:17,610 --> 00:02:22,840
So let's take a look at how we're going to do this going to delete that console log then right after

37
00:02:22,840 --> 00:02:30,920
we make our own call to print user right here I'm going to say component props or how about page props

38
00:02:32,310 --> 00:02:44,900
little bit easier to pass or understand and then for that we're gonna do in a wait app context dot component

39
00:02:44,930 --> 00:02:52,340
with a capital C dot get initial props and again whenever we call get initial prop something is going

40
00:02:52,340 --> 00:02:58,520
to expect some arguments for us in particular we expected to receive that context argument so we can

41
00:02:58,610 --> 00:03:04,400
take a look at the context off of the app context remember two kinds of different context here the city

42
00:03:04,400 --> 00:03:10,220
X property is intended to go into a individual page the app component context is intended to go into

43
00:03:10,220 --> 00:03:16,100
the app component that we will call give initial props with app context not city X

44
00:03:19,900 --> 00:03:24,330
then we're eventually going to get back to a set of page prompts that's gonna be the set of data that

45
00:03:24,330 --> 00:03:29,700
we had tried to fetch or are trying to fetch from the components or the individual pages get initial

46
00:03:29,700 --> 00:03:30,740
props.

47
00:03:30,750 --> 00:03:37,630
Right now let's just do a console log of that we can do a console log of page props like so at present

48
00:03:37,660 --> 00:03:41,200
the data we're trying to fetch out of that thing is the same information we're trying to fetch.

49
00:03:41,230 --> 00:03:46,240
A moment ago the current user so if everything worked I should get a console log once again of the current

50
00:03:46,240 --> 00:03:47,260
user.

51
00:03:47,270 --> 00:03:48,190
OK let's try this out.

52
00:03:49,410 --> 00:03:51,860
I'm going to go and refresh the page again.

53
00:03:51,910 --> 00:03:53,360
I'll then go back or my journal.

54
00:03:53,430 --> 00:03:58,510
I'm going to scroll down to the bottom and I'll see onto log of current user right there.

55
00:03:58,560 --> 00:03:59,710
Perfect.

56
00:03:59,760 --> 00:04:05,760
So that means we are now executing to get initial prompts functions for both the app component and for

57
00:04:05,760 --> 00:04:07,140
the individual page as well.

58
00:04:09,410 --> 00:04:15,840
Now there is something that we need to be aware of right now we have a get initial prompts defined for

59
00:04:15,840 --> 00:04:16,980
our landing page.

60
00:04:16,980 --> 00:04:21,990
So that's inside of our index not just file but we also have pages such as the sign in and the sign

61
00:04:21,990 --> 00:04:25,230
up that do not have a get initial prompts function.

62
00:04:25,260 --> 00:04:31,380
So we need to make sure that we handle the case where back inside of our app this get initial props

63
00:04:31,410 --> 00:04:32,380
is undefined.

64
00:04:32,700 --> 00:04:37,760
So if nothing is undefined we don't want to try and patch any data to handle this.

65
00:04:37,810 --> 00:04:42,730
We could just do a quick little check I'm gonna say let page props out here.

66
00:04:42,770 --> 00:04:48,550
Well then say if app context dot component dot get initial props.

67
00:04:48,550 --> 00:04:53,620
So if that is defined let's go ahead and try to fetch some data and assign it to this page perhaps variable

68
00:04:54,730 --> 00:04:58,220
so cut that cost space drops or pasted in there.

69
00:04:58,330 --> 00:05:00,880
And now I do not want to redefine page drops.

70
00:05:00,940 --> 00:05:06,260
Instead I'm going to assign to the one we had defined right above.

71
00:05:06,330 --> 00:05:12,060
I'm also going to default the thing to be an empty object so that if we fail this if statement I will

72
00:05:12,060 --> 00:05:16,710
still have some kind of empty object to share around.

73
00:05:16,730 --> 00:05:18,280
So let's save this now.

74
00:05:18,290 --> 00:05:22,610
Now we should be able to visit say the sign up page without having anything crash or anything like that

75
00:05:23,580 --> 00:05:29,510
so if I go back over time my browser I should be able to go to off sign up which does not have a get

76
00:05:29,510 --> 00:05:32,840
initial prompts function but it looks like everything still works.

77
00:05:32,870 --> 00:05:37,430
Same thing for sign in as well.

78
00:05:37,490 --> 00:05:38,720
Let's pull it back over.

79
00:05:38,730 --> 00:05:44,630
So now we are getting some information that is common for every page inside of APP get initial props.

80
00:05:44,630 --> 00:05:49,840
And we've also have some logic inside of here to get some information for a very particular page.

81
00:05:49,870 --> 00:05:53,390
It's not the last thing we have to do is make sure that we take the page props.

82
00:05:53,570 --> 00:05:58,670
We take any data that we're fetching for the app component we need to return all this stuff and then

83
00:05:58,670 --> 00:06:03,980
make sure that it somehow gets divvied up between the header Andy component or the page that we're actually

84
00:06:03,980 --> 00:06:05,100
trying to show.

85
00:06:05,140 --> 00:06:07,490
Two quick possible picks finish this up in just a moment.