All language subtitles for 026 Sending a POST Request_en

Now for sending an HTTP request

we can use the fetch function.

That's a default JavaScript function built into JavaScript.

It has nothing to do with react.

It's a standard JavaScript function supported

in modern browsers,

and it is a function that allows us to send HTTP requests.

We could also use third-party packages like axios

which has all the popular library for sending HTTP requests.

But I don't want to install an extra library here.

So I'll stick to fetch.

Now fetch wants an argument

and the first argument should be a string.

It should be the URL to which we wanna to send a request.

And here that states URL which we get

from the Firebase real-time database console.

Now this Firebase real-time database service works such

that this URL can be manipulated.

We can add segments after this domain.

And then these segments will be translated into folders.

You could say in your database into tables,

you could say, so we could send the request

to this URL/meetups.

And that would add a meetups table, a meetups collection

to that database here.

And hence, I'll do that here.

Now, one special thing about this Firebase API is

that you need to add dot json at the end here.

That's not react specific.

That's just something Firebase requires.

And with that,

that is the URL to which we're sending our request.

But here I actually wanna store data

on Firebase servers and to signal to Firebase

and to this API that we want to store data,

we actually must send a post request

and by default fetch sends a get request.

And that will always depend on the API you're working with.

But most APIs are built such

that storing data requires post requests.

Now to send a post instead of a get request

we add a second argument to fetch here.

And that second argument is an object which allows us to

configure this fetch function call

and this HTTP request, therefore,

and here in this object we can, for example,

set a method property to define the age

to DB method that will be used.

And here we can set this to post instead of get

which would be the default.

So here we use post instead.

Now, when we send a post request

we should also add the data to the request

the data which we wanna store.

And we do that through the body field, which we add

to the second argument to this configuration object.

Now body wants the data we wanna append

and that data should typically be in json format

which is a very popular, the most popular.

I would argue data format for transmitting data

with HTTP requests and in Java script

we can easily create json

by using the built in json object

and calling the stringify method,

and choose stringify

we can pass default JavaScript objects or a raise

or values in general, and they will be converted to json.

So here we could pass our meetup data object

which we're getting as a parameter

as argument to the stringIfy method.

Now, last but not least

we can add some extra headers if we want to.

And for example, adds to content type header and set it

to application/json, to add this extra metadata

to the outgoing request and make it crystal clear

that this request carries json data, some APIs

also required this, and with that

we're sending such a post request.

We can do more with fetch.

We can listen to the success and error cases

and we do that in the full react course, which I offer.

But for the moment here, this is actually enough

because this will already sent a post request

with our data to Firebase.

And hence, now here, if we saved this

and I click on add meetup now with data entered,

we don't see any feedback here.

We'll work on that in a second.

But if we go to Firebase

we see that there is a new meet-ups node.

And in that note, we got this cryptic ID here,

which is actually auto-generated by Firebase.

And if we expand this, we see our submitted data.

So storing that data on Firebase servers works.

Now let's work

on the feedback which we provide to the user here.

When we add a meetup.