Skip to main content

How to Get Transaction Data with QuickNode's Graph API using React and JavaScript

Updated on
Aug 18, 2023

11 min read

Overview

QuickNode's Graph API provides a powerful and flexible way to retrieve blockchain data. In this tutorial, we'll show you how to build a React app that interacts with QuickNode's Graph API to retrieve transaction data!

What You Will Do

  • Learn about QuickNode's Graph API
  • Build a React app that fetches transaction data from an Ethereum address using QuickNode's Graph API

What You Will Need

  • Basic knowledge of JavaScript, React, and blockchain concepts (you can get started here); No GraphQL experience needed
  • A QuickNode account (you can create one for free here)
  • A QuickNode Graph API key
  • React Installed

What is GraphQL?

GraphQL is a modern way of fetching and manipulating data for client applications, and it's gaining popularity among developers for its flexibility and efficiency.

If you're familiar with RESTful APIs, think of GraphQL as an evolution of that approach. Instead of making multiple requests for different resources to get the data you need, you can make a single request to a GraphQL API and get back only the data you requested in the exact format you need it.

What is QuickNode's Graph API

The QuickNode Graph API allows developers to query blockchain data using the GraphQL query language. The major differences between RPC and Graph API are that the Graph API enables developers to get all the data they need in one request. For example, instead of making a separate call to the Token API and NFT API using RPC, you can query the same information in just one request with the Graph API.

Other key differences between the QuickNode RPC API and Graph API include the following:

QuickNode RPC APIQuickNode Graph API
Auth & SecurityAPI key, JWT, IP/Referrer Whitelisting, Domain maskingAPI Key
Call StructureIdentical for all callsDifferent depending on data needed
Token & NFT DataToken & NFT metadataToken & NFT metadata
NFT EventsNFT Events (transfers)NFT Events (transfer, mint, burn, swap)
NFT Image SizeOriginal image in one sizeImages in Multiple sizes
Additional FeaturesSend transactions, do write operations, and other standard blockchain JSON-RPC callsENS data, Marketplace metadata, Order history, and OHLCV (Open, High, Low, Close and Volume) history

QuickNode's Graph API also enables features and use cases such as:

Multi-chain support

QuickNode's Graph API supports a wide range of blockchain networks, including Ethereum, Sepolia testnet, and Polygon mainnet (with other blockchains coming soon!). You can use the same API key and syntax to retrieve data from all of these networks.

Analytics & Stats

QuickNode's Graph API provides powerful analytics and stats on blockchain data. You can use this data to monitor network activity, track specific transactions, and gain insights into blockchain trends.

Depth of Data

QuickNode's Graph API provides a deep level of detail on blockchain transactions. You can retrieve information such as transaction hash, block number, gas price, and much more.

Playground

QuickNode also offers an in-browser playground where you can interact with the Graph API through an interactive console.

QuickNode Graph API Playground

Note that your Graph API rate limit is based on your QuickNode Plan. If you need a higher rate limit, contact us to learn more about our Enterprise plan.

Creating a QuickNode Graph API Key

Before you can use QuickNode's Graph API, you need to create an account and obtain an API key. You can do this by clicking the Graph API tab on the left side, then clicking Create an API Key. Once your credentials are created, you'll see a page similar to the following:

Graph API page

Save this API key, as you'll need it when creating the React app that fetches transaction data.

Building the React app with QuickNode's Graph API

Now that we have set up our account and know more about the Graph API, we can start querying data. We can make requests to the Graph API either via the QuickNode Playground or through our own interface such as a script or app. In both cases, the underlying process to interacting with the Graph API will be sending a POST request to https://api.quicknode.com/graphql with a JSON body containing the payload, and an x-api-key heading containing your QuickNode Graph API key.

For the purpose of this tutorial, we'll create our own user interface using React, but keep in mind that you can also make the same type of request using libraries like Python, JavaScript, cURL, and PHP (examples can be found here). Let's get started!

With React installed, open a terminal window and run the following command to create a React project and install the required dependencies. Our project will be called quicknode-graphapi-ux and will install the bootstrap and react-bootstrap libraries to enhance the look of the app we build.

npx create-react-app quicknode-graphapi-ux && cd quicknode-graphapi-ux && npm i bootstrap react-bootstrap 

With our dependencies installed, we can now open up the project in a code editor (e.g., VSCode) and start writing code!

In the App.js file, replace the existing code with the following code:

import React, { useState } from "react";
import Table from "react-bootstrap/Table";
import { ethers } from "ethers";
import "bootstrap/dist/css/bootstrap.min.css";

const App = () => {
const [inputValue, setInputValue] = useState("");
const [transactionData, setTransactionData] = useState(null);

const handleSubmit = async () => {
try {
const response = await fetch("https://api.quicknode.com/graphql", {
method: "POST",
headers: {
"Content-Type": "application/json",
"x-api-key": "YOUR_QUICKNODE_GRAPH_API_KEY"
},
body: JSON.stringify({
query: `query walletTransactions($filter: TransactionsFilterInput){
ethereum {
transactions(
first: 10
orderDirection: DESC
filter: $filter
) {
edges {
node {
blockTimestamp
fromAddress
hash
value
}
}
}
}
}
`,
variables: {
filter: {
toAddress: inputValue,
},
},
})
});
const responseData = await response.json();
setTransactionData(responseData.data.ethereum.transactions.edges);
} catch (error) {
console.error(error);
}
};

const renderTableData = () => {
if (!transactionData) return null;
return transactionData.map((edge) => {
const valueInEth = ethers.utils.formatEther(edge.node.value);
return (
<tr key={edge.node.hash}>
<td>{edge.node.blockTimestamp}</td>
<td>{edge.node.hash}</td>
<td>{edge.node.fromAddress}</td>
<td>{valueInEth}</td>
</tr>
)});
};

return (
<div className="container" style={{ marginTop: "50px" }}>
<div className="row justify-content-center">
<img
src="https://i.ibb.co/3d3fbjH/qn.png"
alt="quicknode-logo"
style={{ width: "200px", marginBottom: "30px" }}
/>
</div>
<div className="row justify-content-center">
<div className="col-md-6">
<input
type="text"
className="form-control"
placeholder="Enter an Ethereum address"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
</div>
<div className="col-md-2">
<button className="btn btn-primary" onClick={handleSubmit}>
Search
</button>
</div>
</div>
<div className="row justify-content-center" style={{ marginTop: "50px" }}>
{transactionData && (
<Table striped bordered hover>
<thead>
<tr>
<th>Block Timestamp</th>
<th>Transaction Hash</th>
<th>From Address</th>
<th>Value</th>
</tr>
</thead>
<tbody>{renderTableData()}</tbody>
</Table>
)}
</div>
</div>
);
};

export default App;

Then on line 16, replace the YOUR_QUICKNODE_GRAPH_API_KEY placeholder with your QuickNode Graph API key and save the file. The code above contains all the logic for our React app to take in an address from an input box and request transaction data from the Graph API, and return its results in a table. In the following sections, we will break down each part of the code so you can better understand how it operates. Feel free to move on to the Running the App section if you don't need an explanation of the code.

The code starts with importing React and other necessary libraries such as Table from "react-bootstrap/Table" and ethers from "ethers". It then initializes a function component called App using the arrow function syntax.

Within the App component, there are two state variables declared using the useState hook: inputValue and transactionData. inputValue stores the user input, while transactionData stores the response from the API.

The handleSubmit function is responsible for fetching transaction data from the API. It sends a POST request to "https://api.quicknode.com/graphql" with the API key in the header and the query and variables in the body. The query is a GraphQL query that specifies what data to retrieve, while the variables are used to filter the data based on the user's input.

After getting the response from the API, the function updates the transactionData state variable with the retrieved data. The renderTableData function maps through the transactionData and returns a table row for each transaction with relevant details like block timestamp, transaction hash, from address, and transaction value. We use ethers to convert the wei values to ETH so that it's more interpretable.

Finally, the function returns a container that includes a QuickNode logo, an input field for the user to enter the destination wallet address, a button to submit the input, and a table to display the transaction data. If there is no data to display, the table is not rendered.

Running the React App and Requesting Transaction Data from QuickNode's Graph API

Now that our code is set up and our API credentials are updated in App.js, we can start the app. In your terminal window, run the following command within your project's root directory (i.e., quicknode-graphapi-ux):

npm start

You should see something similar too:

QuickNode React App Running

Input an Ethereum address (e.g., 0xf977814e90da44bfa03b6295a0616a897441acec) and click search. You should then see the transactions listed in the table:

QuickNode React App Graph API Results

There you have it! Now, go add some more features to this React app, like more tabs for NFT transfers, ERC-20 token transfers, all powered by the QuickNode Graph API! For example, check out this QuickNode guide to learn how to build an NFT gallery using React and QuickNode's NFT API!

Final Thoughts

QuickNode's Graph API provides a powerful and flexible way to retrieve blockchain data. With multi-chain support, analytics and stats, and a deep level of detail, QuickNode's Graph API is a valuable tool for anyone working with blockchain data.

If you're having trouble, have questions, or want to talk about what you're building, drop us a line on Discord or Twitter!

We ❤️ Feedback!

If you have any feedback on this guide, let us know. We'd love to hear from you!

Share this guide