Preview
Video Player
00:00
00:00
Edit A Quote
6:04In this video, we'll add functionality to our app that will allow the client to edit quotes.
Let's write an update route to
edit an already existing quote.
0:00
A put request indicates to
our application that a change
0:04
is going to be made to
an existing resource.
0:07
We're going to handle put requests
to the /quotes/:id route.
0:09
We're going to use await
inside this callback, so
0:22
we'll indicate that this
function is asynchronous.
0:24
Now we'll need a trycatch block.
0:31
Into the catch block, we can just copy and
0:39
paste the same error from
above in our post route.
0:42
Inside the try block,
we'll use the updateQuote function.
0:49
Go ahead and
hover over the updateQuote function.
0:55
You can see it accepts one parameter,
0:58
an object containing the content
that we wanna update the quote with.
1:00
So we'll expect the client to send us
an object containing the author and
1:04
quote text to replace the current values.
1:08
The client will send a request
containing the new object,
1:11
the endpoint of the quote
that they wish to change.
1:13
Much like we did in
the get /quotes/:id route,
1:16
we'll first retrieve the quote
using records.getQuote.
1:20
And passing it the id of
the quote we're looking for,
1:25
which is available via req.params.id.
1:28
So records.getQuote(req.params.id), and
1:33
we can save that to
a variable called quote.
1:37
Remember, we're going to pull
the id from the request and
1:42
feed it to the records.getQuote method.
1:46
The getQuote method will then return
to us the quote we're looking for,
1:49
saved in a variable called quote.
1:53
Also, we'll need to wait for
this code information to come back
1:56
before we move onto the next line of code,
so we can add await here.
1:59
We're nearly ready to use
the updateQuote function, but
2:04
first let's make sure
the requested resource exists.
2:07
In other words,
that the id points to a valid quote.
2:10
If the quote doesn't exist,
we'll send a 404 error.
2:17
And we'll send a message
that the quote wasn't found.
2:26
If getQuote has returned a valid quote,
we'll need to reassign the quote's quote
2:33
and author properties to reflect the new
information sent to us by the client.
2:37
Recall that we have access to this
new information via req.body.
2:43
So we have the quote we wanna change,
let's change it.
2:47
We'll set the quote object's
quote property equal to
2:49
the new quote property
sent to us by the client.
2:54
And we'll do the same with the author.
2:59
So here we're getting the new
information the client has sent us.
3:08
And we are reassigning the value of the
quote and author properties to match that.
3:11
Now that we've updated the quote,
3:17
we can pass the new quote
to the updateQuote method.
3:18
So let's go ahead and
copy and paste this up here.
3:22
And we can pass quote to
the updateQuote method.
3:26
The updateQuote method will save
the new quote to our data store.
3:31
This is an asynchronous function, so
we'll need to await this as well.
3:35
Now we'll need to send
some kind of response.
3:39
For a put request, it's convention to send
status code 204, which means no content.
3:42
This generally means that everything went
okay, but there's nothing to send back.
3:48
Up until now,
we've responded to requests with JSON,
3:56
but for put requests, it's convention
not to respond with anything.
3:59
The data store simply gets updated, and
4:03
we send back a status code indicating
that the update went as expected.
4:05
We need another way to end the request, or
the server will just hang indefinitely,
4:09
and our application will
appear to be broken.
4:14
We can end the request with
the Express end method,
4:16
which simply tells
Express that we're done.
4:19
Let's test this out in Postman by
editing the quote with an id of 8721.
4:23
We'll edit it by adding a Jr.
to the end of Martin Luther King.
4:29
So up here, change the method to PUT, and
4:33
we'll send the request to
localhost:3000/quotes/8721.
4:37
Click on Body, and then raw.
4:44
And here we'll send an object
with our request containing
4:47
an updated quote and author.
4:50
So I'm actually just going to copy and
paste this from below.
4:52
And add the Junior.
5:03
Go ahead and press Send.
5:04
And it looks like nothing happened,
but we did get a status of 204.
5:08
And if we go ahead and
take a look at our data.json file,
5:14
you can see that that has
been successfully changed.
5:17
So we're finding the quote by id,
5:21
taking the information the client has sent
us, and using it to update the quote.
5:24
Passing the new quote to
the updateQuote method to be saved.
5:29
In a more real-world situation,
5:33
you'd also wanna validate the information
the client has sent to you.
5:35
For example, has the client sent data for
all the required properties?
5:38
Is the data in the form your API is
expecting, like a string or a number,
5:42
and so on.
5:46
When you're using an ORM,
5:47
you'll most likely create data
models to do exactly that.
5:48
You define the shape of
your data in one place.
5:52
Which properties are required, which data
type each properties expect, and so on.
5:55
So our updateQuote route is working great,
let's move on to the delete route.
6:00