# How to use Bitquery APIs with React JS? **URL:** \ **Category:** GraphQL Tutorials\ **Tags:** reactjs\ **Created:** [June 9, 2021, 4:37pm UTC](https://community.bitquery.io/t/how-to-use-bitquery-apis-with-react-js/143 "2021-06-09T16:37:45Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![gaurav](https://avatars.discourse-cdn.com/v4/letter/g/b487fb/32.png) [@gaurav](https://community.bitquery.io/u/gaurav)\ **Post date:** [June 9, 2021, 4:37pm UTC](https://community.bitquery.io/t/how-to-use-bitquery-apis-with-react-js/143/1 "2021-06-09T16:37:45Z")
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](http://Bitquery.io) If you are new to Bitquery’s interface, go to [GraphQL IDE - Blockchain Data API](https://graphql.bitquery.io/ide). ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/027e112bce7c939331d257e5a3c765c69a849ff0.png) From here, sign up with your credentials. You might get a confirmation email on your registered email address. ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/a33464ae267c8b81fbb8c786268b208f38e54394.png) After you are signed up, you would be redirected to [GraphQL IDE - Blockchain Data API](https://graphql.bitquery.io/ide) from where you can get your unique API key. ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/5f0b8b00ae92e551b4a5d77293b688764b847600.png) ## 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 ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/43abca03ddef65a4ddd95792287401ba1add78a6.png) 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 `` inside the `ReactDOM.render()` has to be wrapped around with the `` which is a component of the react-query library installed in the previous step using npm. [https://gist.github.com/sayon-bitquery/b9eae3daebe7b899038ece7f33c37f3e.js](https://gist.github.com/sayon-bitquery/b9eae3daebe7b899038ece7f33c37f3e.js) 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/bitquery.io/](https://graphql/bitquery.io/) [https://gist.github.com/sayon-bitquery/927b8f9c566edc1d400ef90d496489d2.js](https://gist.github.com/sayon-bitquery/927b8f9c566edc1d400ef90d496489d2.js) 1. One can find the API endpoint and API key from the API KEY dropdown option in the profile section of [GraphQL IDE - Blockchain Data API](https://graphql.bitquery.io/ide/) ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/3c96e1c504706faf5e5c156e0d407dbe70e9dfc3.png) 1. Next step, is to make a variable that would take a GraphQL query and execute it in Bitquery’s API through the endpoint. [https://gist.github.com/sayon-bitquery/edcf5680e61a39a06df1ff746b549392.js](https://gist.github.com/sayon-bitquery/edcf5680e61a39a06df1ff746b549392.js) 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. [https://gist.github.com/sayon-bitquery/ab0f4494640330aa2d832b44861bea4c.js](https://gist.github.com/sayon-bitquery/ab0f4494640330aa2d832b44861bea4c.js) 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 [https://gist.github.com/sayon-bitquery/45c718e6138a94b1c375be50cb518da6.js](https://gist.github.com/sayon-bitquery/45c718e6138a94b1c375be50cb518da6.js) 1. To start your development server, run the following command in your terminal: `npm start` ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/25a372483a7d05fe23eb997e4de687521ff598ab.png) 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)](https://gist.github.com/sayon-bitquery) is the [gist.github.com](http://gist.github.com) repository for the Gists used in this project.