[typescript-operations] Generate enums referenced in operation Variables

.changeset/curly-trees-lead.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/typescript-operations': major
+---
+
+BREAKING CHANGE: typescript-operations plugin now generates enum if it is used in operation.

packages/plugins/typescript/operations/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@graphql-codegen/plugin-helpers": "^6.0.0",
     "@graphql-codegen/typescript": "^5.0.4",
+    "@graphql-codegen/schema-ast": "^5.0.0",
     "@graphql-codegen/visitor-plugin-common": "6.1.2",
     "auto-bind": "~4.0.0",
     "tslib": "~2.6.0"

packages/plugins/typescript/operations/src/config.ts

@@ -1,4 +1,4 @@
-import { AvoidOptionalsConfig, RawDocumentsConfig } from '@graphql-codegen/visitor-plugin-common';
+import { AvoidOptionalsConfig, type EnumValuesMap, RawDocumentsConfig } from '@graphql-codegen/visitor-plugin-common';
 
 /**
  * @description This plugin generates TypeScript types based on your GraphQLSchema _and_ your GraphQL operations and fragments.
@@ -336,4 +336,8 @@ export interface TypeScriptDocumentsPluginConfig extends RawDocumentsConfig {
   nullability?: {
     errorHandlingClient: boolean;
   };
+
+  enumType?: 'string-literal' | 'native-numeric' | 'const' | 'native-const' | 'native';
+  enumValues?: EnumValuesMap;
+  futureProofEnums?: boolean;
 }

packages/plugins/typescript/operations/src/index.ts

@@ -1,6 +1,7 @@
 import { oldVisit, PluginFunction, Types } from '@graphql-codegen/plugin-helpers';
-import { LoadedFragment, optimizeOperations } from '@graphql-codegen/visitor-plugin-common';
-import { concatAST, FragmentDefinitionNode, GraphQLSchema, Kind } from 'graphql';
+import { transformSchemaAST } from '@graphql-codegen/schema-ast';
+import { optimizeOperations } from '@graphql-codegen/visitor-plugin-common';
+import { concatAST, GraphQLSchema } from 'graphql';
 import { TypeScriptDocumentsPluginConfig } from './config.js';
 import { TypeScriptDocumentsVisitor } from './visitor.js';
 
@@ -20,25 +21,11 @@ export const plugin: PluginFunction<TypeScriptDocumentsPluginConfig, Types.Compl
     : rawDocuments;
   const allAst = concatAST(documents.map(v => v.document));
 
-  const allFragments: LoadedFragment[] = [
-    ...(allAst.definitions.filter(d => d.kind === Kind.FRAGMENT_DEFINITION) as FragmentDefinitionNode[]).map(
-      fragmentDef => ({
-        node: fragmentDef,
-        name: fragmentDef.name.value,
-        onType: fragmentDef.typeCondition.name.value,
-        isExternal: false,
-      })
-    ),
-    ...(config.externalFragments || []),
-  ];
-
-  const visitor = new TypeScriptDocumentsVisitor(schema, config, allFragments);
+  const visitor = new TypeScriptDocumentsVisitor(schema, config, allAst);
 
-  const visitorResult = oldVisit(allAst, {
-    leave: visitor,
-  });
+  const operationsResult = oldVisit(allAst, { leave: visitor });
 
-  let content = visitorResult.definitions.join('\n');
+  let operationsContent = operationsResult.definitions.join('\n');
 
   if (config.addOperationExport) {
     const exportConsts = [];
@@ -49,23 +36,37 @@ export const plugin: PluginFunction<TypeScriptDocumentsPluginConfig, Types.Compl
       }
     }
 
-    content = visitorResult.definitions.concat(exportConsts).join('\n');
+    operationsContent = operationsResult.definitions.concat(exportConsts).join('\n');
   }
 
   if (config.globalNamespace) {
-    content = `
+    operationsContent = `
     declare global {
-      ${content}
+      ${operationsContent}
     }`;
   }
 
+  const schemaTypes = oldVisit(transformSchemaAST(schema, config).ast, { leave: visitor });
+
+  // IMPORTANT: when a visitor leaves a node with no transformation logic,
+  // It will leave the node as an object.
+  // Here, we filter in nodes that have been turned into strings, i.e. they have been transformed
+  // This way, we do not have to explicitly declare a method for every node type to convert them to null
+  const schemaTypesContent = schemaTypes.definitions.filter(def => typeof def === 'string').join('\n');
+
+  const content: string[] = [];
+  if (schemaTypesContent) {
+    content.push(schemaTypesContent);
+  }
+  content.push(operationsContent);
+
   return {
     prepend: [
       ...visitor.getImports(),
       ...visitor.getGlobalDeclarations(visitor.config.noExport),
       'type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };',
     ],
-    content,
+    content: content.join('\n'),
   };
 };
 

packages/plugins/typescript/operations/src/visitor.ts

@@ -1,19 +1,37 @@
 import {
   BaseDocumentsVisitor,
+  convertSchemaEnumToDeclarationBlockString,
   DeclarationKind,
   generateFragmentImportStatement,
   getConfigValue,
   LoadedFragment,
   normalizeAvoidOptionals,
   NormalizedAvoidOptionalsConfig,
   ParsedDocumentsConfig,
+  type ParsedEnumValuesMap,
+  parseEnumValues,
   PreResolveTypesProcessor,
   SelectionSetProcessorConfig,
   SelectionSetToObject,
   wrapTypeWithModifiers,
 } from '@graphql-codegen/visitor-plugin-common';
 import autoBind from 'auto-bind';
-import { GraphQLNamedType, GraphQLOutputType, GraphQLSchema, isEnumType, isNonNullType } from 'graphql';
+import {
+  type DocumentNode,
+  EnumTypeDefinitionNode,
+  type FragmentDefinitionNode,
+  GraphQLEnumType,
+  GraphQLInputObjectType,
+  type GraphQLNamedInputType,
+  type GraphQLNamedType,
+  type GraphQLOutputType,
+  GraphQLScalarType,
+  type GraphQLSchema,
+  isEnumType,
+  isNonNullType,
+  Kind,
+  visit,
+} from 'graphql';
 import { TypeScriptDocumentsPluginConfig } from './config.js';
 import { TypeScriptOperationVariablesToObject } from './ts-operation-variables-to-object.js';
 import { TypeScriptSelectionSetProcessor } from './ts-selection-set-processor.js';
@@ -25,13 +43,19 @@ export interface TypeScriptDocumentsParsedConfig extends ParsedDocumentsConfig {
   noExport: boolean;
   maybeValue: string;
   allowUndefinedQueryVariables: boolean;
+  enumType: 'string-literal' | 'native-numeric' | 'const' | 'native-const' | 'native';
+  futureProofEnums: boolean;
+  enumValues: ParsedEnumValuesMap;
 }
 
+type UsedNamedInputTypes = Record<string, GraphQLNamedInputType>;
+
 export class TypeScriptDocumentsVisitor extends BaseDocumentsVisitor<
   TypeScriptDocumentsPluginConfig,
   TypeScriptDocumentsParsedConfig
 > {
-  constructor(schema: GraphQLSchema, config: TypeScriptDocumentsPluginConfig, allFragments: LoadedFragment[]) {
+  protected _usedNamedInputTypes: UsedNamedInputTypes = {};
+  constructor(schema: GraphQLSchema, config: TypeScriptDocumentsPluginConfig, documentNode: DocumentNode) {
     super(
       config,
       {
@@ -43,6 +67,13 @@ export class TypeScriptDocumentsVisitor extends BaseDocumentsVisitor<
         preResolveTypes: getConfigValue(config.preResolveTypes, true),
         mergeFragmentTypes: getConfigValue(config.mergeFragmentTypes, false),
         allowUndefinedQueryVariables: getConfigValue(config.allowUndefinedQueryVariables, false),
+        enumType: getConfigValue(config.enumType, 'string-literal'),
+        enumValues: parseEnumValues({
+          schema,
+          mapOrStr: config.enumValues,
+          ignoreEnumValuesFromSchema: config.ignoreEnumValuesFromSchema,
+        }),
+        futureProofEnums: getConfigValue(config.futureProofEnums, false),
       } as TypeScriptDocumentsParsedConfig,
       schema
     );
@@ -76,6 +107,20 @@ export class TypeScriptDocumentsVisitor extends BaseDocumentsVisitor<
       return (this.config.immutableTypes ? `readonly ${name}` : name) + (optional ? '?' : '');
     };
 
+    const allFragments: LoadedFragment[] = [
+      ...(documentNode.definitions.filter(d => d.kind === Kind.FRAGMENT_DEFINITION) as FragmentDefinitionNode[]).map(
+        fragmentDef => ({
+          node: fragmentDef,
+          name: fragmentDef.name.value,
+          onType: fragmentDef.typeCondition.name.value,
+          isExternal: false,
+        })
+      ),
+      ...(config.externalFragments || []),
+    ];
+
+    this._usedNamedInputTypes = this.collectUsedInputTypes({ schema, documentNode });
+
     const processorConfig: SelectionSetProcessorConfig = {
       namespacedImportName: this.config.namespacedImportName,
       convertName: this.convertName.bind(this),
@@ -125,6 +170,31 @@ export class TypeScriptDocumentsVisitor extends BaseDocumentsVisitor<
     };
   }
 
+  EnumTypeDefinition(node: EnumTypeDefinitionNode): string {
+    const enumName = node.name.value;
+    if (!this._usedNamedInputTypes[enumName]) {
+      return null;
+    }
+
+    return convertSchemaEnumToDeclarationBlockString({
+      schema: this._schema,
+      node,
+      declarationBlockConfig: this._declarationBlockConfig,
+      enumName,
+      enumValues: this.config.enumValues,
+      futureProofEnums: this.config.futureProofEnums,
+      ignoreEnumValuesFromSchema: this.config.ignoreEnumValuesFromSchema,
+      outputType: this.config.enumType,
+      naming: {
+        convert: this.config.convert,
+        typesPrefix: this.config.typesPrefix,
+        typesSuffix: this.config.typesSuffix,
+        useTypesPrefix: this.config.enumPrefix,
+        useTypesSuffix: this.config.enumSuffix,
+      },
+    });
+  }
+
   public getImports(): Array<string> {
     return !this.config.globalNamespace &&
       (this.config.inlineFragmentTypes === 'combine' || this.config.inlineFragmentTypes === 'mask')
@@ -142,4 +212,36 @@ export class TypeScriptDocumentsVisitor extends BaseDocumentsVisitor<
 
     return `${prefix}Exact<${variablesBlock === '{}' ? `{ [key: string]: never; }` : variablesBlock}>${extraType}`;
   }
+
+  private collectUsedInputTypes({
+    schema,
+    documentNode,
+  }: {
+    schema: GraphQLSchema;
+    documentNode: DocumentNode;
+  }): UsedNamedInputTypes {
+    const schemaTypes = schema.getTypeMap();
+
+    const usedInputTypes: UsedNamedInputTypes = {};
+
+    visit(documentNode, {
+      VariableDefinition: variableDefinitionNode => {
+        visit(variableDefinitionNode, {
+          NamedType: namedTypeNode => {
+            const foundInputType = schemaTypes[namedTypeNode.name.value];
+            if (
+              foundInputType &&
+              (foundInputType instanceof GraphQLInputObjectType ||
+                foundInputType instanceof GraphQLScalarType ||
+                foundInputType instanceof GraphQLEnumType)
+            ) {
+              usedInputTypes[namedTypeNode.name.value] = foundInputType;
+            }
+          },
+        });
+      },
+    });
+
+    return usedInputTypes;
+  }
 }

packages/plugins/typescript/operations/tests/ts-documents.standalone.spec.ts

@@ -37,6 +37,7 @@ describe('TypeScript Operations Plugin - Standalone', () => {
       input UsersInput {
         from: DateTime
         to: DateTime
+        role: UserRole
       }
 
       type UsersResponseOk {
@@ -69,8 +70,8 @@ describe('TypeScript Operations Plugin - Standalone', () => {
         }
       }
 
-      query UsersWithScalarInput($from: DateTime!, $to: DateTime) {
-        users(input: { from: $from, to: $to }) {
+      query UsersWithScalarInput($from: DateTime!, $to: DateTime, $role: UserRole) {
+        users(input: { from: $from, to: $to, role: $role }) {
           ... on UsersResponseOk {
             result {
               __typename
@@ -87,6 +88,10 @@ describe('TypeScript Operations Plugin - Standalone', () => {
 
     expect(result).toMatchInlineSnapshot(`
       "type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+      export type UserRole =
+        | 'ADMIN'
+        | 'CUSTOMER';
+
       export type UserQueryVariables = Exact<{
         id: string;
       }>;
@@ -107,6 +112,7 @@ describe('TypeScript Operations Plugin - Standalone', () => {
       export type UsersWithScalarInputQueryVariables = Exact<{
         from: any;
         to?: any | null;
+        role?: UserRole | null;
       }>;
 
 
@@ -157,3 +163,13 @@ describe('TypeScript Operations Plugin - Standalone', () => {
     `);
   });
 });
+
+describe('TypeScript Operations Plugin - Enum', () => {
+  it.todo('does not generate unused enum in variables and result');
+  it.todo('handles native numeric enum correctly');
+  it.todo('handles const enum correctly');
+  it.todo('handles native const enum correctly');
+  it.todo('handles native enum correctly');
+  it.todo('handles EnumValues correctly');
+  // Bring over tests from https://github.com/dotansimha/graphql-code-generator/blob/accdab69106605241933e9d66d64dc7077656f30/packages/plugins/typescript/typescript/tests/typescript.spec.ts
+});