CRUD: You Just Got Served (Server Communication)
Tags: javascript, beginners, tutorial, webdev
Published: 2023-02-13 05:29:32

In this post I am talking about CRUD operations in server communication.  During server communication there is communication between the client (also known as the frontend) and the server (also known as the backend);


![client server relationship](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8znxpi40zd4ojprh3y86.png)

The client and server communicate through HTTP (Hypertext Transfer Protocol).  HTTP is the language browsers speak.  Like any language HTTP contains verbs.  These verbs correspond to each letter of CRUD and they include POST, GET, UPDATE, and DELETE respectively.

When we want to communicate with the server we use these verbs.  In JavaScript we use fetch requests.  Let me break it down for you.

This is the boilerplate code for a fetch request.

```
    fetch('http://domain_name/path', configurationObject)
    .then(response => response.json())
    .then(data => manipulate(data));
```
The first line `fetch('http://domain_name/path', configurationObject)` takes one or two arguments.  The first argument is a URL (uniform resource locator) which is where the request is sent.  The second argument is a configuration object which is used in `POST`, `PATCH`, and `DELETE` requests.  It is not used in `GET` requests.  This configuration object contains three attributes.

1. _Method_ which is either `POST`, `PATCH`, or `DELETE`.
2. _Headers_ (do not forget the 's') which is defines the content type as JSON (JavaScript Object Notation).
3. _Body_ which `JSON.stringify(object)` means to take the object (information being transmitted as key: value pairs) and convert it to JSON format.

```
const configurationObject = {
                method: "POST",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify(object)
            }
```
The first line of a fetch request returns a Promise object which resolves to a Response.  The next line `.then(response => response.json())` takes that Response object and converts it from JSON to a consumable object.  The last line `.then(data => manipulate(data))` takes the data object and uses it for DOM manipulation.

Now that I have finished talking about fetch lets talk about CRUD.

**The "R" in CRUD is Read.  The HTTP verb is `GET`.**  

I will talk about this first since it is easy and then we can slowly increase the difficulty.  Here is an example below.

```
    fetch('http://localhost:9292/muscles')
    .then(response => response.json())
    .then(data => setMuscles(data));
```
This fetch sends a `GET` request to the URL 'http://localhost:9292/muscles' and obtains data which is passed into a function `setMuscles`.  The data received is typically an array of objects.

**The "C" is create.  The HTTP verb is `POST`.**

Here we create data and request that it get `POST`ed to the server.

```
const newMuscle = {
 name: "deltoid",
 origin: "lateral one-third of the clavicle, acromion, the lower lip of the crest of the spine of the scapula",
 insertion: "deltoid tuberosity of the humerus",
 action: "abducts arm; anterior fibers flex & medially rotate the arm; posterior fibers extend & laterally rotate the arm",
 innervation: "axillary nerve (C5,6)",
 blood_supply: "posterior circumflex humeral a." 
}

fetch("http://localhost:9292/muscles", {
                method: "POST",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify(newMuscle)
            })
            .then(res=>res.json())
            .then(muscle=>setMuscles([...muscles, muscle]))
```
This fetch request is a little more complicated since we now have to pass a configuration object as an argument.  This configuration object contains our HTTP verb and data (newMuscle) that we want to persist to the server at "http://localhost:9292/muscles".  Notice that we still expect to receive data to do our DOM manipulation.  The data that we receive is similar to the `newMuscle` object that we sent but now it has a unique `id` number assigned to it.  It looks like this.

```
data  = {
 id: (some unique number) //note that a new id number has been assigned
 name: "deltoid",
 origin: "lateral one-third of the clavicle, acromion, the lower lip of the crest of the spine of the scapula",
 insertion: "deltoid tuberosity of the humerus",
 action: "abducts arm; anterior fibers flex & medially rotate the arm; posterior fibers extend & laterally rotate the arm",
 innervation: "axillary nerve (C5,6)",
 blood_supply: "posterior circumflex humeral a." 
}
```
**The "U" is update.  The HTTP verb is `PATCH`.**

Here we update data and request that it get `PATCH`ed in the server.

```
fetch(`http://localhost:9292/muscles/${muscle.id}`, {
                method: "PATCH",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify({action: "elevate scapula"})
            })
            .then(res=>res.json())
            .then(muscle=>onUpdate(muscle))
        closePopUp()
```
This fetch request is similar to a `POST` request since we still have to pass a configuration object as an argument.  However, this time we are changing an existing object on the server at "http://localhost:9292/muscles" by changing one or more attributes.  Note that an `id` number is required to find which object needs to be updated.

**The "D" is delete.  The HTTP verb is `DELETE`.**

This one is really easy.  A request is made to `DELETE` data.

```
        fetch(`http://localhost:9292/muscles/${id}`, {
            method: "DELETE"
        })
        .then(res=>res.json()) //this does not return anything
        .then(()=>onDelete(id)) //manipulate the DOM
```
All you really need is a URL, `id` number, and method of `DELETE`.  However, I use the last line to do DOM manipulation.

**In summary:**

- Create: POST
- Read: GET
- Update: UPDATE
- Delete: DELETE

With this post the CRUD movie trilogy is complete.  However, I'm sure we will see CRUD again as we journey into the domain of writing code.