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