dAppBooster Subgraph Plugin

This package provides a flexible and reusable solution for generating GraphQL clients using @graphql-codegen/cli, integrated with @tanstack/react-query.

It simplifies the process of setting up and managing GraphQL code generation for multiple subgraphs.

Installation

First, install the package along with all the required dependencies:

Terminal

pnpm add @bootnodedev/db-subgraph graphql graphql-request

Then, add the development dependencies:

Terminal

pnpm add -D @graphql-codegen/cli @graphql-typed-document-node/core

Usage

Set up the configuration

Create a src/subgraphs/codegen.ts code generation file in your project:

codegen.ts

import { generateCodegenConfig } from "@bootnodedev/db-subgraph";
import { loadEnv } from "vite";
 
const env = loadEnv("subgraphs", process.cwd(), "");
 
export default generateCodegenConfig({
  subgraphs: [
    {
      apiKey: env.PUBLIC_SUBGRAPHS_API_KEY,
      chainsResourceIds: env.PUBLIC_SUBGRAPHS_CHAINS_RESOURCE_IDS,
      environment: "production",
      productionUrl: env.PUBLIC_SUBGRAPHS_PRODUCTION_URL,
    },
  ],
});

This file uses the generateCodegenConfig function from our package to create the configuration for @graphql-codegen/cli

Run the code generation

Add a script to your package.json to run the code generation:

package.json

{
  "scripts": {
    "subgraph-codegen": "graphql-codegen --config ./src/subgraphs/codegen.ts"
  }
}

Now generate your GraphQL clients by running:

Terminal

# Generate GraphQL clients
pnpm run subgraph-codegen

You can see a live example here and the source code of the demos using the plugin here

Configuration options

The PackageConfig interface accepts the following options for each subgraph:

apiKey: Your subgraph API key.
chainsResourceIds: A string of comma-separated <chainId>:<subgraphId>:<resourceId>.
- i.e.:

137:uniswap:BvYimJ6vCLkk63oWZy7WB5cVDTVVMugUAF35RAUZpQXE,8453:aave:GQFbb95cE6d8mV989mL5figjaGaKCQB3xqYrr1bRyXqF

developmentUrl: The URL for the development environment.
productionUrl: The URL for the production environment.
environment: Either 'development' or 'production'.
queriesDirectory: The directory where your GraphQL queries are located.
- default: ./src/subgraphs/queries
destinationDirectory: The directory where your typed queries will be generated.
- defult: ./src/subgraphs/gql

Adding multiple subgraphs

You can configure multiple subgraphs by adding more objects to the subgraphs array in your configuration:

codegen.ts

export default generateCodegenConfig({
  subgraphs: [
    {
      // First subgraph configuration
    },
    {
      // Second subgraph configuration
    },
    // Add more as needed
  ],
});

Generated files

The package will generate GraphQL clients in the src/subgraphs/gql/ directory, organized by subgraph ID.

Customization

If you need to customize the generation process further, you can modify the codegen.ts file. The package is designed to be flexible, allowing you to define configurations in the way that best suits your project structure and requirements.