Querying Covalent API using ReactJS Hooks

Building with the Covalent API is a breeze! A cool breeze! You can take that literally! I am always of the opinion that Covalent represents the easiest point of entry for web2 developers and data scientists to begin and immediately start making sense of Blockchain data!

In this article using a simple app to consume one endpoint GET All Chain Status, I’ll explain how you can start consuming the Covalent API as a web2developer using either Axios or Fetch library to make requests to the API and display it in your app. We will use the create-react-app library to initialize the project.

Outlined are the steps:

1. Initialize project using create react app
2. Install required HTTP client dependencies
3. Consume Covalent API
4. Display data on the Frontend

Initialize project using create react app

ReactJS is a JavaScript library for building user interfaces. This article assumes that you already have knowledge of building apps using ReactJS. We will simply have a high-level overview of the basic commands you can use to start building this project

Open a terminal and run the following commands to create a new react app

npx create-react-app my-app
cd my-app
npm start

The first commands create a new shiny react app called my-app. The second command is then to change the directory into the my-app folder and then using the third commandnpm start, you can then run the app which is then available at http://localhost:3000

Your shiny new react app

Install required HTTP client dependencies

For this project, we will use Axios and Fetch to consume the Covalent API. Axios and Fetch are primarily similar in functionality. They are both HTTP request libraries. It is recommended to use either of them and not both at the same time. Based on personal preference, many developers use one as against the other. We use both in this article to demonstrate their basic usage when wrangling data using the Covalent API.

As mentioned earlier, it is recommended to use one of the two libraries, you can install using the command

When using Axios npm install axios and when using Fetch npm install fetch

Consume Covalent API

At the beginning of the article, it was mentioned that we will be querying the GET All Chain Statusendpoint as an example. Visit Covalent API docs and there you will find the resource on how to wrangle data using a particular endpoint. First, you will have to sign up for an API Key.

First, open my-app in your favorite text editor and go to the app.js file where we will write the example code. At this point the app.js contains the skeleton code which currently displays the content on the frontend.

We have the HTTP client installed and then we can following a sequential step to consume the Covalent API.

Using Fetch

We are using React Hooks and will be using the following React hooks, useState and useEffect .

useState is a Hook that let’s you add state to React function components. useEffect allows a user perform side effects in function components.

First, add the hooks to the app.js on the first line

import { useState, useEffect} from "react";

Update the App function by setting a state where the items returned from the endpoint will be “stored”.

const [items, setItems] = useState([]);

Next will be to write a simple async/awaitfunction to fetch the data from the endpoint. We will call this function getData

const getData = async () => {
     const response = await fetch("https://api.covalenthq.com/v1/chains/status/?key='your-api-key'")
     const data = response.json()
     setItems(data.data.items)
}

We parse the url containing the endpoint and your-api-key into the fetch method. Then set a const data which will hold the response as a JSON object which is the default response format of the Covalent API. The setItems is the state function that updates the items array in the state.

The getData() function will be called into the useEffect hook to prevent the app from multiple re-renders.

useEffect(() => {
   getData()
}, [])

If you add a console.log statement to return the data, you should see the data via the console in your web browser.

Console showing returned data from the API

Using Axios

First, you have to import the axios package into the app.js file

import axios from "axios";

Update the getData function to use axios to make the requests in a try-catch block.

try {
      const response = await axios.get("https://api.covalenthq.com/v1/chains/status/?key='your-key'");
      setItems(response.data.data.items)
} catch (err) {
        console.error(err);
}

You can confirm that the data is returned by checking the console response.

Display data on the Frontend

This is by far the simplest part of the entire process! All you have to do is map over the itemsarray in the response and return the information which you so desire. For this use case, we will simply return the data in an unordered list.

First, clean out the code in the header block in the app.js file leaving only the divstatement, you can add text such as Welcome in between the divs and save. Now, you will see the text “Welcome” displayed on the screen. Using curly braces, we will map over the items and display each item name.

<ul>
 {items.map(item => {
                    <li key={item.chain_id}>
                        {item.name}
                    </li>
                       }
               )}
</ul>

Your app.js should look like this:

Conclusion

There you have it, how to consume the Covalent API using React Hooks and display the data on the frontend! You can begin with this as a starting point and style your app and also consume multiple endpoints.

If you have any further questions, you can reach me on Discord on the Covalent Discord server and on Twitter. Kindly Tweet and share the article so that others can find it as well!

Thank you for reading the article. I’m glad that you found it useful. Please, leave some claps 👏 on the article. I’ll be grateful you did! Leaving claps will also enable others to find the article! Thank you! 🤗