Skip to content

Code Generation

After configuring GQLB, you can generate TypeScript builders from your GraphQL schema. This process creates type-safe interfaces and builder functions that correspond to your schema.

Running Code Generation

Use the GQLB CLI to generate your builders:

bash
npx gqlb generate

Or if installed globally:

bash
gqlb generate

Generated Files

GQLB generates several files in your specified output directory:

src/generated/
├── builder.d.ts    # TypeScript builder interfaces
├── types.d.ts      # GraphQL type definitions  
└── index.ts        # Main export with builder instance

builder.d.ts

Contains TypeScript interfaces for:

  • Field builders for each GraphQL type
  • Operation builders (query, mutation, subscription)
  • Fragment builders
  • Input object types
  • Scalar types

types.d.ts

Contains TypeScript type aliases for:

  • GraphQL object types
  • Union types
  • Interface types
  • Enum types
  • Custom scalar types

index.ts

The main entry point that exports:

  • b - The main builder instance
  • OutputOf - Type helper for extracting query result types
  • types - All generated GraphQL types (if emitTypes: true)

Using Generated Code

Import the builder and start creating queries:

typescript
import { b, OutputOf } from './generated'

// Create a query
const USERS_QUERY = b.query('GetUsers', b => [
  b.users(b => [
    b.id(),
    b.name(),
    b.email()
  ])
])

// Get the GraphQL document
const document = USERS_QUERY.document()

// Extract the result type
type UsersData = OutputOf<typeof USERS_QUERY>

Development Workflow

1. Schema-First Development

  1. Update your GraphQL schema
  2. Run gqlb generate
  3. Update your queries to match the new schema
  4. TypeScript will guide you through any breaking changes

2. Watch Mode

For development, you can set up a watch script in your package.json:

json
{
  "scripts": {
    "codegen": "gqlb generate",
    "codegen:watch": "nodemon --watch schema.graphql --exec \"npm run codegen\""
  }
}

3. CI/CD Integration

Add code generation to your build process:

json
{
  "scripts": {
    "build": "npm run codegen && tsc",
    "pretest": "npm run codegen"
  }
}

Troubleshooting

Common Issues

"No config file found"

  • Ensure gqlb.config.ts exists at your project root
  • Check that the file exports a default configuration

"Cannot read schema"

  • Verify your schema path is correct
  • For introspection, ensure the endpoint is accessible
  • Check file permissions for SDL files

"TypeScript errors in generated files"

  • Ensure your tsconfig.json includes the generated directory
  • Check that you have the correct TypeScript version (4.7+)
  • Verify @gqlb/core is installed

Debugging

Add the --verbose flag for detailed output:

bash
npx gqlb generate --verbose

Performance Considerations

  • Large Schemas: Generation time scales with schema size
  • Multiple Schemas: Consider generating only schemas you actively use
  • CI/CD: Cache generated files when schema hasn't changed

Next Steps

Now that you have generated builders:

  1. Learn query building basics
  2. Understand type safety features
  3. Explore variables and arguments

Released under the MIT License.