How To Make Parallel API calls in React Applications

A Step by step guide with an example project

In web applications, all the data you show on the page should reside somewhere, for example, cache, database, storage account, etc. You need to fetch the data from the different sources and do some processing and then render the data on the UI. All the data can be accessed through APIs nowadays and most of the time the format would be in the JSON format.

Sometimes, making one API call is not enough you might need to get the data from different sources and these sources might be different APIs. We can make all the calls in parallel to decrease the latency of the application.

In this post, we will see how to make parallel API calls in React applications using Fetch and Axios. You can do API calls with either of these.

Prerequisites
Example Project
API Endpoints
UI Implementation and Integration
Call The APIs with Fetch and Promise.all
Call The APIs with Axios and Promise.all
Demo
Summary
Conclusion

Prerequisites

There are some prerequisites for this project. We need to have a NodeJS installed on your machine to install React-based dependencies. We need an editor to write the code. We are using a VSCode as an editor. There are many other editors as well to choose from such as web storm, atom, etc. Since we are writing the app in typescript you need to understand that as well.

Once you are on the NodeJS website you can install the LTS one. Click on it and follow the further instructions.

You can check whether NodeJS is installed or not with the following command. It gives you the version of the node is properly installed on your machine.

node -v

Let’s install the React CLI globally with the following commands. Make sure you install it globally so that you can use it from anywhere on your machine. The React CLI makes it easy to create an application that already works, right out of the box. You can generate components, etc.

// install globally
npm install -g create-react-app// check the version
npx create-react-app --version

Please go through these links if you are new to web development and make sure you understand how UI and API work together.

How To Develop and Build React App With NodeJS

How To Make API calls in React Applications

Example Project

Here is the example project in which we are making three API calls and combining them and loading the table. Those three calls take different times to complete.

// clone the project
git clone https://github.com/bbachi/react-api-parallel-calls.git

// ui
cd ui
npm install
npm start

// api
cd api
npm install
npm start

Here is the demo of the project.

We are making three API calls as shown below and we are waiting until all the calls are completed and then render the table in the UI.

API Endpoints

I have implemented three endpoints in NodeJS with the Express framework. You can refer to the below example project If you are not sure how to implement one.

How to write production-ready Node.js Rest API — Javascript version

How to write production-ready Node.js Rest API — Typescript version

Here is the simple server file which listens on port 3080 and exposes three endpoints. I am using setTimeOut function for the purpose of different latencies.

You can access these with the below endpoints. Make sure you are running the API.

// Endpoints

http://localhost:3080/api/users

http://localhost:3080/api/contacts

http://localhost:3080/api/addresses

UI Implementation and Integration

Since we have API Endpoints it’s time to implement the UI. The API is running on port 3080 and we need to proxy all the calls to the backend server in the development environment. We need to have this proxy in place in the package.json file.

Here is the detailed article on how to proxy to the backend server.

React — How To Proxy To Backend Server

Here is the service file in which we have all the calls implemented with the above endpoints.

Here are the component files in which we write HTML after making the calls. We will see how to implement it in the next section.

Call The APIs with Fetch and Promise.all

We can use either Promise.all or Promise.allSettled to combine all the calls. If all the calls are dependent on each other Promise.all is a good choice. If there is no dependency among all the calls and want to know the result of each call, Promise.allSettled is a good choice. Since we are showing all the calls info in the user table, we should use Promise.all.

Notice the last function added to the following file, we are passing all three calls to the Promise.all function as an array and mapping them to merge all the values and produce the result at the end.

Call The APIs with Axios and Promise.all

You need to install dependency first before you use it in the application. Let’s install Axios API with the following command.

npm install axios

Once it is installed and you need to import it in the services as below.

const axios = require('axios');

Demo

Here is the demo. We are making three API calls as shown below and we are waiting until all the calls are completed and then render the table in the UI.

Summary

In web applications, all the data you show on the page should reside somewhere, for example, cache, database, storage account, etc.
You need to fetch the data from the different sources and do some processing and then render the data on the UI.
All the data can be accessed through APIs nowadays and most of the time the format would be in the JSON format.
Sometimes, making one API call is not enough you might need to get the data from different sources and these sources might be different APIs. We can make all the calls in parallel to decrease the latency of the application.
We can use either Promise.all or Promise.allSettled to combine all the calls.
If all the calls are dependent on each other Promise.all is a good choice.
If there is no dependency among all the calls and want to know the result of each call, Promise.allSettled is a good choice.

Conclusion

It’s always a good idea to make parallel calls to reduce the latency and improve the performance of your application. In this post, we have seen how to make parallel API calls in React applications and we can see how to make calls in series in future posts.

Summarize