1
00:00:01,280 --> 00:00:05,630
In this video we're going to start to extract get initial props from indexed all James up to that custom

2
00:00:05,630 --> 00:00:06,600
app component.

3
00:00:06,670 --> 00:00:11,450
So let's get to it now when I say extract what I really mean right now is just copy paste.

4
00:00:11,540 --> 00:00:16,250
I do want to have a get initial props in both locations so we can kind of test and make sure that we're

5
00:00:16,250 --> 00:00:22,490
still able to fetch data from both the page we're trying to display and the custom app once we can ensure

6
00:00:22,490 --> 00:00:27,230
that we can't fetch data in both locations at the same time we will then remove get initial prompts

7
00:00:27,290 --> 00:00:28,270
from landing page.

8
00:00:28,280 --> 00:00:29,850
So eventually this will go away.

9
00:00:29,990 --> 00:00:33,680
But for right now we're going to have it in both locations again just to make sure we can fetch data

10
00:00:33,710 --> 00:00:34,550
in both places.

11
00:00:35,630 --> 00:00:35,870
OK.

12
00:00:35,900 --> 00:00:41,390
So let's start off inside of this underscore abduct Jay file so he no longer wants you just directly

13
00:00:41,390 --> 00:00:42,450
export this function.

14
00:00:42,460 --> 00:00:48,380
Instead we need to somehow define that get initial prompts function on it so I can delete the expert

15
00:00:48,380 --> 00:00:54,940
default and I'm going to assign this to a variable to I will call app component and you might be tempted

16
00:00:54,940 --> 00:00:56,300
to call this app right here.

17
00:00:56,320 --> 00:00:57,720
I encourage you not to do that.

18
00:00:57,760 --> 00:01:04,190
Instead call it app component you're going to see why in just a moment so we can then define app component

19
00:01:04,310 --> 00:01:16,530
not get initial props like so and I'll do an export default app component at the bottom down just as

20
00:01:16,530 --> 00:01:19,580
we did back inside of our landing page inside to get initial props.

21
00:01:19,590 --> 00:01:24,420
If we do any data fetching we need to make sure that we build up our axis client because we're going

22
00:01:24,420 --> 00:01:30,150
to run into all these same issues around problems with our domain or the base url depending upon whether

23
00:01:30,150 --> 00:01:33,650
we are running this code on the browser or on the server.

24
00:01:33,690 --> 00:01:38,730
So we still have to require in or import in that build client file and use it to build up our access

25
00:01:38,730 --> 00:01:39,930
client.

26
00:01:39,930 --> 00:01:50,460
So at the very top we can add in an import for build client from up one directory API build line then

27
00:01:50,460 --> 00:01:52,390
down inside of get initial props.

28
00:01:52,710 --> 00:01:53,880
I would write out right here.

29
00:01:53,880 --> 00:01:56,630
I would try to receive in some context argument.

30
00:01:56,820 --> 00:01:58,270
That's what we would want to do.

31
00:01:58,290 --> 00:02:01,290
But it turns out life is not quite so simple.

32
00:02:01,420 --> 00:02:06,000
It's now that we've got this kind of scaffolding put together because I want to show you another diagram

33
00:02:06,030 --> 00:02:09,300
just help you understand a little challenge with next J.S..