Belajar Web3 - Indexing: The Graph & Subgraph

#Pendahuluan

Setelah di episode 13 kita menyimpan data off-chain, pada episode ini kita menyelesaikan masalah data on-chain yang belum terjawab: bagaimana menanyakan riwayat on-chain secara efisien. Menampilkan "semua transfer USDC untuk address ini dalam 30 hari" lewat RPC langsung akan menyakitkan — itulah masalah yang dipecahkan indexer.

Mengapa episode ini penting? Karena hampir semua halaman DApp yang menampilkan daftar (history, leaderboard, koleksi NFT user) dibangun di atas indexer. Tanpa The Graph, kalian akan menulis kode yang membaca ribuan blok secara manual — lambat dan mahal.

#Mengapa Query On-chain Langsung Tidak Cukup

RPC node menawarkan akses ke state saat ini dan log, tetapi:

• Tidak ada query "di mana saja", "riwayat untuk alamat X", atau "aggregasi" bawaan.
• Menarik ribuan log event satu per satu lambat dan membebani rate limit (episode 15).
• Data perlu digabung (join) antar kontrak — misalnya owner + metadata.

Indexer menyelesaikannya dengan memindai blockchain sekali, menyimpan data dalam bentuk query-friendly (biasanya Postgres), lalu menyajikan lewat GraphQL.

#Komponen Subgraph

Subgraph adalah "index config" untuk The Graph. Tiga file inti:

#1. subgraph.yaml — Definisi

specVersion: 1.0.0
schema:
  file: ./schema.graphql
dataSources:
  - kind: ethereum/contract
    name: Token
    network: sepolia
    source:
      address: "0x0000000000000000000000000000000000000001"
      abi: ERC20
      startBlock: 123456
    mapping:
      kind: ethereum/events
      apiVersion: 0.0.7
      language: wasm/assemblyscript
      entities:
        - Transfer
      abis:
        - name: ERC20
          file: ./abis/ERC20.json
      eventHandlers:
        - event: Transfer(indexed address,indexed address,uint256)
          handler: handleTransfer
      file: ./src/mapping.ts

#2. schema.graphql — Model Data

type Transfer @entity {
  id: ID!
  from: Bytes!
  to: Bytes!
  value: BigInt!
  blockNumber: BigInt!
  blockTimestamp: BigInt!
}

#3. mappings — Logika Index

Mappings adalah kode yang berjalan saat event terjadi (AssemblyScript, dan Rust untuk ekosistem non-EVM):

import { Transfer as TransferEvent } from "../generated/Token/ERC20"
import { Transfer } from "../generated/schema"
 
export function handleTransfer(event: TransferEvent): void {
  const entity = new Transfer(
    event.transaction.hash.concatI32(event.logIndex.toI32()),
  )
  entity.from = event.params.from
  entity.to = event.params.to
  entity.value = event.params.value
  entity.blockNumber = event.block.number
  entity.blockTimestamp = event.block.timestamp
  entity.save()
}

#Deploy dan Query

#Deploy

graph init --studio my-subgraph
cd my-subgraph
graph codegen && graph build
graph deploy --studio my-subgraph --version-label 0.0.1

#Query GraphQL dari Frontend

The Graph menyediakan endpoint GraphQL yang bisa diquery seperti API biasa:

import { request } from "graphql-request"
 
const SUBGRAPH_URL = "https://api.studio.thegraph.com/query/1234/my-subgraph/v0.0.1"
 
const query = `
  query TransferHistory($from: Bytes!) {
    transfers(where: { from: $from }, orderBy: blockTimestamp, orderDirection: desc, first: 20) {
      id
      to
      value
      blockTimestamp
    }
  }
`
 
const data = await request(SUBGRAPH_URL, query, { from: userAddress })

Pattern yang harus kalian kenal: query via useQuery dari TanStack Query, dengan key subgraph+params untuk caching. Ini pola yang sama seperti fetching API biasa — bedanya sumber datanya indexer.

#Alternatif

The Graph adalah standar de facto, tetapi bukan satu-satunya:

Untuk data sederhana dan sekali pakai, getLogs cukup; untuk halaman production, gunakan indexer.

#Ringkasan Konsep

Rangkuman yang sudah kalian pelajari di episode 14:

• Query on-chain langsung punya batas: lambat, mahal, dan tidak ada aggregasi.
• Subgraph = subgraph.yaml (definisi) + schema.graphql (model) + mappings (logika).
• Deploy ke The Graph, lalu query GraphQL dari frontend dengan useQuery.
• Alternatif: SubQuery, Goldsky, atau getLogs untuk kebutuhan kecil.

#Penutup

Inti yang harus dibawa pulang:

• Pilih indexer saat butuh daftar/history/aggregasi; read contract untuk state sederhana.
• Schema subgraph menentukan API — desain dengan kebutuhan UI di depan.
• Versioning subgraph penting: perubahan schema butuh redeploy.

Di episode 15 selanjutnya, kita membahas RPC & infrastructure — perbandingan provider (Alchemy/Infura/QuickNode/Ankr), rate limiting, fallback providers dengan viem, opsi node publik vs dedicated, serta tren light client di 2026. Sampai jumpa di episode 15!