Welcome to this tutorial. My name is Mel, and in this video/guide you will learn how to integrate The Graph queries directly into your React application, using The Graph’s Graph Client as a tool to generate graphql queries in JavaScript.

You will be able to create queries for different subgraphs and even set subscription-like queries, called live queries, for real-time data stream into your application. This is a great starting point for using The Graph, and leveraging the API-approach to obtaining on-chain data into your app.

****Our final application will have the following functionality:

On the ENS tab, we will be able to query for ENS domains using different queries to the ENS hosted service subgraph. We can query many domains, individual domain by their domain name, and a filtering query to obtain domains based on their subdomain count.

If we click on a domain, it will link us to the etherscan page for the selected domain’s owner, or better said, the address which “owns” the ENS domain.

On the Swaps Live Query tab, we will obtain a live stream of Uniswap’s hosted service subgraph. We will be refreshing the data every 5 seconds, keeping in mind that Ethereum’s blocks take 12 seconds to be mined/settled (if I’m not mistaken). Sometimes we get the same data back from the live data stream, but we get data back from the subgraph every 5 seconds.

I’ve also included the resources, for The Graph’s Github repository, where you can explore examples, as well as this tutorial’s repository, where you can clone the project and start exploring.

Now, how does The Graph work?

The regular flow of a dApp, or decentralized application, integrated with The Graph is as follows:

  1. A User interacts with a decentralized application, which adds data to Ethereum through a transaction on a smart contract

  2. The smart contract emits one or more events while processing the transaction.

  3. A Graph Node, which one can think of as a server, continually scans Ethereum for new blocks and the data for your subgraph they may contain.

  4. Graph Node finds Ethereum events for your subgraph in these blocks, and basically creates or updates the data entities in its store in response to Ethereum events. It’s a little more technical, but this is a high level overview.

  5. The dapp queries the Graph Node for data indexed from the blockchain, using the node's GraphQL endpoint.

  6. The dapp displays this data in a rich UI for end-users, which they use to issue new transactions on Ethereum.

  7. The cycle repeats.

Step 1: Project setup

Step 2: Set up graph-client

Step 3: Define the ENS queries

Step 4: Edit the ENSComponent to interact with the ENS queries

Step 5: Define the UniswapV2 queries

Step 6: Edit the App component to interact with the UniswapV2 live query

Conclusion

In this tutorial, we learned how to integrate The Graph Client into our React frontend. This tutorial should help you as a starting point to integrate The Graph Subgraphs into your project, and display on-chain data to your users, even real-time data, with an API approach.

I hope this tutorial helps you become more proficient when developing Web 3 applications. If you liked the tutorial, you can show your appreciation by sharing it with your friends and coworkers.

A follow on Lens and Twitter would be amazing too! And, if you want to support me, you can always collect this tutorial on Lens. Happy coding!