Making a POST request using json-server

Welcome

Hi everyone, it has definitely been a while. This tutorial is mainly for beginners like myself, and by creating this post, I will refresh my knowledge to solidify my skills. Many of you already know how to do these things, but hopefully someone out there can find this post useful. For my current React project that I am working on, I need to incorporate a GET request and a POST request as some of the requirements. In my last blog post, I wrote about how to use json-server. Well, now we are gonna learn how to make a POST request! It will be very exciting, and this blog post will also serve as a brain refresher for me. So once you have json-server set up (refer to my last post if you don't know how), you are going to run it by typing into your terminal:

$ json-server --watch db.json

POST Request Basics

Once your json-server is set up and has some data, you are going to create a basic POST request. There are a few requirements to make a post request. Alongside the URL you will be posting to, you need to also have a configuration object that will pretty much explain what the post request will be. For visual aid, here is a basic example of what a post request will look like:

fetch(URL_HERE, {
    method: 'POST',
    headers: {
       'Content-Type': 'application/json',
    }
    body: JSON.stringify({
       'ID': 2,
       'Name': 'John',
       'lastName': 'Doe'
    })
}).then(response => response.json())
.then(console.log(newPerson)

What is all that?

It is very important to have a body in your configuration object when making a POST request. Just think about it, how can you try to POST something, when the server does not know what you want to POST? It is simply not possible. This configuration object will tell the server important information on what you want to POST. Again, this is a pretty basic outline. You can maybe apply this particular example I created to some sort of function that adds a new employee to a database. Another important thing to note is the method. Whenever you make a fetch request that does not include a configuration object, it is automatically interpreted as a GET request. To make any request other than GET, you will have to specify the method in which you are trying to use, in this example it would be POST since we are making a POST request. The header will communicate what kind of data we will be sending. The JSON.stringify method is really neat. It converts a javascript object into a JSON string. We need to do this in order to communicate with the server. Further along, you will see .then() twice. The first instance is to return a promise object. The last .then, in our particular example, will just print out the data into the console. This is especially handy to do in order to check if the POST was made correctly. Obviously, you can manipulate the data however you need. For example, with this particular instance you can display the new employee onto the home page of a web application if you wanted to. Congratulations, you just learned how to make a basic POST request using JSON-server!