How to Use HTTP PATCH Method in React JS

In this article, we are going to learn about HTTP Patch Method in React JS. Making a request using Patch method is a common thing when working with APIs. Since we know to access API, we mostly use fetch() and axios(). So we will make patch requests using these two methods.

What is HTTP PATCH Method in React JS?

Patch method is the same as put method, which basically sends data without showing background processes, but there is a difference between put and patch is, PUT is a method of modifying resources where the client sends data that updates the entire resource. In patch method, only modified resources will be updated.

Sending HTTP requests with any verb is made simple by the Fetch API (built-in) and libraries such as Axios. The Fetch API is a built-in browser method for performing HTTP requests, whereas Axios is an external package we must install in our project before using.

HTTP PATCH Method in React JS: Fetch()

The fetch() is a built-in JavaScript function which allows us to make network related requests. It is simple to use, and it doesn’t need any external package to use. It, basically, returns a promise that resolves to a response object, which is useful when accessing response data.

Let’s see an example, in the below example we have created a function in which we are going to use fetch an API using fetch(). We have put a URL of API in this fetch method, and we have to specify the type of response should in JSON format and method to PATCH, since default is GET. Now in body part we can add those fields which be modified like here email and first_name. Then we can just return this data as response and convert into JSON format again. If we log this data, we will get updated data.

let PatchRequest = () => {
// sending PATCH 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: "[email protected]",
	first_name: "react"
	})
})
	.then(function (response) {

	// console.log(response);
	return response.json();
	})
	.then(function (data) {
	console.log(data);
	});
};

PatchRequest();

HTTP PATCH Method in React JS: axios()

Axios is another popular library for making network requests in React. It is basically an external library which need to be imported and install in the React application. Axios is a promise based library that makes it easy when working with network requests. It is also much powerful and flexible method then fetch as well. Here is a basic example for Post method with axios:

Now in the below example, we have to import axios, in order to work with network requests. To use PATCH method in axios we can use axios.patch(). The axios.patch() method returns a promise, so we use the await keyword to wait for the response. and we can then modify data, and these data will automatically gets modified. we don’t need to convert it to the JSON format, We then log the response data to the console.

The Axios method is pretty simple and fewer code to work with, so axios looks much cleaner than fetch() method. One more thing to note that in order to use post method, we should use .catch(), in order to perform error handling and it is essential.

let PatchRequest = () => {
// sending PATCH request with Axios API in javascript
axios.patch("https://reqres.in/api/users/2", {
	
  email: '[email protected]',
  first_name: 'react'
})
.then(response => console.log(response.data))
.catch(error => console.error(error))
	
}
	PatchRequest()

HTTP PATCH Method in React JS: Class Components

As we have seen, both examples of fetch and axios method, you can implement these in any component either class or functional. In class component you should make API calls in componentDidMount() method and in functional component we often make API calls in useEffect() hook. Here is a basic example to understand:

Functional component:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      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: "[email protected]",
	       first_name: "Geeky"
	    })
     })
	.then(function (response) {

	console.log(response);
	return response.json();
	})
	.then(function (data) {
	console.log(data);
	});
};

PatchRequest();
, []);

   return (
      // ... consume here
   );
};

Class Component:

import React, { Component } from 'react';

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }

   componentDidMount() {
      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: "[email protected]",
	     first_name: "Geeky"
	     })
     })
	.then(function (response) {

	console.log(response);
	return response.json();
	})
	.then(function (data) {
	console.log(data);
	});
};

PatchRequest();

   }

   render() {
      
      return (
         // ... 
      );
   }
}

You may Also like: