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.
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.
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.
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
}
