Difference Between PUT and PATCH Request - GeeksforGeeks (2024)

HTTP PUT request is used to replace and update the entire resource or document while the PATCH request only updates the specific parts of that document.

When working with APIs, figuring out the right way to update resources can be tricky. Both PUT and PATCH requests are used for this purpose. This guide will break down the key differences between these two methods, helping you choose the most appropriate approach for your needs.

PUT Request

A PUT request is used to update an entire resource on the server. When you use a PUT request, you are telling the server to completely replace the existing data with the new data you provide.

Key Points:

1. Replaces Entire Resource: When you send a PUT request, the server expects you to include all the information for the resource, even if you only want to update a small part of it. If you leave something out, that part of the resource will be erased or set to default.
2. Can Create Resources: If the resource doesn’t exist, a PUT request can be created it. This is possible because PUT specifies the exact URL where the resource should be created.

Example: Let’s say you want to update a user’s name and email. With PUT, you would send all the details of the user, even those that aren’t changing:

{
 id: 8,
 email: "lindsay.ferguson@reqres.in",
 // field to be updated
 first_name: "Lindsay",
 // field to be updated
 last_name: "Ferguson",
 avatar: "https://reqres.in/img/faces/8-image.jpg"
}

To get more comfortable with handling HTTP requests in JavaScript, including PUT, PATCH, and more, our JavaScript Course offers practical tutorials on working with REST APIs and server-side communication, preparing you for more advanced web development tasks.

Let us take an example to understand PUT requests by sending only the fields that we want to update.

Example: The following code demonstrates the PUT request method

let PutRequest = () => { // Sending PUT request with fetch API in javascript fetch("https://reqres.in/api/users/2", { headers: { Accept: "application/json", "Content-Type": "application/json" }, method: "PUT", // Sending only the fields that to be updated body: JSON.stringify({  email: "hello@geeky.com",  first_name: "Geeky" })let PutRequest = () => {  // Sending PUT request with fetch API in javascript fetch("https://reqres.in/api/users/2", { headers: { Accept: "application/json", "Content-Type": "application/json" }, method: "PUT", // Sending only the fields that to be updated body: JSON.stringify({ email: "hello@geeky.com", first_name: "Geeky" }) }) .then(function (response) {  // Console.log(response); return response.json(); }) .then(function (data) { console.log(data); });};PutRequest(); }) .then(function (response) { // Console.log(response); return response.json(); }) .then(function (data) { console.log(data); });};PutRequest();

Output:

In the above example, we have made a PUT request to the server, with a payload attached to the body. If we want to update the name and email, with a PUT request we have to send all the other fields such id, avatarlast_name, to the server, otherwise, it replaces the data with the payload passed as we can see in the above example.

Patch Request

A PATCH request is used to partially update a resource. This means you only need to send the data that you want to change, without affecting the rest of the resource.

Key Points:

1. Partial Updates: With PATCH, you only include the fields you want to update. The rest of the resource remains unchanged.
2. More Efficient: Since you’re sending less data, PATCH requests usually use less bandwidth, making them faster and more efficient.

If you only want to update the user’s name and email, you would send just those fields:

{
 "first_name":"Geeky", // field that to be updated
 "email":"hello@geeky.com", // field that to be updated
}

Example: The following code demonstrates the PATCH request method

let PatchRequest = () => { // Sending PUT request with fetch API in javascript fetch("https://reqres.in/api/users/2", { headers: { Accept: "application/json", "Content-Type": "application/json" }, method: "PATCH", // Fields that to be updated are passed body: JSON.stringify({ email: "hello@geeky.com", first_name: "Geeky" }) }) .then(function (response) {  // console.log(response); return response.json(); }) .then(function (data) { console.log(data); });};PatchRequest();

Output:

In the above example, we have made a PATCH request to the server, with a payload attached to the body. If we want to update the email and first_name, with a PATCH request then we have to send only the fields that have to be updated e.g first_name and email.

Difference between PUT and PATCH Request

Conclusion

When deciding between PUT and PATCH, consider whether you need to update the entire resource or just part of it. Use PUT when you want to completely replace a resource, and use PATCH when you only need to make small updates.