or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

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

tessl/npm-graphql-codegen--typescript

GraphQL Code Generator plugin for generating TypeScript types from GraphQL schemas

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@graphql-codegen/typescript@4.1.x

To install, run

npx @tessl/cli install tessl/npm-graphql-codegen--typescript@4.1.0

index.mddocs/

GraphQL Codegen TypeScript

The GraphQL Code Generator TypeScript plugin generates base TypeScript types from GraphQL schemas. It creates fundamental type definitions that exactly match GraphQL schema structures, serving as the foundation for other GraphQL codegen plugins like typescript-operations and typescript-resolvers.

Package Information

  • Package Name: @graphql-codegen/typescript
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @graphql-codegen/typescript

Core Imports

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

For CommonJS:

const { plugin, includeIntrospectionTypesDefinitions } = require("@graphql-codegen/typescript");

Basic Usage

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

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

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

// result.content contains generated TypeScript types:
// export type User = {
//   __typename?: 'User';
//   id: Scalars['ID']['output'];
//   name: Scalars['String']['output'];
//   email: Scalars['String']['output'];
//   age?: Maybe<Scalars['Int']['output']>;
// };

Architecture

The plugin is built around several key components:

  • Plugin Function: Main entry point that processes GraphQL schemas and generates TypeScript types
  • Visitor Pattern: Uses visitor classes (TsVisitor, TsIntrospectionVisitor) to traverse GraphQL AST
  • Configuration System: Extensive configuration options for customizing type generation
  • Type System: Generates TypeScript types that preserve GraphQL schema semantics
  • Introspection Support: Handles GraphQL introspection types when needed

Capabilities

Plugin Configuration

Comprehensive configuration system with 15+ options for customizing type generation, including enum handling, optional types, immutability, and future-proofing features.

interface TypeScriptPluginConfig extends RawTypesConfig {
  avoidOptionals?: boolean | AvoidOptionalsConfig;
  constEnums?: boolean;
  enumsAsTypes?: boolean;
  numericEnums?: boolean;
  futureProofEnums?: boolean;
  futureProofUnions?: boolean;
  enumsAsConst?: boolean;
  onlyEnums?: boolean;
  onlyOperationTypes?: boolean;
  immutableTypes?: boolean;
  maybeValue?: string;
  inputMaybeValue?: string;
  noExport?: boolean;
  disableDescriptions?: boolean;
  useImplementingTypes?: boolean;
  wrapEntireFieldDefinitions?: boolean;
  entireFieldWrapperValue?: string;
  allowEnumStringTypes?: boolean;
}

Plugin Configuration

Type Generation

Core functionality for converting GraphQL schema definitions into TypeScript types using the visitor pattern with extensive customization options.

const plugin: PluginFunction<TypeScriptPluginConfig, Types.ComplexPluginOutput>;

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

function includeIntrospectionTypesDefinitions(
  schema: GraphQLSchema,
  documents: Types.DocumentFile[],
  config: TypeScriptPluginConfig
): string[];

interface Types.ComplexPluginOutput {
  prepend?: string[];
  content: string;
  append?: string[];
}

Type Generation

Visitor Classes

Advanced visitor classes for traversing GraphQL AST and generating TypeScript code, including specialized handling for introspection types.

class TsVisitor<TRawConfig, TParsedConfig> extends BaseTypesVisitor {
  constructor(
    schema: GraphQLSchema,
    pluginConfig: TRawConfig,
    additionalConfig?: Partial<TParsedConfig>
  );
}

class TsIntrospectionVisitor extends TsVisitor {
  constructor(
    schema: GraphQLSchema,
    pluginConfig?: TypeScriptPluginConfig,
    typesToInclude: GraphQLNamedType[]
  );
}

Visitor Classes

Utility Types

Pre-defined TypeScript utility type signatures for advanced type manipulation and exact type matching.

const EXACT_SIGNATURE: string;
const MAKE_OPTIONAL_SIGNATURE: string;
const MAKE_MAYBE_SIGNATURE: string;
const MAKE_EMPTY_SIGNATURE: string;
const MAKE_INCREMENTAL_SIGNATURE: string;

Utility Types

Operation Variables Handling

TypeScript-specific handling for converting GraphQL operation variables to TypeScript object types with proper type modifiers and optionals handling.

class TypeScriptOperationVariablesToObject extends OperationVariablesToObject {
  constructor(
    _scalars: NormalizedScalarsMap,
    _convertName: ConvertNameFn,
    _avoidOptionals: NormalizedAvoidOptionalsConfig,
    _immutableTypes: boolean,
    _namespacedImportName?: string | null,
    _enumNames?: string[],
    _enumPrefix?: boolean,
    _enumSuffix?: boolean,
    _enumValues?: ParsedEnumValuesMap,
    _applyCoercion?: boolean,
    _directiveArgumentAndInputFieldMappings?: ParsedDirectiveArgumentAndInputFieldMappings,
    _maybeType?: string
  );

  wrapAstTypeWithModifiers(
    baseType: string,
    typeNode: TypeNode,
    applyCoercion?: boolean
  ): string;
}

Types

Configuration Types

Parsed configuration interface used internally by visitor classes.

interface TypeScriptPluginParsedConfig extends ParsedTypesConfig {
  avoidOptionals: NormalizedAvoidOptionalsConfig;
  constEnums: boolean;
  enumsAsTypes: boolean;
  futureProofEnums: boolean;
  futureProofUnions: boolean;
  enumsAsConst: boolean;
  numericEnums: boolean;
  onlyEnums: boolean;
  onlyOperationTypes: boolean;
  immutableTypes: boolean;
  maybeValue: string;
  inputMaybeValue: string;
  noExport: boolean;
  useImplementingTypes: boolean;
}