ELI5: PUT and PATCH Requests

In Module Three at Flatiron School we were introduced to JavaScript. The main concepts covered in this section were DOM manipulation, event handling, and fetch. All three concepts go hand in hand, and as students it was imperative to understand how they coincide in order to use CRUD functionality in creating a dynamic web application.

One thing I found particularly tricky was the concept of fetch, and more specifically, using fetch to send PUT and PATCH requests to the API. At first glance, both HTTP verbs seem to be very similar. In terms of CRUD, both are associated with updating a resource. The two may appear to be interchangeable. So how do we know when to use one over the other?

The main difference between PUT and PATCH is in the way the server handles the data it receives from the fetch request to modify the resource identified by the request URI. While it's true both PUT and PATCH can update the same location, the two handle updating differently.

A PUT request needs us to send the entire payload to the server. The data a PUT request receives from the client will completely update a resource's information. It can also create a new resource from the information provided if one does not exist already.

Let's take a look at a simple example of a PUT request. In this request, we are sending the information we'd like the server to change through the body of the fetch, identifying the resource we'd like to change by its id.

With PATCH, we only need to send the specific parameters that we want to update. Only the parameters that we request to be updated will be modified; everything else will remain as is. This is a partial update the existing resource.

Using our previous example data, let's send a PATCH request to update our completed status to true. Since this is the only piece of information the server needs us to update, we only need to send that through the body.

The UPDATE part of CRUD tends to be a bit confusing for students new to fetch. One of the most important steps is to identify what it is you want to change in your app so you can choose the appropriate HTTP verb. If it's a single piece of data, you can go with PATCH. If you need to update a more than single piece of information, use PUT. Being able to update your application with user input is an essential part of building a fully functional and dynamic app. Using fetch can be daunting for new JavaScript developers, but it's important to become comfortable with it and the HTTP verbs you will inevitably run into!