How to use Bitquery APIs with React JS?

gaurav · June 9, 2021, 4:37pm

ReactJS is one of the most popular open-source, JavaScript frontend libraries, used to make dynamic UI components and user interfaces is extensively used by developers all across the globe. ReactJS is maintained primarily by Facebook and a group of numerous individual developers and organizations.

While there are a couple of popular libraries which are made to interact with GraphQL APIs from a ReactJS application, there are many different ways to fetch data with GraphQL.

We’ll be discussing the one major way of connecting a ReactJS application to Bigquery’s GraphQL API.

Sign up to Bitquery.io

If you are new to Bitquery’s interface, go to GraphQL IDE.

From here, sign up with your credentials. You might get a confirmation email on your registered email address.

After you are signed up, you would be redirected to GraphQL IDE from where you can get your unique API key.

Using Fetch API

Using the fetch API is by far the easiest way to connect Bitquery’s GraphQL API with a ReactJS application. The fetch API is included in all modern browsers so, we do not need to add a third-party library to use the fetch API’s functionalities.

Creating a ReactJS application (sample)

Assuming that npm is already installed in your system, open the terminal and navigate to the folder where you want to create your ReactJS application. Then, run the following command:

Windows: npx create-react-app bitquery-react-one

MacOS: create-react-app bitquery-react-one

Navigate to the folder and you’ll see

Making changes to the ReactJS application for GraphQL integration

Now, open a terminal and run the following commands:

npm install react-query

Now, in the src/index.js, the <App /> inside the ReactDOM.render() has to be wrapped around with the <QueryClientProvider > which is a component of the react-query library installed in the previous step using npm.

gist.github.com

https://gist.github.com/sayon-bitquery/b9eae3daebe7b899038ece7f33c37f3e.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { QueryClient, QueryClientProvider } from "react-query";

const client = new QueryClient();

ReactDOM.render(

This file has been truncated. show original

Now, in the src/App.js file, import { useQuery } from ‘react-query’ and make a variable as the endpoint which saves the API endpoint of BitQuery’s GraphQL API i.e. https://graphql/bitquery.io/

gist.github.com

https://gist.github.com/sayon-bitquery/927b8f9c566edc1d400ef90d496489d2.js

app.js

import React from "react";
import { useQuery } from "react-query";

const endpoint = "https://graphql.bitquery.io/";
const QUERY = `
{
  bitcoin {
    blocks(options: {limit: 2}){
      height
      blockHash

This file has been truncated. show original

One can find the API endpoint and API key from the API KEY dropdown option in the profile section of __TITLE__

Next step, is to make a variable that would take a GraphQL query and execute it in Bitquery’s API through the endpoint.

gist.github.com

https://gist.github.com/sayon-bitquery/edcf5680e61a39a06df1ff746b549392.js

app.js

export default function App() {
  const { data, isLoading, error } = useQuery("bitcoin", () => { //launches
    return fetch(endpoint, {
      method: "POST",
      headers: { 
        "Content-Type": "application/json",
        "X-API-KEY": "YOUR API KEY"
      },
      body: JSON.stringify({ query: QUERY }) // ({ QUERY })
    })

This file has been truncated. show original

In the App() of the src/App.js we’ll then make a React component that will have the data from the useQuery function which in turn uses the fetch API and also, we need to specify a header that includes the content type of the data that we want back from our request. In this case, it is JSON data.

gist.github.com

https://gist.github.com/sayon-bitquery/ab0f4494640330aa2d832b44861bea4c.js

app.js


export default function App() {
  const { data, isLoading, error } = useQuery("bitcoin", () => { //launches
    return fetch(endpoint, {
      method: "POST",
      headers: { 
        "Content-Type": "application/json",
        "X-API-KEY": "YOUR API KEY"
      },
      body: JSON.stringify({ query: QUERY }) // ({ QUERY })

This file has been truncated. show original

Inside the header, we need to specify the API KEY of Bitquery’s GraphQL API which is unique to every user using the “X-API-KEY”: “Your API KEY”.
You also need to stringify the object that you’re sending as your payload with a query property that is set to your QUERY variable.
Finally, display the data as shown

gist.github.com

https://gist.github.com/sayon-bitquery/45c718e6138a94b1c375be50cb518da6.js

app.js

  return (
    <div>
      <h1>BitQuery & React</h1>
      <ul>
        {data.bitcoin.blocks.map((query) => (
          <li key={query.height}>{query.blockHash}</li>
        ))}
      </ul>
    </div>
  );

To start your development server, run the following command in your terminal: npm start

The final React application is shown above which is successfully able to fetch the blockHash of two bitcoin blocks.

PS: sayon-bitquery’s gists (github.com) is the gist.github.com repository for the Gists used in this project.

Topic		Replies	Views
How to use Bitquery APIs with NodeJS GraphQL Tutorials nodejs	0	1417	July 28, 2021
How To Implement Bitquery GraphQL API in React JS GraphQL API	1	644	December 28, 2021
How to create a real-time blockchain data app in React GraphQL Tutorials support , closed	0	686	May 8, 2023
Getting data in the form of a CSV file from Bitquery GraphQL API using NodeJS GraphQL Tutorials nodejs , closed	2	538	July 10, 2021
Bitquery GraphQL API Python Package (bitquery-python) GraphQL Tutorials api , python	0	589	March 31, 2022

How to use Bitquery APIs with React JS?

Sign up to Bitquery.io

Using Fetch API

Related topics