1
00:00:01,100 --> 00:00:04,580
Our coat definitely works right now but it's really messy at present.

2
00:00:04,610 --> 00:00:08,340
Anytime we want to make a request inside of it get initial props function.

3
00:00:08,340 --> 00:00:10,050
We would have to set up this if statement.

4
00:00:10,050 --> 00:00:12,910
We would have to write out this really long year L and so on.

5
00:00:12,960 --> 00:00:17,760
So I think that would be worth our time to try to extract a lot of this logic into a separate helper

6
00:00:17,760 --> 00:00:23,450
file that we can more easily use any time we need to make a request from a get initial props function.

7
00:00:23,490 --> 00:00:29,270
So here's my idea I think that we should build a separate file and inside there we're going to write

8
00:00:29,270 --> 00:00:35,240
out a helper function called build client this build client function is going to take some incoming

9
00:00:35,240 --> 00:00:40,740
request that has those headers on it that we really care about then inside that function we're going

10
00:00:40,740 --> 00:00:47,070
to have some logic to try to build a pre configured version of axioms that's going to be pre configured

11
00:00:47,070 --> 00:00:50,350
to work regardless of what environment we are on.

12
00:00:50,400 --> 00:00:54,270
So the logic inside there is going to take a look at that incoming request it's going to take a look

13
00:00:54,270 --> 00:00:59,550
at whether it is in the browser or the server environment and then it will eventually return a version

14
00:00:59,550 --> 00:01:04,960
of axioms that has already been configured to work in either the browser or the server for us.

15
00:01:05,010 --> 00:01:13,930
So that's the idea so let's create a new file that's going to house this build client function back

16
00:01:13,930 --> 00:01:18,820
inside my editor I'm gonna find the client directory I'll create a new folder inside there are called

17
00:01:18,880 --> 00:01:28,000
API and then inside of that I'm going to make a new file called build client dot J.S. inside of here

18
00:01:28,030 --> 00:01:37,330
at the very top I'm going to import axioms from axioms I'll then do an export default

19
00:01:40,400 --> 00:01:44,810
and I'm going to assume that the argument to this is going to be an object that's going to contain the

20
00:01:44,810 --> 00:01:50,510
request that we care about by going to attempt to D structure off the wreck property from this incoming

21
00:01:50,510 --> 00:01:56,690
argument then inside of here we need to essentially do very similar to what we just did back inside

22
00:01:56,690 --> 00:02:01,970
of get initial prompts we need to first decide what environment we are in so we'll once again do a type

23
00:02:01,970 --> 00:02:11,190
of check on window I'll say if type of window is equal to the string undefined then that must mean we

24
00:02:11,190 --> 00:02:19,250
are on the server otherwise we must be on the browser now in each of these cases we're going to create

25
00:02:19,250 --> 00:02:26,450
an instance of axioms that is pre configured to work in either the server or the browser to do so I'm

26
00:02:26,450 --> 00:02:33,410
going to write out return axles dot create that's how we create a pre configured version of axioms once

27
00:02:33,410 --> 00:02:38,960
we return the thing it will be like a normal axis client but we'll have some base your l or domain wired

28
00:02:38,960 --> 00:02:44,680
up to it and we'll also have some headers wired up to it as well so if we are on the server then we

29
00:02:44,680 --> 00:02:52,600
want to set a base you are L for this axis instance to use notes that you are all right here has capital

30
00:02:52,600 --> 00:02:58,400
you are L then inside there will specify that really long domain that we saw just a moment ago.

31
00:02:58,600 --> 00:03:09,360
So in total it will be h t DP colon slash slash ingress engine Gen-X ingress engine X SBC luster local

32
00:03:10,160 --> 00:03:16,140
now please do double check your you are all obviously a very easy to make a typo in their will also

33
00:03:16,140 --> 00:03:21,380
set up some headers for this thing to use as well so we want to use these same headers that are inside

34
00:03:21,410 --> 00:03:25,070
of the incoming requests that we'll put in req dot headers

35
00:03:28,820 --> 00:03:33,740
now if we are on the browser well let's create a separate instance of axles for that door I'm going

36
00:03:33,740 --> 00:03:40,590
to do return axial stock create and in this case we really don't need to set any particular base your

37
00:03:40,610 --> 00:03:46,430
l We will set it to base your l I've just forward slash like so and we do not need to include any headers

38
00:03:46,460 --> 00:03:50,630
because the browser is going to take care of all that stuff for us to be honest with you we barely even

39
00:03:50,640 --> 00:03:57,760
needs but the base url inside of here we probably could just leave it off entirely ok so that should

40
00:03:57,760 --> 00:03:58,170
be it.

41
00:03:58,180 --> 00:04:03,610
So now any time that we want to get a copy of access to use we will import build client we'll run this

42
00:04:03,610 --> 00:04:08,340
function and pass in some object that has the request on it.

43
00:04:08,340 --> 00:04:15,800
So let's go back over to our landing page and try making use of this back inside of index J S right

44
00:04:15,800 --> 00:04:22,220
here I'll go to the very top I should not need the axles in for anymore.

45
00:04:22,270 --> 00:04:30,430
Instead I'm going to import build client from up one directory API build client

46
00:04:33,320 --> 00:04:38,210
then down inside of get initial props I should be able to delete everything inside there

47
00:04:41,200 --> 00:04:51,790
and I will replace it with data is build client I'm going to pass in an object that has the wreck property

48
00:04:51,790 --> 00:04:57,530
on it and you'll notice that I am now essentially duplicating this thing I'm pulling just the wrecked

49
00:04:57,530 --> 00:05:02,300
property off and I'm passing in a wreck as an object so rather than trying to pull anything off here

50
00:05:02,730 --> 00:05:07,520
we're going to receive this entire first argument the first argument is function we usually refer to

51
00:05:07,520 --> 00:05:13,370
as context so we can now just take that entire context thing and pass it directly through to build a

52
00:05:13,370 --> 00:05:15,820
client.

53
00:05:15,880 --> 00:05:20,230
Now when we call build a client right here remember that's just gonna give us our Acciona instance we

54
00:05:20,230 --> 00:05:22,720
still have to actually make a request using it.

55
00:05:22,720 --> 00:05:27,640
So I'm going to chain on a dot get and we'll make our actual request.

56
00:05:28,290 --> 00:05:36,940
So I'm going to make my request to API users current user and because that is an async function.

57
00:05:36,940 --> 00:05:39,310
I'll make sure that I mark this entire thing as a wait

58
00:05:42,260 --> 00:05:47,130
and then finally we'll return data at the very bottom okay.

59
00:05:47,150 --> 00:05:48,910
So that should be it really quick.

60
00:05:48,910 --> 00:05:55,590
I want to flip back over make sure you're ok everything looks good so I to say this in a flip back over

61
00:05:55,590 --> 00:05:59,020
the browser and do a quick test or refresh.

62
00:05:59,040 --> 00:05:59,300
OK.

63
00:05:59,310 --> 00:06:04,900
Looks like in the browser it work correctly it looks like on the server it work correctly as well.

64
00:06:06,040 --> 00:06:07,960
Well I'd say this is working out pretty well.

65
00:06:08,010 --> 00:06:12,880
I would like to test one last thing I want to test where we do a soft transition the page so I can navigate

66
00:06:12,880 --> 00:06:18,200
over to sign up I'll put in a fake email a fake password sign up.

67
00:06:18,280 --> 00:06:19,580
Yep that looks good as well.

68
00:06:20,910 --> 00:06:22,730
Well something else is pretty good.

69
00:06:22,770 --> 00:06:27,150
Now one thing we might do it's a little bit challenging to really understand what the awake you were

70
00:06:27,150 --> 00:06:30,050
does when we have some chain method calls like this.

71
00:06:30,090 --> 00:06:34,380
So one thing you might do just to make this a little bit more legible we might decide to define the

72
00:06:34,380 --> 00:06:41,710
client ahead of time using build client and then do a client dot get that word very easily improve the

73
00:06:41,710 --> 00:06:46,310
readability of this and just make it a little bit more obvious what was going on so I'll save that as

74
00:06:46,310 --> 00:06:48,590
well and everything should still work as expected.

75
00:06:49,770 --> 00:06:50,010
OK.

76
00:06:50,050 --> 00:06:50,760
So that's pretty much it.

77
00:06:50,820 --> 00:06:55,860
So now moving forward any time you need to make a request from a get initial prompts function we're

78
00:06:55,860 --> 00:07:01,870
going to first build OK our client and then use that to make our actual request Well let's take a pause

79
00:07:01,870 --> 00:07:02,190
right here.

80
00:07:02,200 --> 00:07:04,750
Now that we've got this all working and we'll continue in just a moment.