Preview
Video Player
00:00
00:00
Create a New Quote
5:22In this video we'll create an Express POST route allowing the client to create a new quote and save it to the datastore.
Open up app.js if you don't
have it opened already.
0:00
Underneath the next
item in our to-do list,
0:03
let's write a new post route
to handle request to /quotes.
0:08
Notice that this looks exactly
like the first route we wrote,
0:18
only we're using the post method instead.
0:22
When a get request is sent to the quotes
route, this code up here will run.
0:25
But when a post request is
sent to the same route,
0:30
whatever we write inside
this callback will be run.
0:33
Inside the post route callback,
0:37
we'll use a method from our
records module called createQuote.
0:39
Hover over the createQuote method and
you'll see that it takes one parameter,
0:46
an object containing info for a new quote,
the quote text, and the quote author.
0:51
So to the createQuote method,
let's pass an object, and
0:56
the object must have a property for
quote and a property for author.
0:59
The values for these properties
we’re going to get from the client.
1:07
Similar to how req.params works, express
takes information sent from the client and
1:11
makes it available to us on the request
object on a property called body.
1:17
Our API will expect the client to send
us a JSON object containing the needed
1:22
information, and that information will be
available to us on the request object.
1:27
So to access the value for
quote we'll get that from rack.body.quote,
1:32
And author from rack.body.author.
1:39
We wanna send the quote back so
1:43
the client can see any values
generated by the database.
1:44
In this case,
1:47
our mock database is automatically
generating the quote's unique ID.
1:48
So we'll save the results
of records.createQuotes
1:53
to a variable, And send that back as JSON.
1:59
As I said, express takes information
sent from the client and
2:07
makes it available on the request object,
but it doesn't do it automatically.
2:10
If we tested this out,
it wouldn't work quite yet.
2:14
To be able to access values on req.body
we need to put a line of code up here
2:17
toward the top of the file.
2:21
Above where we're defining our first route
I'm going to type, app.use(express.json.
2:23
This is express middle wear.
2:35
When a request comes in it'll be sent
through this function before it hits
2:38
one of our route handlers.
2:42
This middle word tells Express that we're
expecting requests to come in as JSON.
2:44
That way, Express can take the JSON
we're sent, via the request body, and
2:48
make it available to us on the request
object on the property called body.
2:53
This will make much more
sense once we send some data.
2:57
So let's make sure we save, and that our
server is running, and open up Postman.
3:00
We're going to make a post
request to the /quotes route.
3:06
So choose POST from this menu and
3:09
make sure that localhost:3000/quotes
is in this bar.
3:12
Now select the Body tab.
3:17
Choose raw, and make sure JSON is
selected from this menu on the right.
3:19
Now in this blank field we are going to
create a JSON object for a new quote.
3:25
Each quote object has three properties, an
ID number, the quote itself and an author.
3:32
We don't need to worry about
the ID number, because remember,
3:37
the records manual generates that for us,
as is common behavior for a database.
3:41
Write an object with a quote and
author property,
3:46
these can have any values you'd like.
3:51
Now click Send.
3:58
If we have a look at our data.json file,
you'll see there
4:00
is our new quote with a randomly
generated ID, excellent.
4:05
To quickly review we're making
a post request containing JSON for
4:10
new a quote with postman, our client.
4:14
We're then accessing that information
with Express through rec.body and setting
4:17
those values to a new object that we're
passing to the create quote function.
4:22
Which similar to what
a database in ORM might do,
4:26
assigns the quote a random ID number and
saves it to our datastore.
4:29
Then we're storing the newly created
quote to a quote variable and
4:34
sending it back to the client.
4:38
Notice, however, that we
are responding with an empty object.
4:39
This is because we still
need to use async await.
4:44
So once more go back to app.js,
add the async keyword to let JavaScript
4:47
know there's information we need
to await inside this function.
4:52
And the createQuote function creates
a new quote in our datastore,
4:56
then returns that quote
when it's done creating it.
4:59
So we want to await the return of
the new quote before we send it back to
5:02
the client.
5:05
Let's save and test this out.
5:09
Great, now when we add a quote we're
successfully sending it back to
5:14
the client.
5:17
There's just one more
thing we need to do and
5:17
we'll talk about what that
is in the next video.
5:19