Edit A Quote6:04 with Treasure Porth
In 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
You need to sign up for Treehouse in order to download course files.Sign up