Integrate The Graph subgraph into a Scaffold-ETH 2 project for indexing blockchain events. Use when the user wants to: index contract events with The Graph, add a subgraph, query onchain data with GraphQL, set up a local graph node, or deploy a subgraph to Subgraph Studio.
Check if ./packages/nextjs/scaffold.config.ts exists directly in the current working directory (do not search subdirectories). If it doesn't exist, this is not a Scaffold-ETH 2 project. Follow the instructions at https://docs.scaffoldeth.io/SKILL.md to scaffold it first. If it exists, continue directly with building.
The Graph is a decentralized indexing protocol for querying blockchain data via GraphQL. A subgraph defines which contract events to index, how to transform them, and exposes the indexed data through a GraphQL API. This skill adds a subgraph workspace to SE-2, with a local Graph Node (via Docker) for development and deployment to for production.
For The Graph's full API reference, see the official docs. This skill focuses on the SE-2 integration — the workspace structure, the ABI copy bridge, and local development workflow.
packages/subgraph/)Create packages/subgraph/package.json:
{
"name": "@se-2/subgraph",
"version": "0.0.1",
"type": "module",
"scripts": {
"abi-copy": "tsx scripts/abi_copy.ts",
"codegen": "graph codegen",
"build": "graph build",
"graph": "graph",
"deploy": "graph deploy --node https://api.studio.thegraph.com/deploy/ your-contract",
"create-local": "graph create --node http://localhost:8020/ scaffold-eth/your-contract",
"remove-local": "graph remove --node http://localhost:8020/ scaffold-eth/your-contract",
"deploy-local": "graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 scaffold-eth/your-contract",
"local-ship": "yarn abi-copy && yarn codegen && yarn build --network localhost && yarn deploy-local",
"test": "graph test -d",
"run-node": "cd graph-node && docker compose up",
"stop-node": "cd graph-node && docker compose down",
"clean-node": "rm -rf graph-node/data/"
},
"dependencies": {
"@graphprotocol/graph-cli": "^0.98.0",
"@graphprotocol/graph-ts": "^0.38.0",
"tsx": "^4.0.0",
"typescript": "^5.7.0"
},
"devDependencies": {
"@types/chalk": "^2.2.0",
"@types/node": "^20.11.0",
"matchstick-as": "~0.6.0"
}
}
For querying the subgraph from the frontend via Graph Client:
{
"scripts": {
"client": "graphclient build"
},
"dependencies": {
"graphql": "^16.8.0"
},
"devDependencies": {
"@graphprotocol/client-cli": "^3.0.0"
}
}
{
"graph": "yarn workspace @se-2/subgraph graph",
"graphclient:build": "yarn workspace @se-2/nextjs client",
"subgraph:abi-copy": "yarn workspace @se-2/subgraph abi-copy",
"subgraph:build": "yarn workspace @se-2/subgraph build",
"subgraph:clean-node": "yarn workspace @se-2/subgraph clean-node",
"subgraph:codegen": "yarn workspace @se-2/subgraph codegen",
"subgraph:create-local": "yarn workspace @se-2/subgraph create-local",
"subgraph:local-ship": "yarn workspace @se-2/subgraph local-ship",
"subgraph:run-node": "yarn workspace @se-2/subgraph run-node",
"subgraph:stop-node": "yarn workspace @se-2/subgraph stop-node",
"subgraph:test": "yarn workspace @se-2/subgraph test -d"
}
The Graph requires three services: a Graph Node, IPFS, and PostgreSQL. Create packages/subgraph/graph-node/docker-compose.yml with these three services:
graphprotocol/graph-node:v0.41.1 — ports 8000 (GraphQL), 8001, 8020 (admin), 8030, 8040. Set ethereum: "localhost:http://host.docker.internal:8545" to connect to the local chain. Add extra_hosts: ["host.docker.internal:host-gateway"].ipfs/kubo:v0.39.0 (not the legacy ipfs/go-ipfs) — port 5001, volume ./data/ipfs:/data/ipfspostgres — port 5432, volume ./data/postgres:/var/lib/postgresql/data. Credentials: user graph-node, password let-me-in, db graph-node. Must set POSTGRES_INITDB_ARGS: "--locale=C --encoding=UTF8" — graph-node requires the C locale and will panic on startup otherwise.The graph-node environment also needs: postgres_host: postgres, postgres_user/pass/db, ipfs: "ipfs:5001", GRAPH_LOG: info.
subgraph.yaml)The manifest defines what to index. Adapt this to the project's actual contracts:
# packages/subgraph/subgraph.yaml
specVersion: 0.0.4