All language subtitles for 028 Sending Http Requests To Our API Routes_en

Now sending a request to the API route

works just as sending a request to any API,

to any backend works in react.

In our new meetup form component,

we call on add meetup on props

to pass our collected data there.

And in the end therefore we need to go

to the component that uses new meetup form

to work with that data.

And that is our new meetup page.

There, we have this add meetup handler

which gets this collected data.

And therefore it's here

where we now wanna send the request to our API route.

And we can send the request just as we know it,

for example with the built in fetch function

or with a third-party package like axis.

Now here I'll use the fetch function

and I wanna use async await,

so I will turn this into a async function

and await the response here.

And then we need to insert the URL

to which we want to send the request.

Now often that is some domain dot com

and then some path, if it's an external API,

but here it's of course an internal API,

which will be hosted by the same server as is being used

for serving this page.

And therefore we just can construct a absolute path here

to send the request to the same server

but a different path on that server.

And the path is slash API

because it's this special API folder and then the file name.

So slash meetup and you meet up without the file extension.

And if you name this Java script file differently here

you need to use a different name here as well.

This will now send the request

to this new meetup JS file in the API folder.

And it will then trigger this function.

NextJS will trigger this function for us

when a request reaches this path.

Now we actually do need to send a post request

because we're not doing anything

for different kinds of requests.

And hence, here, we need to use this second argument

which we can pass to fetch to configure this request.

And for example, we can set the method key to post here.

We then should also at the body,

the data attached to this request.

And that has to be a JavaScript object

which carries the data, which we wanna store

in our database, a title, a image, an address

and a description field.

Now here entered meetup data

which we're getting from new meetup form

does have those fields already.

It has a title, image address and description field.

And since that's the case,

in the end we can simply pass entered meetup data as a body.

However, not like this

but instead we need to convert it to JSON

which we can do with the built in JSON stringify method.

Then we can also add some headers to make it clear

that we're sending JSON data

by adding the content type header

and setting this to application JSON.

And with that, our request is configured and will be sent.

Eventually we then get a response

and we can then also get data from that response

if we want to

just like this

as we always do it for responses we get

from the fetch function.

And then we can work with that data,

but here I'm not interested in it.

So we'll just log that data.

If we do all of that, if we save all the files

and if we ensured that MongoDB white listed our local IP

and that the credentials

for connecting to the database are correct.

If we did all of that, we should be able to go back

to our form here and reload, open to dev tools

and then enter our data here, like a first meetup.

And then I will again, wrap this URL

which I picked before

and insert this here as a image

and then some address, some street five, some city.

And this is a first meetup as a description.

And if I now click add meetup

we see this response eventually, which is looking good

because meetup inserted is the message we're sending back

from the API route.

And if we go to MongoDB

to our cluster and click on collections

there we should then actually also see a meetup data base.

And you might not see the other databases here

because I traded more databases in this cluster

but you should see a meetups database

with a meetups collection.

And in there you should see one meetup with the data

you just added.

And an automatically generated ID.

And that's our API route in action

and how we can send a request to it.

Now, of course, we now probably wanna navigate away

after we added a meetup

and therefore back in the new meetup page here.

So not the API route, but the front end facing page.

After we got our response here

we might wanna navigate away programmatically.

And we learned how that worked.

We can use the use router hook

and import it from next router therefore,

to get access to that router object.

And once we got that here after logging

maybe we can navigate away with the push method

or here maybe also with the replace method

to make sure we can't go back with the back button.

If you want to ensure that that's not possible.

Here I don't wanna do that.

And hence, I'll just push this

and then go back to just slash nothing.

So to the starting page, let's say,

and then with that if we save this

and I then enter a second meetup here

and the image link again,

second street two.

This is the second street.

If we do all of that click add meetup

you see eventually we're navigated away.

And of course we could also show a loading spinner

and do all of that

but that's then all just client site standard react

nothing NextJS specific about it.

The NextJS specific part was this API route.

And as you see that route is now working just fine.