How to use Bitquery APIs with React JS?

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

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)

  1. 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

  1. Navigate to the folder and you’ll see

Making changes to the ReactJS application for GraphQL integration

  1. Now, open a terminal and run the following commands:

npm install react-query

  1. 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.
  1. 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/
  1. One can find the API endpoint and API key from the API KEY dropdown option in the profile section of __TITLE__

  1. Next step, is to make a variable that would take a GraphQL query and execute it in Bitquery’s API through the endpoint.
  1. 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.
  1. 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”.
  2. 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.
  3. Finally, display the data as shown
  1. 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 ( is the repository for the Gists used in this project.