Quickstart

Create a new Ponder project

pnpm create ponder

You will be asked for a project name, and if you are using a template (recommended). Then, it will create a project directory, install dependencies, and initialize a git repository.

Start the development server

Just like Next.js and Vite, Ponder has a development server that automatically reloads when you save changes in any project file. It also prints console.log statements and errors encountered while running your code.

First, cd into your project directory, then start the server.

pnpm dev

Add an RPC URL

Ponder fetches data using the standard Ethereum RPC API. To get started, you'll need an RPC URL from a provider like Alchemy or Infura.

Open .env.local and paste in RPC URLs for any networks that your project uses.

Each RPC URL environment variable is named PONDER_RPC_URL postfixed with the chain ID (e.g. PONDER_RPC_URL_8453 for Base Mainnet):

PONDER_RPC_URL_1 = "https://eth-mainnet.g.alchemy.com/v2/..."

Design your schema

The ponder.schema.ts file contains the database schema, and defines the shape data that the GraphQL API serves.

import { onchainTable } from "@ponder/core";
 
export const blitmapTokens = onchainTable("blitmap_tokens", (t) => ({
  id: t.integer().primaryKey(),
  owner: t.hex(),
}));

Read more about designing your schema.

Write indexing functions

Files in the src/ directory contain indexing functions, which are TypeScript functions that process a contract event. The purpose of these functions is to write indexed data to the database.

import { ponder } from "@/generated";
import { blitmapTokens } from "../ponder.schema";
 
ponder.on("Blitmap:Transfer", async ({ event, context }) => {
  await context.db.insert(blitmapTokens).values({
    id: event.args.tokenId,
    owner: event.args.to,
  });
});

Read more on how to write to the database and read contract data.

Query the GraphQL API

As you write your indexing functions and start inserting data, open the GraphiQL interface at http://localhost:42069/graphql to explore your GraphQL API locally. Any changes you make to your ponder.schema.ts file will be reflected here.

query {
  blitmapTokens {
    id
    owner
  }
}

{
  "blitmapTokens": [
    { "id": 1452, "owner": "0xaf3d5..." },
    { "id": 7164, "owner": "0x9cb3b..." },
  ]
}