or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdindex.mdtype-generation.mdutility-types.mdvisitors.md
tile.json

type-generation.mddocs/

Type Generation

Core functionality for converting GraphQL schema definitions into TypeScript types. The plugin processes GraphQL schemas and generates corresponding TypeScript types with extensive customization options.

Capabilities

Main Plugin Function

The primary function that processes a GraphQL schema and generates TypeScript type definitions.

/**
 * Main plugin function that generates TypeScript types from GraphQL schema
 * @param schema - The GraphQL schema to process
 * @param documents - GraphQL documents (queries, mutations, subscriptions)
 * @param config - Plugin configuration options
 * @param info - Plugin information including output file path
 * @returns Complex plugin output with prepend and content sections
 */
const plugin: PluginFunction<TypeScriptPluginConfig, Types.ComplexPluginOutput>;

function plugin(
  schema: GraphQLSchema,
  documents: Types.DocumentFile[],
  config: TypeScriptPluginConfig,
  info: { outputFile: string }
): Types.ComplexPluginOutput;

Usage Examples:

import { plugin } from "@graphql-codegen/typescript";
import { buildSchema } from "graphql";

const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
    age: Int
  }
`);

// Basic usage
const result = await plugin(schema, [], {}, { outputFile: '' });

// With configuration
const result = await plugin(schema, [], {
  avoidOptionals: true,
  immutableTypes: true,
  enumsAsTypes: true
}, { outputFile: '' });

Plugin Output Interface

Structure of the generated output containing TypeScript definitions.

/**
 * Complex plugin output structure
 */
interface Types.ComplexPluginOutput {
  /** Code to prepend before main content (imports, type definitions) */
  prepend?: string[];
  /** Main generated TypeScript content */
  content: string;
  /** Code to append after main content */
  append?: string[];
}

The output structure allows for:

  • Prepend: Type imports, utility type definitions, enum imports
  • Content: Main type definitions generated from GraphQL schema
  • Append: Additional type definitions or exports

Introspection Type Handling

Generates TypeScript definitions for GraphQL introspection types when they are used in documents.

/**
 * Generates TypeScript definitions for introspection types used in documents
 * @param schema - The GraphQL schema
 * @param documents - GraphQL documents to analyze for introspection usage
 * @param config - Plugin configuration
 * @returns Array of type definition strings
 */
function includeIntrospectionTypesDefinitions(
  schema: GraphQLSchema,
  documents: Types.DocumentFile[],
  config: TypeScriptPluginConfig
): string[];

Usage Examples:

import { includeIntrospectionTypesDefinitions } from "@graphql-codegen/typescript";

const documents = [
  {
    document: parse(`
      query GetSchema {
        __schema {
          types {
            name
            kind
          }
        }
      }
    `)
  }
];

const introspectionTypes = includeIntrospectionTypesDefinitions(
  schema,
  documents,
  {}
);
// Returns TypeScript definitions for __Schema, __Type, etc.

Generated Type Examples

The plugin generates various TypeScript constructs based on GraphQL schema elements:

Object Types:

type User {
  id: ID!
  name: String!
  email: String
}
// Generated TypeScript
export type User = {
  __typename?: 'User';
  id: Scalars['ID']['output'];
  name: Scalars['String']['output'];
  email?: Maybe<Scalars['String']['output']>;
};

Input Types:

input CreateUserInput {
  name: String!
  email: String!
  age: Int
}
// Generated TypeScript
export type CreateUserInput = {
  name: Scalars['String']['input'];
  email: Scalars['String']['input'];
  age?: InputMaybe<Scalars['Int']['input']>;
};

Enums:

enum UserStatus {
  ACTIVE
  INACTIVE
  PENDING
}
// Generated TypeScript (default)
export enum UserStatus {
  Active = 'ACTIVE',
  Inactive = 'INACTIVE',
  Pending = 'PENDING'
}

// With enumsAsTypes: true
export type UserStatus = 'ACTIVE' | 'INACTIVE' | 'PENDING';

Union Types:

union SearchResult = User | Post | Comment
// Generated TypeScript
export type SearchResult = User | Post | Comment;

Scalars: The plugin automatically generates a Scalars type mapping all GraphQL scalars to TypeScript types:

export type Scalars = {
  ID: { input: string; output: string; }
  String: { input: string; output: string; }
  Boolean: { input: boolean; output: boolean; }
  Int: { input: number; output: number; }
  Float: { input: number; output: number; }
};

Type Helper Generation

The plugin can generate various TypeScript utility types:

// Maybe type for nullable values
export type Maybe<T> = T | null;

// InputMaybe for input types
export type InputMaybe<T> = Maybe<T>;

// Exact type for precise type matching
export type Exact<T extends { [key: string]: unknown }> = { 
  [K in keyof T]: T[K] 
};