1
00:00:02,000 --> 00:00:04,000
Now sending a request to the API route

2
00:00:04,000 --> 00:00:08,000
works just as sending a request to any API,

3
00:00:08,000 --> 00:00:11,000
to any backend works in react.

4
00:00:11,000 --> 00:00:14,000
In our new meetup form component,

5
00:00:14,000 --> 00:00:17,000
we call on add meetup on props

6
00:00:17,000 --> 00:00:20,000
to pass our collected data there.

7
00:00:20,000 --> 00:00:22,000
And in the end therefore we need to go

8
00:00:22,000 --> 00:00:25,000
to the component that uses new meetup form

9
00:00:25,000 --> 00:00:27,000
to work with that data.

10
00:00:27,000 --> 00:00:29,000
And that is our new meetup page.

11
00:00:29,000 --> 00:00:32,000
There, we have this add meetup handler

12
00:00:32,000 --> 00:00:34,000
which gets this collected data.

13
00:00:34,000 --> 00:00:35,000
And therefore it's here

14
00:00:35,000 --> 00:00:39,000
where we now wanna send the request to our API route.

15
00:00:39,000 --> 00:00:42,000
And we can send the request just as we know it,

16
00:00:42,000 --> 00:00:45,000
for example with the built in fetch function

17
00:00:45,000 --> 00:00:48,000
or with a third-party package like axis.

18
00:00:49,000 --> 00:00:51,000
Now here I'll use the fetch function

19
00:00:51,000 --> 00:00:52,000
and I wanna use async await,

20
00:00:52,000 --> 00:00:55,000
so I will turn this into a async function

21
00:00:55,000 --> 00:00:59,000
and await the response here.

22
00:00:59,000 --> 00:01:02,000
And then we need to insert the URL

23
00:01:02,000 --> 00:01:04,000
to which we want to send the request.

24
00:01:05,000 --> 00:01:10,000
Now often that is some domain dot com

25
00:01:11,000 --> 00:01:15,000
and then some path, if it's an external API,

26
00:01:15,000 --> 00:01:18,000
but here it's of course an internal API,

27
00:01:18,000 --> 00:01:22,000
which will be hosted by the same server as is being used

28
00:01:22,000 --> 00:01:24,000
for serving this page.

29
00:01:24,000 --> 00:01:28,000
And therefore we just can construct a absolute path here

30
00:01:28,000 --> 00:01:31,000
to send the request to the same server

31
00:01:31,000 --> 00:01:34,000
but a different path on that server.

32
00:01:34,000 --> 00:01:37,000
And the path is slash API

33
00:01:37,000 --> 00:01:41,000
because it's this special API folder and then the file name.

34
00:01:41,000 --> 00:01:45,000
So slash meetup and you meet up without the file extension.

35
00:01:47,000 --> 00:01:50,000
And if you name this Java script file differently here

36
00:01:50,000 --> 00:01:52,000
you need to use a different name here as well.

37
00:01:53,000 --> 00:01:55,000
This will now send the request

38
00:01:55,000 --> 00:01:58,000
to this new meetup JS file in the API folder.

39
00:01:58,000 --> 00:02:00,000
And it will then trigger this function.

40
00:02:00,000 --> 00:02:03,000
NextJS will trigger this function for us

41
00:02:03,000 --> 00:02:06,000
when a request reaches this path.

42
00:02:07,000 --> 00:02:11,000
Now we actually do need to send a post request

43
00:02:11,000 --> 00:02:12,000
because we're not doing anything

44
00:02:12,000 --> 00:02:15,000
for different kinds of requests.

45
00:02:15,000 --> 00:02:18,000
And hence, here, we need to use this second argument

46
00:02:18,000 --> 00:02:22,000
which we can pass to fetch to configure this request.

47
00:02:22,000 --> 00:02:25,000
And for example, we can set the method key to post here.

48
00:02:26,000 --> 00:02:28,000
We then should also at the body,

49
00:02:28,000 --> 00:02:31,000
the data attached to this request.

50
00:02:31,000 --> 00:02:34,000
And that has to be a JavaScript object

51
00:02:34,000 --> 00:02:36,000
which carries the data, which we wanna store

52
00:02:36,000 --> 00:02:40,000
in our database, a title, a image, an address

53
00:02:40,000 --> 00:02:41,000
and a description field.

54
00:02:42,000 --> 00:02:44,000
Now here entered meetup data

55
00:02:44,000 --> 00:02:47,000
which we're getting from new meetup form

56
00:02:47,000 --> 00:02:49,000
does have those fields already.

57
00:02:49,000 --> 00:02:53,000
It has a title, image address and description field.

58
00:02:53,000 --> 00:02:55,000
And since that's the case,

59
00:02:55,000 --> 00:02:58,000
in the end we can simply pass entered meetup data as a body.

60
00:02:58,000 --> 00:03:00,000
However, not like this

61
00:03:00,000 --> 00:03:02,000
but instead we need to convert it to JSON

62
00:03:02,000 --> 00:03:06,000
which we can do with the built in JSON stringify method.

63
00:03:07,000 --> 00:03:10,000
Then we can also add some headers to make it clear

64
00:03:10,000 --> 00:03:13,000
that we're sending JSON data

65
00:03:13,000 --> 00:03:15,000
by adding the content type header

66
00:03:15,000 --> 00:03:18,000
and setting this to application JSON.

67
00:03:19,000 --> 00:03:22,000
And with that, our request is configured and will be sent.

68
00:03:22,000 --> 00:03:25,000
Eventually we then get a response

69
00:03:25,000 --> 00:03:28,000
and we can then also get data from that response

70
00:03:28,000 --> 00:03:30,000
if we want to

71
00:03:30,000 --> 00:03:31,000
just like this

72
00:03:31,000 --> 00:03:33,000
as we always do it for responses we get

73
00:03:33,000 --> 00:03:35,000
from the fetch function.

74
00:03:35,000 --> 00:03:37,000
And then we can work with that data,

75
00:03:37,000 --> 00:03:39,000
but here I'm not interested in it.

76
00:03:39,000 --> 00:03:41,000
So we'll just log that data.

77
00:03:42,000 --> 00:03:46,000
If we do all of that, if we save all the files

78
00:03:46,000 --> 00:03:50,000
and if we ensured that MongoDB white listed our local IP

79
00:03:50,000 --> 00:03:52,000
and that the credentials

80
00:03:52,000 --> 00:03:55,000
for connecting to the database are correct.

81
00:03:55,000 --> 00:03:58,000
If we did all of that, we should be able to go back

82
00:03:58,000 --> 00:04:03,000
to our form here and reload, open to dev tools

83
00:04:03,000 --> 00:04:08,000
and then enter our data here, like a first meetup.

84
00:04:08,000 --> 00:04:12,000
And then I will again, wrap this URL

85
00:04:12,000 --> 00:04:13,000
which I picked before

86
00:04:14,000 --> 00:04:16,000
and insert this here as a image

87
00:04:17,000 --> 00:04:22,000
and then some address, some street five, some city.

88
00:04:22,000 --> 00:04:25,000
And this is a first meetup as a description.

89
00:04:25,000 --> 00:04:27,000
And if I now click add meetup

90
00:04:29,000 --> 00:04:33,000
we see this response eventually, which is looking good

91
00:04:33,000 --> 00:04:36,000
because meetup inserted is the message we're sending back

92
00:04:36,000 --> 00:04:38,000
from the API route.

93
00:04:38,000 --> 00:04:41,000
And if we go to MongoDB

94
00:04:41,000 --> 00:04:44,000
to our cluster and click on collections

95
00:04:44,000 --> 00:04:49,000
there we should then actually also see a meetup data base.

96
00:04:49,000 --> 00:04:51,000
And you might not see the other databases here

97
00:04:51,000 --> 00:04:54,000
because I traded more databases in this cluster

98
00:04:54,000 --> 00:04:55,000
but you should see a meetups database

99
00:04:55,000 --> 00:04:58,000
with a meetups collection.

100
00:04:58,000 --> 00:05:01,000
And in there you should see one meetup with the data

101
00:05:01,000 --> 00:05:03,000
you just added.

102
00:05:03,000 --> 00:05:06,000
And an automatically generated ID.

103
00:05:07,000 --> 00:05:09,000
And that's our API route in action

104
00:05:09,000 --> 00:05:11,000
and how we can send a request to it.

105
00:05:12,000 --> 00:05:15,000
Now, of course, we now probably wanna navigate away

106
00:05:15,000 --> 00:05:17,000
after we added a meetup

107
00:05:17,000 --> 00:05:22,000
and therefore back in the new meetup page here.

108
00:05:23,000 --> 00:05:26,000
So not the API route, but the front end facing page.

109
00:05:26,000 --> 00:05:28,000
After we got our response here

110
00:05:28,000 --> 00:05:31,000
we might wanna navigate away programmatically.

111
00:05:31,000 --> 00:05:33,000
And we learned how that worked.

112
00:05:33,000 --> 00:05:37,000
We can use the use router hook

113
00:05:37,000 --> 00:05:39,000
and import it from next router therefore,

114
00:05:41,000 --> 00:05:44,000
to get access to that router object.

115
00:05:45,000 --> 00:05:47,000
And once we got that here after logging

116
00:05:47,000 --> 00:05:51,000
maybe we can navigate away with the push method

117
00:05:51,000 --> 00:05:54,000
or here maybe also with the replace method

118
00:05:54,000 --> 00:05:57,000
to make sure we can't go back with the back button.

119
00:05:57,000 --> 00:06:00,000
If you want to ensure that that's not possible.

120
00:06:00,000 --> 00:06:02,000
Here I don't wanna do that.

121
00:06:02,000 --> 00:06:04,000
And hence, I'll just push this

122
00:06:04,000 --> 00:06:06,000
and then go back to just slash nothing.

123
00:06:06,000 --> 00:06:08,000
So to the starting page, let's say,

124
00:06:08,000 --> 00:06:10,000
and then with that if we save this

125
00:06:10,000 --> 00:06:15,000
and I then enter a second meetup here

126
00:06:15,000 --> 00:06:17,000
and the image link again,

127
00:06:17,000 --> 00:06:20,000
second street two.

128
00:06:20,000 --> 00:06:23,000
This is the second street.

129
00:06:23,000 --> 00:06:26,000
If we do all of that click add meetup

130
00:06:26,000 --> 00:06:29,000
you see eventually we're navigated away.

131
00:06:29,000 --> 00:06:32,000
And of course we could also show a loading spinner

132
00:06:32,000 --> 00:06:33,000
and do all of that

133
00:06:33,000 --> 00:06:36,000
but that's then all just client site standard react

134
00:06:36,000 --> 00:06:40,000
nothing NextJS specific about it.

135
00:06:40,000 --> 00:06:44,000
The NextJS specific part was this API route.

136
00:06:44,000 --> 00:06:47,000
And as you see that route is now working just fine.