1
00:00:01,480 --> 00:00:03,580
Let's update this axios request right here.

2
00:00:03,640 --> 00:00:05,560
I've got a dummy Eurail inside there right now.

3
00:00:05,650 --> 00:00:09,490
I'm going to delete that and we will replace it with the actual your L to make our request.

4
00:00:10,440 --> 00:00:14,760
So the oil that we need to make the request to is pretty much what you see right here.

5
00:00:15,450 --> 00:00:18,690
You'll notice that the vast majority of this is actually a query string.

6
00:00:19,230 --> 00:00:23,700
So we do not encode the query string into the actual Eurail argument of our request.

7
00:00:23,820 --> 00:00:28,560
Instead, we're just going to put in the domain and the path and then we will provide a separate object

8
00:00:28,590 --> 00:00:30,810
to encode all these query parameters.

9
00:00:31,410 --> 00:00:32,880
Let me just show you what we need to do.

10
00:00:33,680 --> 00:00:35,570
Going to first take the base.

11
00:00:35,590 --> 00:00:36,150
You are El.

12
00:00:37,150 --> 00:00:38,070
We'll find a wait.

13
00:00:38,170 --> 00:00:40,220
Accio stock gets going to right inside there.

14
00:00:40,380 --> 00:00:48,790
Each TDP s ohlin flash flash and then put in yen Wikipedia or W api BHB.

15
00:00:51,600 --> 00:00:54,630
Then as the second argument, we're gonna put in an options object.

16
00:00:55,440 --> 00:01:01,290
We're going to provide a Paramo property and assign it an object to remember whatever key value pairs

17
00:01:01,290 --> 00:01:02,940
we put inside of this object right here.

18
00:01:03,270 --> 00:01:09,420
Axios will take all those and code them into a query string independent onto the end of the URL automatically.

19
00:01:10,200 --> 00:01:14,670
You and I need to take all of these key value pairs and write them into that parameter object.

20
00:01:15,150 --> 00:01:16,020
Let's do that right now.

21
00:01:17,680 --> 00:01:20,830
We are going to put in action is query.

22
00:01:22,000 --> 00:01:23,710
List is search.

23
00:01:24,710 --> 00:01:26,960
Origin is star.

24
00:01:28,630 --> 00:01:29,080
Hoopes.

25
00:01:31,410 --> 00:01:32,990
Or Matt, Jason.

26
00:01:33,290 --> 00:01:35,800
And then finally, s r search.

27
00:01:36,550 --> 00:01:38,660
And that's going to be our actual search term.

28
00:01:38,750 --> 00:01:40,520
That's what we want to search Wikipedia for.

29
00:01:40,970 --> 00:01:43,280
So in our case, it will be the term piece of state.

30
00:01:43,430 --> 00:01:46,310
That is what we want to search for the four s our search.

31
00:01:46,340 --> 00:01:47,360
We'll put in term.

32
00:01:50,330 --> 00:01:50,510
All right.

33
00:01:50,600 --> 00:01:51,200
That looks good.

34
00:01:52,160 --> 00:01:54,670
We can now see this and do a quick test right away.

35
00:01:56,200 --> 00:01:58,960
We're not going to see any results from this search up here on the screen.

36
00:01:59,020 --> 00:02:02,600
But we can at least take a look at our network request log and make sure that we are making the request

37
00:02:02,600 --> 00:02:03,250
successfully.

38
00:02:04,310 --> 00:02:05,150
Gonna flip back over.

39
00:02:06,650 --> 00:02:10,260
And then go to my network, AB inside my console.

40
00:02:11,450 --> 00:02:13,900
I'm then going to filter by x h our requests.

41
00:02:14,370 --> 00:02:18,150
And as soon as I do so, you'll see that an initial request has already been issued.

42
00:02:18,840 --> 00:02:24,150
The reason for that is that when we first render our component to the screen, our use effect function

43
00:02:24,150 --> 00:02:25,230
is going to be invoked.

44
00:02:25,390 --> 00:02:29,010
Remember, that is one of the requirements or one of things that always happens with the use effect.

45
00:02:29,370 --> 00:02:34,470
Even if we put on some array down here to customize when it gets invoked, no matter what we do, use

46
00:02:34,470 --> 00:02:35,970
effect will always be invoked.

47
00:02:36,330 --> 00:02:37,680
First time our component is rendered.

48
00:02:38,900 --> 00:02:43,640
If we then start to type inside of our input, we're going to see an additional request made for every

49
00:02:43,640 --> 00:02:48,890
single key press that I could put in p r o ram.

50
00:02:49,940 --> 00:02:50,290
ING.

51
00:02:51,120 --> 00:02:52,260
And you can see right away.

52
00:02:52,410 --> 00:02:52,580
Yep.

53
00:02:52,620 --> 00:02:55,230
We got an additional request every single time.

54
00:02:56,800 --> 00:03:00,610
After I typed in the full word of programming and then going to click on the last request.

55
00:03:02,560 --> 00:03:06,800
I'll take a look at the preview tab and then expand, query and search.

56
00:03:07,340 --> 00:03:09,530
And there are all of our search results right there.

57
00:03:10,140 --> 00:03:12,110
The query search is an array.

58
00:03:12,410 --> 00:03:15,920
And then inside of each of these objects, we've got a title and a snippet.

59
00:03:17,540 --> 00:03:19,970
Let's say that we are definitely making our requests successfully.

60
00:03:20,240 --> 00:03:21,050
This looks pretty good.

61
00:03:22,070 --> 00:03:26,950
Then the last thing we need to do is take the response, we get back, extract the data out of it,

62
00:03:27,400 --> 00:03:31,750
and then assign that or use it to update some new piece of state inside of our component.

63
00:03:32,230 --> 00:03:34,360
And remember, that is going to cause our component to re render.

64
00:03:34,600 --> 00:03:37,240
We can then build a list out of that list of results.

65
00:03:38,410 --> 00:03:40,010
Let's take you to that next piece of states.

66
00:03:40,150 --> 00:03:40,990
In just a moment.