CRUD

Four operations are used to interact with back-end resources: create, read, update and delete. For each of them, there is a standard HTTP method.

Method	Description
POST	Create operation – creating a new resource.
GET	Read operation – getting a set of resources or a single resource by their identifier.
PUT & PATCH	Update operation – updating a resource by its identifier.
DELETE	Delete operation – deleting a resource by its identifier

Let’s make requests to JSONPlaceholder API, which provides a collection of fake posts in the /posts resource, represented by objects with such properties as id, author and body.

Reading

The GET HTTP method is used to get existing data. The fetch() method should send a GET request without a body to the server. The back-end, upon receiving the request, will process it and return the necessary resources in its response.

Let's get an array of all posts. To do this, access the /posts resource described in the back-end documentation. The fetch() method makes a GET request by default, so it is not necessary to override the request options.

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(posts => console.log(posts))
  .catch(error => console.log(error));

Let's get a post by ID (id property) by adding it to the /posts/:postId resource. The last part of the path is called a dynamic parameter, which is described in the documentation as /resource/:parameter. The resource is permanent, it is the path to the entire collection, whereas the parameter value changes for each of its items.

// Change this number to fetch different post
const postId = 1;

fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
  .then(response => response.json())
  .then(post => console.log(post))
  .catch(error => console.log(error));

Creation

The POST method is used to add a new resource. The fetch() method must send a POST request to the server, having an object with the author and body fields in the body; the database will automatically create the identifier. Such request will result in an object added to the database.

const postToAdd = {
  author: "Mango",
  body: "CRUD is awesome",
};

const options = {
  method: "POST",
  body: JSON.stringify(postToAdd),
  headers: {
    "Content-Type": "application/json; charset=UTF-8",
  },
};

fetch("https://jsonplaceholder.typicode.com/posts", options)
  .then(response => response.json())
  .then(post => console.log(post))
  .catch(error => console.log(error));

A request to create a post is made by accessing the /posts resource, but in the settings of the fetch() method, the HTTP method is changed to POST. This way, the back-end knows that, instead of reading what already exists, it should create a new resource in this collection.

The request body must be a string because the HTTP protocol transfers everything as text. When transferring complex data types, they must be converted to a string using the JSON.stringify() method. Do not forget to add the Content-Type header, which specifies the transferred data type for the back-end.

In response, if everything is fine, you will receive JSON with the added id. The identifier will be unique for each object.

{
  "id": 1,
  "author": "Mango",
  "content": "CRUD is awesome"
}

Updating

The PUT and PATCH methods are used to update existing data. Which method to use will be specified in the back-end documentation. The fetch() method must send a request to the server, having the object with fields to change in the body. The path indicates in which collection and which item should be updated. The back-end, upon receiving the request, will process it and return the updated resource in response.

// Change value of id property to update different post
const postToUpdate = {
  id: 1,
  body: "CRUD is really awesome",
};

const options = {
  method: "PATCH",
  body: JSON.stringify(postToUpdate),
  headers: {
    "Content-Type": "application/json; charset=UTF-8",
  },
};

fetch(`https://jsonplaceholder.typicode.com/posts/${postToUpdate.id}`, options)
  .then(response => response.json())
  .then(post => console.log(post))
  .catch(error => console.log("ERROR" + error));

In response, if everything is fine, you will receive the updated object.

{
  id: 1,
  author: 'Mango',
  content: 'CRUD is really awesome',
}

Note

The PATCH method replaces the values passed in the property request body in an existing resource. The PUT method completely replaces the resource.

Deletion

The DELETE method is used to delete existing data. The fetch() method should send the DELETE request without a body to the server. The path indicates in which collection and which item to delete. The back-end, upon receiving the request, will process it, remove the resource from the collection and return the result status in its response.

const postIdToDelete = 1;

fetch(`https://jsonplaceholder.typicode.com/posts/${postIdToDelete}`, {
  method: "DELETE",
})
  .then(() => console.log("Post deleted"))
  .catch(error => console.log("Error:", error));