PUT vs PATCH & PUT vs POST

Introduction

In one of my interviews recently, I was asked to explain the difference between PUT vs PATCH. You might be thinking, "Oh yeah, that's a common interview question!" But you know what, as common as you think it is, I actually didn't know how to answer this question (and yep, got rejected too haha🥲). Now I learned my lesson, I decided to write an article not only to help myself to understand but for those who are preparing for your (next) interviews!

For those who found this article via your feed or from Google, welcome! I will not necessarily provide you the direct answer for your interview in this article, but I hope it is thorough enough to help prepare for your interview(s). Also, I am not providing any new materials/founds/insights, but please consider this more of a thorough cheatsheet!

In this article, I assume you have already understood the basics of the HTTP methods in REST, but let's do a brief review before diving into the differences.

`POST`, `PUT` & `PATCH`

What is `POST`?

Create in CRUD
A method to create a new (subordinate) resource into the collection of resources
When creating a new resource, the server will automatically assign an ID to this new resource.
If successfully created, will return the HTTP status code 201 (CREATED) and return a location-header with a link, like https://www.example.com/recipes/1.
This method is neither safe nor idempotent. In other words, invoking two identical POST requests will result in two different resources containing the same information

Syntax with Axios (Example from Educative.io)

const axios = require('axios')

axios.post('https:sample-endpoint.com/user', {
    Name: 'Fred',
    Age: '23'
  })
  .then(function (response) {
    console.log(response);
  })

What is `PUT`?

Update in CRUD
A method to primarily update existing resource. If the resource does not exist, the API may decide to create a resource.
If successfully updated, will return the HTTP status code 200 (OK), or 204 (No Content) if nothing is updated. If successfully created, will return the HTTP status code 201 (CREATED).
This method is not safe, since it modifies (or creates) states within the resource.
It is however idempotent, since the resource will be the same and has the same state as it did in the same call if it is created or updated a resource with the same call again.

Syntax with Axios (Example from Jason Watmore)

const article = { title: 'React PUT Request Example' };
axios.put('https://reqres.in/api/articles/1', article)
  .then(response => this.setState({ updatedAt: response.data.updatedAt }));

What is `PATCH`?

(Also) Update in CRUD
A method to make partial update on the resource.
If successfully updated, will return the HTTP status code 200 (OK), or 204 (No Content) if nothing is updated.
This method is neither safe nor idempotent.

Syntax with Axios (Example from Mastering JS)

const res = await axios.patch('https://httpbin.org/patch', 'hello=world');

res.data.headers['Content-Type']; // application/x-www-form-urlencoded
res.data.json; // { hello: 'world' }

Okay, now let's talk about the differences.

`PUT` vs `POST`

1. Create and/or Update?

The most obvious difference is that PUT can both create and modify a resource while POST can only create a resource.

For PUT, if the Request-URI refers to an already existing resource, an update operation will happen, otherwise, it will create a new resource IF the Request-URI is a valid resource URI.

Request-URI stands for:

The request URI is the uniform resource identifier of the resource to which the request applies. While URIs can theoretically refer to either uniform resource locators (URLs) or uniform resource names (URNs), at the present time a URI is almost always an HTTP URL that follows the standard syntax rules of Web URLs.

More details here

Its request syntax will look something like this: PUT /users/{user-id}

Whereas for POST, the origin server accept a request as a new subordinate of the resource identified by the Request-URI.

Its request syntax will look something like this: POST /users

2. Idempotence

The PUT method is idempotent. Meaning if you (re)try to send a request multiple times, this is equivalent to a single request modification.

Whereas, the POST method is NOT idempotent. If you retry to send a request multiple times, you will end up having multiple resources with multiple different URIs on the server.

3. In Practice

Generally speaking, the PUT method is used for UPDATE operations while the POST method is used for the CREATE operations.

`PUT` vs `PATCH`

1. Update Partially or Fully a.k.a Replace?

PUT and PATCH can both be used for updating resources. However, the biggest difference between these two is that one can update and replace the resource while the other one can update partially.

In other words, when making a PUT request, the enclosed entity (a specific place you are making request on) is viewed as the modified version of the resource, and the client is requesting to replace with the new info; when making a PATCH request, it modifies only some part of the resource.

I found this great resource which use building houses as an example, here's the link and here's how the author demonstrated:

Let's say we have this house:

// House on plot 1
{
  address: 'plot 1',
  owner: 'segun',
  type: 'duplex',
  color: 'green',
  rooms: '5',
  kitchens: '1',
  windows: 20
}

PUT

// PUT request payload to update windows of House on plot 1
{
  address: 'plot 1',
  owner: 'segun',
  type: 'duplex',
  color: 'green',
  rooms: '5',
  kitchens: '1',
  windows: 21
}

PATCH

// Patch request payload to update windows on the House
{
  windows: 21
}

2. Idempotence

PUT is idempotent with reasons mentioned above, while PATCH is not idempotent. If a request is reattempted to be made, it will result a failed request (Method Not Allowed). If a PATCH request is made to a non-existent URI, it would simply fail without creating a new resource like PUT.

Before You Go...

Hope you have some takeaway from this article! To recap this article, the main differences with these methods are the idempotence and how they operate with the requests from clients!

PUT vs POST: YAS to creating new resources, but only PUT can update/modify resources and it is idempotent but not for POST
PUT vs PATCH: YAS to modify/update resources. PATCH allows us to modify the enclosed entity partially, while PUT basically replaces the entire thing.

I will attach some further readings if you are interested in learning more!

Last but not least, happy coding!