REST architecture has become very common among developers around the world. But it is not always clear how you can easily and conveniently set up work with the server. The creation of a small API client, a wrapper around the selected API is a simple and effective solution. You can use Axios, fetch, or any other API to communicate with the server — it doesn’t matter at all for creating the API client! In this article, I will use the Fetch API as an example.
To quickly install the starter project template, you can use this repository: https://github.com/JIeCoRyI3/api-client-topic. We will use the service https://jsonplaceholder.typicode.com/ as our back-end.
In the basic template, we have sections for each endpoint that we connect to our application. At the end of the article, all endpoints will work for you.
Create an API-client
For convenient work with the server API, we will create a folder. All files for working with the server will be stored in this folder. Thanks to this, all settings will be encapsulated in one place, and our components will not even know about the implementation of methods inside our API client.
Let’s start with the basic configuration of the API client. In it, we will set the base URL where our methods will refer. Also here we will create a method for sending a request using the Fetch API and a method for creating an object with parameters for the Fetch API.
Creation of endpoints
Now everything is ready to create our first method for working with the server. Let’s create an apiClient.js file, where we will connect our basic config and create an endpoint receiving a post.
Create an endpoint:
Connect API-client to App:
And displaying a response in the Endpoint component:
As you can see, all the logic for connecting to the server is hidden in our API client. When you click on the button, the server response is correctly displayed in our element.
BUT! We can hide even more logic inside our API client! Let’s try to change our code so that the component receives a ready-made response body.
And update our method inside a component:
All is ready!
Now we can connect any endpoints to our API client. In this case, the components do not know about the implementation of the methods of the API client. All logic is encapsulated in one place.
Let’s create another POST request to see how our methods work with data.
Connecting to App:
As you can see, we easily set up the API by creating a wrapper around the Fetch API. We can easily use this approach for any other API. Also, we can easily split and scale our apiClient. You can see an example of this in the finished project at the link: https://github.com/JIeCoRyI3/api-client-topic/tree/ready-project. But first, try connecting the rest of the endpoints yourself, and also think about how you could handle errors.
This approach makes it easy to test the API client because we are working with a simple object. Also, all the logic of work is stored conveniently in one place and we can always quickly edit what we need.