The Most Effective Method For Managing API Calls In Your React Or React Native Project
When we start building React apps, our main goal is to implement the feature. No matter what code we write, it should work.
But by the time we improve this habit, instead of just making the code work, we should make it reusable, easily understandable, and things like that, so anyone who sees this code learns something new.
So today in the chapter of writing clean code, we are going to talk about the API calls , which are one of the most important parts of React apps.
In the above code, the code is trying to update a particular user’s particular post’s particular comment. This will work very well and will not cause any issues. But if we have to pass some users’s authorisation in the headers,
The user’s auth token is added in the headers, but we may also need to add a manual token so we can verify that the api call is made from our app.
Now, this is only one of hundreds of api calls in our app. The only thing which we will not use in other api calls is the route of ‘user/post/comment’ and the data passed in the params. And if we have to make the same API call again with different ids and parameters, we’ll have to make the same 33 line method in that file also.
Now that was an example of a bad way to call an API. In the next steps I’ll show you what files and method structure I used to make a clean, reusable, and affective way to call an API.
We are going to make a class in the ApiManger file and declare all the api methods And a BASEURL. Like this,
The next step is to create the endpoint in the EndPoints File.
Now we will define the updateComment method in the ApiManager class and import the EndPoints files
You may be wondering why the base url and endpoints are in separate files and then concatenated even though BASEURL is going to be same always.
That’s because if we are going to have the same base URL forever, we can keep the BASEURL in the endpoints file, but we may also need to switch between production and staging or may be sometimes on localhost like this.
Now the main part of calling an API, authentication in the headers
This is the only solution to one problem, which is if we have to make the same api call again in any other file, we will not have to do the same thing again. But if we have like four other put methods, the ids or routes may be different, but other things will be the same, like authorization in headers, put method and stringifying the parameters etc.
The same thing is going to be in all the other api methods, so we can use axios and interceptor for that, but if you don’t want to increase your app size by 1.3MB, I have a better solution.
To not make the same thing copy-paste again and again, we are just going to create a class which will have all the four methods of api call.
Since we have the same basis for all the API requests, we can just add all the required headers in the apiRequest method and it will be the same for all.
One final thing we can do in this file is add the BASEURL here instead of ApiManger So all the constants are stored in one file.
So, when we return to our ApiManager class, it will be cleaner and more usable.
Now that all the classes and headers are set, we can go back to updating our user’s post’s comment.
Thank you to everyone for reading the article This is my first time writing any article on any site. There may be some grammatical mistakes or there may be some explanation mistakes. Please comment if you think there is any better way for managing api calls which you use and also tell me what you think about this.