Are you curious about how to handle data requests when querying the blockchain? In this guide, we will walk through the process of building a web3 full-stack web application, covering tools like graph-client and urql to access and manage data from decentralized networks efficiently. Whether you are a seasoned developer or just starting in the web3 space, this guide will provide the steps to create a front-end app consuming data from the blockchain.

Web3 full-stack development is a relatively new subject. In web2, it’s all about centralized servers and HTTP requests. Consuming data from an API is a standardized process that most full-stack developers begin to learn in their early coding days.

But in decentralized applications, the data we want to consume lives on the blockchain, and querying is complex for several reasons.

• Scalability: As the number of users and transactions on the blockchain increases, it can become more difficult to query the blockchain promptly.
• Data structure: The data on the blockchain is often stored in a complex and non-relational format, making it difficult to query and extract specific information.
• Decentralized nature: The blockchain is a decentralized network, so there is no central point of control, and querying requires a node to which not everyone has access to

How do we solve this querying issue?

Enter The Graph

The Graph in an indexing protocol used to query decentralized networks, like Ethereum. Instead of querying directly from the blockchain or keeping our centralized server, we can rely on The Graph by creating and deploying a subgraph, which will index a determined contract (or several, more on that later). Each subgraph is a tiny slice of the blockchain that we can query using GraphQL.

Why is it better than a centralized solution? The Graph uses a structure of indexers and curators that helps it achieve decentralization and data consistency, making querying the blockchain easier without sacrificing its main benefits. I recommend this article for a deeper understanding of how The Graph works.

By the end of this tutorial, we should grasp how The Graph works, how to use subgraphs to query and consume data from a frontend, and which tools can be used to make the process simpler.

Project overview

In this guide, we will build a simple front-end application that queries data from a subgraph. For our data, we will index ENS contracts. ENS stands for Ethereum Name Service and is a known project that mints .eth domains as ERC721 tokens. I’m choosing this project because it has a lot of movement and transactions, which translates into yummy data that we can use to fuel our front-end app. We will index two ENS smart contracts to create an ENS explorer app that shows the latest transactions and historic transaction amounts per day.

Pre-requisites:

• General blockchain knowledge
• Some React knowledge
• A grasp of how smart contracts work
• Having a wallet setup (this is desired, but I’ll provide options to avoid using it if necessary)

Tool overview

• The Graph CLI - a set of developer tools that will help us create, update and deploy subgraphs
• Graph-client - a set of tools that enhance the developer experience for developers working with The Graph
• NextJS - a framework that provides excellent developer experience and allows us to quickstart a full-blown React app in minutes
• urql - a GraphQL client library for React. It allows developers to easily make GraphQL queries and mutations in their React applications.

Project structure

For project scaffolding, we will have two folders, one containing our front-end and everything we need for rendering and querying data. The other will include the local version of our subgraph.