Posts Learn Components Snippets Categories Tags Tools new About
/

How to make PATCH Request with Fetch API

Learn how to make the PATCH request with the Fetch API

Created on Aug 31, 2021

6797 views

In this snippet, you will learn how to update a resource with the Fetch API using the PATCH method. We'll be calling the external fake API to test this so let's get started.
The external fake API that we'll be calling is the "JSONPlaceholder" and below is the endpoint.
https://jsonplaceholder.typicode.com/posts/1

Updating Resource with Fetch API


To update a resource with the Fetch API is very simple and straightforward, all you have to pass in is the URL of the endpoint as the 1st parameter and an object which contains the details of the method, headers, and body as the 2nd parameter.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PATCH',
  body: JSON.stringify({
    title: 'foo',
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));
To see the response you can open the browser console tab and you will see it being log there.

Fetch PATCH Request Response


The output will be as follows, do note that the resource will not be really updated on the server but it will be faked as if.
{
  id: 1,
  title: 'foo',
  body: '...',
  userId: 1
}

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for How to make PATCH Request with Fetch API

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components
)