Fetch! Not Just for Dogs Anymore!

In Phase 3 and Phase 4 of the Flatiron School’s Software Engineering bootcamp, the focus is on creating backend API’s and coherent databases. In Phase 4, integrating the backend and frontend was a main focus of Project Week. While moving data from the frontend to the backend and vice versa is only one step, it is a crucial “make or break” component of your app. Without this data exchange, the front and back of your app are two separate entities, leaving both components purposeless. This “last-mile delivery” of data may be the most important part of your app.

In JavaScript and React, a “fetch” is used to send data back and forth from the frontend and backend. There are different types of fetch that we use depending on what we want to do with the data. A "GET" will retrieve data from the API, a "POST" will send a new piece of data from the frontend, "PATCH" and "PUT" will modify data on the backend using data from the frontend, and a "DELETE" will remove data specified on the frontend from the backend.

The method by which we will get the data from the API to the frontend is called a “GET” request. You do not need to specify in the fetch request if it is a “GET”. For example:

fetch('https://fakesite.com/api')
  .then(response => response.json())
  .then(resp => console.log(resp);

In this fetch request, we are telling the fetch where to look with a URL in the first line. The fact that we are performing a "GET" is implied as we have not specified what fetch we are doing. The second line is telling the fetch that we are expecting the response data in JSON format. This can be JSON, text, specific form data or other formats depending on what you are doing. The third line console.logs the response. You can also assign this to a variable and use the data elsewhere in your application.

Performing a "POST", "PATCH", and "PUT" require more information than a "GET", but are quite similar to each other. In fact, the syntax is the same for all, it's just the data and what's done with it on the backend that are different. Here's an example:

            fetch("https://fakesite.com/api", {
            method: "POST",
            headers: {"Content-Type" : "application/json"},
            body: JSON.stringify({_this will be the data object you are sending_})
        })
            .then(resp => resp.json())
            .then(data => console.log(data))

You can see on the second line that we have had to specify what fetch method we are wanting to use. The third line tells the API that we are sending JSON data. Again, this may vary depending on your requirements. The fourth line converts your data to JSON format. This will send your object to the API and create a new item in the array. "PATCH" and "PUT" function similarly, but you have to specify which object in the array you are addressing. Also, with a "PUT" you have to enter every value for an object. For a "PATCH" you only have to enter data you wish to modify.

To delete and object from an array is much simpler than the other fetch methods. A typical "DELETE" request looks like this:

   fetch('https://fakesite.com/api', {
        method: 'DELETE',
      })

You will have to have an object specified to make the "DELETE" work. There are multiple ways to do this, but we are not going to touch that in this blog post! You can also return confirmation messages or other things if you wish to after the object is deleted.

This blog post is definitely not earth-shattering. As usual, I took a subject that I didn't feel fully comfortable with and studied it so I could explain it, and this helps my comprehension!a