GraphQL Codegen Typed Document Node

import { plugin, validate, TypeScriptTypedDocumentNodesConfig } from "@graphql-codegen/typed-document-node";

const { plugin, validate, TypeScriptTypedDocumentNodesConfig } = require("@graphql-codegen/typed-document-node");

# codegen.yml
schema: './schema.graphql'
documents: './src/**/*.graphql'
generates:
  './src/generated/graphql.ts':
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typed-document-node'
    config:
      flattenGeneratedTypes: false
      addTypenameToSelectionSets: false

// Usage of generated TypedDocumentNode
import { GetUserDocument } from './generated/graphql';
import { TypedDocumentNode } from '@graphql-typed-document-node/core';

// The generated document is strongly typed
const userQuery: TypedDocumentNode<GetUserQuery, GetUserQueryVariables> = GetUserDocument;

/**
 * Main plugin function for generating TypedDocumentNode code
 * @param schema - The GraphQL schema
 * @param rawDocuments - Array of GraphQL document files
 * @param config - Plugin configuration options  
 * @returns Generated code output with prepend imports and content
 */
const plugin: PluginFunction<TypeScriptTypedDocumentNodesConfig>;

/**
 * Validates plugin configuration and output file
 * @param _schema - The GraphQL schema (unused)
 * @param _documents - Array of document files (unused)
 * @param _config - Plugin configuration (unused)
 * @param outputFile - Path to the output file
 * @throws Error if output file doesn't have .ts or .tsx extension
 */
const validate: PluginValidateFn<RawClientSideBasePluginConfig>;

/**
 * String-based typed document node class (generated when documentMode is "string")
 */
class TypedDocumentString<TResult, TVariables>
  extends String
  implements DocumentTypeDecoration<TResult, TVariables>
{
  __apiType?: NonNullable<DocumentTypeDecoration<TResult, TVariables>['__apiType']>;
  private value: string;
  public __meta__?: Record<string, any> | undefined;

  /**
   * Creates a new typed document string
   * @param value - The GraphQL document string
   * @param __meta__ - Optional metadata
   */
  constructor(value: string, __meta__?: Record<string, any> | undefined);

  /**
   * Returns the document string with type decoration
   * @returns Typed document string
   */
  override toString(): string & DocumentTypeDecoration<TResult, TVariables>;
}

/**
 * Configuration options for the typed document node plugin
 */
interface TypeScriptTypedDocumentNodesConfig extends RawClientSideBasePluginConfig {
  /**
   * Flatten fragment spread and inline fragments into a simple selection set before generating
   * @default false
   */
  flattenGeneratedTypes?: boolean;

  /**
   * Add __typename to selection sets for better type safety
   * @default false
   */
  addTypenameToSelectionSets?: boolean;
}

/**
 * GraphQL schema representation
 */
type GraphQLSchema = import('graphql').GraphQLSchema;

/**
 * Document file representation from GraphQL Code Generator
 */
interface DocumentFile {
  location: string;
  document: DocumentNode;
}

/**
 * Loaded fragment representation
 */
interface LoadedFragment {
  node: FragmentDefinitionNode;
  name: string;
  onType: string;
  isExternal: boolean;
}

/**
 * Plugin function type from GraphQL Code Generator
 */
type PluginFunction<T> = (
  schema: GraphQLSchema,
  documents: Types.DocumentFile[],
  config: T
) => Types.ComplexPluginOutput | string;

/**
 * Plugin validation function type
 */
type PluginValidateFn<T> = (
  schema: GraphQLSchema,
  documents: Types.DocumentFile[],
  config: T,
  outputFile: string
) => Promise<void>;

/**
 * Base configuration interface from visitor plugin common
 */
interface RawClientSideBasePluginConfig {
  // Configuration options from the base plugin
}

/**
 * Plugin output with prepend imports and content
 */
interface ComplexPluginOutput {
  prepend: string[];
  content: string;
}

/**
 * Type decoration interface from @graphql-typed-document-node/core
 */
interface DocumentTypeDecoration<TResult, TVariables> {
  __apiType?: {
    result: TResult;
    variables: TVariables;
  };
}

import { useQuery } from '@apollo/client';
import { GetUserDocument, GetUserQuery, GetUserQueryVariables } from './generated/graphql';

function UserProfile({ userId }: { userId: string }) {
  const { data, loading, error } = useQuery<GetUserQuery, GetUserQueryVariables>(
    GetUserDocument,
    { variables: { id: userId } }
  );
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return <div>User: {data?.user?.name}</div>;
}

import { request } from 'graphql-request';
import { GetUserDocument, GetUserQuery, GetUserQueryVariables } from './generated/graphql';

async function getUser(userId: string): Promise<GetUserQuery> {
  return request<GetUserQuery, GetUserQueryVariables>(
    'https://api.example.com/graphql',
    GetUserDocument,
    { id: userId }
  );
}

import { useQuery } from 'urql';
import { GetUserDocument } from './generated/graphql';

function UserProfile({ userId }: { userId: string }) {
  const [result] = useQuery({
    query: GetUserDocument,
    variables: { id: userId }
  });
  
  const { data, fetching, error } = result;
  
  if (fetching) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return <div>User: {data?.user?.name}</div>;
}