Next.js GraphQL Code Generator

This example demonstrates how to use GraphQL Code Generator with ChatBotKit's GraphQL API to create type-safe queries and mutations. It showcases the TypeScript plugins approach that generates a complete SDK with full type safety for all GraphQL operations.

The architecture uses separate .graphql files for defining operations, which are processed by GraphQL Code Generator to create TypeScript types and a type-safe SDK using graphql-request. The generated SDK provides methods like sdk.ListBots() with complete type safety for variables and responses.

Unlike the client preset approach, this uses TypeScript plugins (typescript, typescript-operations, typescript-graphql-request) which generate a single comprehensive file with getSdk() function. This matches the pattern used in the main ChatBotKit platform for consistency.

The example features Next.js server components that fetch data directly on the server using the generated SDK, eliminating the need for API routes and providing optimal performance with server-side rendering.

This pattern is essential for applications that want compile-time type checking, IDE autocompletion, and confidence that their GraphQL queries match the API schema. It's particularly valuable for teams working with complex GraphQL APIs or building production applications where type safety reduces bugs and improves maintainability.