Now in the last lesson we tackled how our servers should respond when a client tries to make a GET request
on our articles route when they want to fetch all of the articles and we've configured our server to
be able to handle that to fetch all of the articles in our database.
Now the next one to tackle is what happens when a client makes a POST request to our article's route
that should create a new article and add it to our collection in our database.
Now here's a tricky one because the client now is going to send data essentially to our server. And at
the moment we don't really have a frontend.
We don't have a web form, for example, hit submit and it sends the data by making a POST request to this
route. Without creating all of that frontend and creating the HTML and designing it up
how can we keep it pure and just build our API without the need for building the frontend?
Well, we know we have our server that can speak to our database and we're exposing certain parts of our
server through the APIs that we're building so that clients can be able to work with our server and with
our database.
Now the client can be a number of things.
It could be a browser which is trying to load up a web page in which case it will make a GET request
to our server via our API and our server will send over the relevant HTML, CSS and JavaScript files to be
able to render that web page in the browser.
But our client say a browser could also be making GET requests that is looking for a particular resource
say some data or a file. And in the last lesson we've seen that we can simply make that request to our
API by going to that /articles route. And when we hit enter
this makes a GET request on that route and we'll get sent back the data that we requested in a JSON
format. Now that's very well and good for GET requests,
but how do we do that using POST requests?
Well here comes a handy tool called Postman.
And this is what's going to enable us to send data and test our API without having to worry about building
an HTML form or building up the frontend at all.
So let's go ahead and first install Postman.
So if you head over to www.getpostman.com then you can go ahead and click to download the app. Choose
your platform to download and go ahead and install that.
Now the first time you open Postman you should get a welcome window like this.
And this has a number of common things that you might want to do or create
but we're actually going to close this window and we don't want it to launch every single time.
So now here's our workspace inside Postman
and our goal is to be at to make a POST request to our server.
But before we can do that we first have to code it up so our server can actually make the correct response.
So in order to use Express to address POST requests on our server, we use the app.post method and
then we specify the route and we have a callback.
You've seen this before
whenever we've used our server to handle POST requests coming from a form. So inside here let's do
that for real, let's do app.post and then we're going to specify the route which is exactly the same
as before because RESTful conventions dictate that the POST request should go to the collection of resources
rather than a specific resource.
So if you had a whole bunch of articles it should go to /articles rather than a specific
article.
So let's go ahead and add that /articles and then we're going to add our callback request
and response.
So once the POST request comes through from the client, we're going to need to tap in to the request
.body in order to grab some of the data that was sent through. And here if you remember from previous
lessons when we created HTML forms we were able to tap into a variable name that we gave to
each of the fields in the form by accessing the name attribute.
So in our case we're going to have a field probably for title and another one for the content.
So the names of all variables are title and content
and if we had a form associated with this POST request the name attribute of one input might be title
and the name attribute of the other one might be content.
Now for now because we want to test this, let's go ahead and log this request.body.title and
also log the request.body.content so that we can see when the requests gets passed by body-parser
and we tap in to a variable called title and a variable called content we can actually confirm that the
POST request is working and that we can see the data that's being sent through.
So now we're ready to go into Postman and create a new request.
So in this console here we're going to create on new request and the first thing we're going to do is
we're gonna change that HTTP request from GET to POST. And then we're going to add that request URL which
is going to be localhost:3000 and then we're going to specify the route where our
POST request is handled which is going to be /articles and I'm just going to copy and paste
that in there.
So this should now read localhost:3000/articles and then we're going
to send some data along with this POST request.
There's no other reason for making POST requests right?
So now if you go over to this body tab and change the encoding to form-urlencoded which is
what our body-parser is designed to handle.
Then we can add in those variable names that we define here, title and content, as the keys for our data.
So one is gonna be title and the other one is going to be content. And then the value is the data that
we're going to send over along with our POST.
Now let's say that I wanted to create a new article on Jack Bauer.
So my title might be Jack Bauer and the content I'm gonna copy from a website that has amused me for
a long time anyways which is the "Top One Hundred Facts" about Jack Bauer and the one that ranks the most highly
and the first one says Jack Bauer once stepped into quicksand, the quicksand couldn't escape and nearly
drowned.
So let's go ahead and copy this and paste it into Postman as the value for our content key.
So now these values are the ones that we should now be able to tap into through request.body.
title and request.body.content.
And when that POST request gets triggered then it gets handled inside here
and we should be able to log the things that we sent over and we should be able to see it inside our
console over here.
So let's just make sure that all app.js has been saved and that our server has restarted and
it is running on port 3000.
Now let's head into Postman and click on send to make that request.
And now if we check inside our hyperterminal you can see that it's logged the values of both of those
things that we sent over, the title and the content.
So now that we've confirmed that we can make requests through Postman we can go ahead and add the rest
of the code which saves this into our MongoDB. And just a quick reminder, in order to create data inside
our MongoDB database using Mongoose we've seen this before but just a quick reminder, we create a new
constant
that's going to store a new article
and then the article will have two fields, title and content.
And we're going to set the data for that based on the data that we received through the POST request.
And then finally we're going to save that new object into our database.
So let's do it for real now.
Let's create a constant that's going to be called newArticle and this is going to be created using
the new keyword
and the article model which we created up here. And then we're going to open a set of round brackets
or parentheses and then some curly braces and hit enter.
Now inside here we have to define the data that we want to create for our two fields, title and content.
Now title is going to store the data that we received through the POST request through request.body.
title.
So I'm just gonna cut that and paste it in here. And then content is going to store the data that comes
over through the POST requests through request.body.content. And make sure you have a comma that separates
the two fields.
Now let's close that off using a semicolon and we're ready to save on new article.
So we're going to call newArticle.save.
So now let's hit save
so that our app.js has saved and then our server has restarted and we go back into Postman and we
can go ahead and click send to make the exact same POST requests to the same route using the same content
that we had before. But this time the only difference is that instead of console logging it inside the
console it should be able to add it into our MongoDB database and we should be able to see it when
we refresh our collections in Robo 3T.
So let's go ahead and click send.
And now if we go into Robo 3T and we refresh articles collection by clicking on view documents
you can see we now have an extra entry. And entry number 5 has the title of Jack Bauer and the content
that Jack Bauer once stepped into quicksand and the quicksand couldn't escape.
That is a very very quick way of setting this up.
Now there's just one thing that you might notice. Here
our request is expecting something to come back right? Like that was successful or it wasn't successful.
So in our server we should be sending something back just as we did over here.
If there were errors we'll send the error,
if there weren't any errors we'll just send that everything was a ok. And inside our save method we can
actually add a callback function that will trigger if there were any errors.
Now how do I know that we could do this?
Well documentation documentation documentation. Reading through the documentation can make you an expert
in any framework or module. So you can see over here in the model's part of the documentation
it says that when we construct documents for example when we run something something .save we can
actually add a callback and we'll receive any errors if that actually happened.
So inside here if there were no errors then that is when we're going to res.send "Successfully
added a new article."
But if there were some errors, else we're just going to res.send the error that we got back from
Mongoose.
So now our POST request is complete. Our POST request targets the articles route and it creates a new
article using the data that was submitted through the POST request and then we save that you article.
If there were errors then we send an error back to the client,
if there weren't any errors then we tell the client that everything went swimmingly.
So now we have addressed what should happen when a client makes a POST request and sends over some data
to our server via our API targeting the articles route.