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
inCRUD
- 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, likehttps://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
inCRUD
- 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)
, or204 (No Content)
if nothing is updated. If successfully created, will return the HTTP status code201 (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
inCRUD
- A method to make partial update on the resource.
- If successfully updated, will return the HTTP status code
200 (OK)
, or204 (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
}
- 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
vsPOST
: YAS to creating new resources, but onlyPUT
can update/modify resources and it is idempotent but not forPOST
PUT
vsPATCH
: YAS to modify/update resources.PATCH
allows us to modify the enclosed entity partially, whilePUT
basically replaces the entire thing.
I will attach some further readings if you are interested in learning more!
Last but not least, happy coding!
Resources
HTTP Methods
- HTTP Methods (REST API Tutorial)
- Using HTTP Methods for RESTful Services
- How to make an Axios POST request(https://www.educative.io/edpresso/how-to-make-an-axios-post-request) (Educative.io)
- I wrote this following article a week before this current article, this is where I referenced to as well: HTTP Methods for RESTful Services (Part 1)
PUT
vs POST
- When to Use HTTP PUT and HTTP POST (By Kevin Sookocheff)
- REST – PUT vs POST (REST API Tutorial)
PUT
vs PATCH
- Use of PUT vs PATCH methods in REST API real life scenarios (Stack Overflow)
- RESTful API Design — PUT vs PATCH (By Segun Ola)
- What’s the Difference between PUT vs PATCH? (Rapid API)
Top comments (2)
Congrats. This post got me to create an account here so I could save it and leave this comment. This is the stuff I use just often enough to forget.
I was asked with the same question in an interview, and failed to answer as well. Thanks for sharing this info...