Querying Blockchain and Transaction Information in DApp Development

Introduction to Blockchain Data Querying

One of the core principles of blockchain technology is immutability, which makes historical data retrieval crucial for decentralized applications (DApps). This guide explores practical methods to access Ethereum blockchain data using popular JavaScript libraries.

Key Development Focus Areas

1. Project architecture planning
2. Data retrieval with web3.js
3. Data retrieval with ethers.js
4. Connecting to Ethereum Mainnet
5. Final implementation showcase

Project Architecture

Layout Design

• Title Section
  Clearly states the page objectives
• Network Selection
  Customizable Ethereum network connection
• Block Query Zone
  Dual-panel display comparing web3.js (left) and ethers.js (right) methods
• Transaction Query Zone
  Side-by-side transaction query implementations

File Structure

├── src
│   ├── app
│   ├── pages
│   │   └── get_information.tsx
│   ├── style
│   │   └── get_information.css

The final interface renders at /get_information route.

Data Models

// Block information model
class BlockInfo {
  BlockHeight: number
  BlockHash: string
  PreviousHash: string
}

// Transaction information model
class TransactionInfo {
  BlockHeight: number
  Hash: string
  From: string
  To: string
  Amount: string
  Fee: string
}

These simplified models focus on key attributes for demonstration purposes.

Retrieving Data with web3.js

Block Operations

// Get latest block height
const getBlockHeightWeb3 = () => {
  const web3 = new Web3(RPC_URL);
  web3.eth.getBlockNumber()
    .then(blockNumber => {
      console.log('Latest block:', blockNumber);
    });
}

// Get block by height
const getBlockByHeightWeb3 = (blockNumber) => {
  const web3 = new Web3(RPC_URL);
  web3.eth.getBlock(blockNumber)
    .then(blockInfo => {
      console.log('Block details:', blockInfo);
    });
}

Transaction Operations

// Get transaction by hash
const getTransactionWeb3 = (txHash) => {
  const web3 = new Web3(RPC_URL);
  web3.eth.getTransaction(txHash)
    .then(txInfo => {
      console.log('Transaction details:', txInfo);
    });
}

Retrieving Data with ethers.js

Block Operations

// Get latest block height
const getBlockHeightEthers = async () => {
  const provider = new ethers.JsonRpcProvider(RPC_URL);
  const blockNumber = await provider.getBlockNumber();
  console.log('Latest block:', blockNumber);
}

// Get block by hash
const getBlockByHashEthers = async (blockHash) => {
  const provider = new ethers.JsonRpcProvider(RPC_URL);
  const block = await provider.getBlock(blockHash);
  console.log('Block details:', block);
}

Connecting to Ethereum Mainnet

To connect to Ethereum Mainnet:

1. Register at Infura
2. Create a new Web3 API key
3. Select "MAINNET" network
4. Copy the provided RPC endpoint URL

👉 Get started with Infura for blockchain development

Implementation Showcase

Workflow Demonstration

1. Enter Infura RPC URL
2. Query latest block height
   Verify against Etherscan
3. Retrieve block details
   Cross-check height, hash, and parent hash
4. Query transaction by hash
   Validate sender, receiver, amount, and gas fees

For development/testing, consider using Ganache at http://127.0.0.1:7545

Conclusion

This implementation demonstrates blockchain's transparency through:

1. Data retrieval with web3.js
2. Data retrieval with ethers.js
3. Mainnet connection via Infura
4. Data validation with block explorers

FAQ Section

Q: What's the difference between web3.js and ethers.js?
A: ethers.js offers a cleaner API and better TypeScript support, while web3.js has broader ecosystem adoption.

Q: Can I use this with test networks?
A: Yes, simply replace the Mainnet RPC URL with testnet endpoints like Sepolia or Goerli.

Q: How do I handle rate limits with Infura?
A: Consider implementing client-side caching or upgrading your Infura plan for higher request volumes.

👉 Explore advanced blockchain development tools

Next Topic Preview: "DApp Development: Executing Blockchain Transactions"