GraphQL Code Generator v3: @graphql-codegen/cli changes

.changeset/fast-pears-wonder.md

@@ -0,0 +1,6 @@
+---
+'@graphql-codegen/cli': minor
+'@graphql-codegen/plugin-helpers': minor
+---
+
+Introduces support for TypeScript config file and a new preset lifecycle (required for `client-preset`)

packages/graphql-codegen-cli/package.json

@@ -57,6 +57,7 @@
     "chalk": "^4.1.0",
     "chokidar": "^3.5.2",
     "cosmiconfig": "^7.0.0",
+    "cosmiconfig-typescript-loader": "4.0.0",
     "debounce": "^1.2.0",
     "detect-indent": "^6.0.0",
     "graphql-config": "^4.3.5",

packages/graphql-codegen-cli/src/codegen.ts

@@ -202,21 +202,29 @@ export async function executeCodegen(input: CodegenContext | Types.Config): Prom
             const outputConfig = generates[filename];
             const hasPreset = !!outputConfig.preset;
 
-            const title = hasPreset
-              ? `Generate to ${filename} (using EXPERIMENTAL preset "${outputConfig.preset}")`
-              : `Generate ${filename}`;
+            const title = `Generate to ${filename}`;
 
             return {
               title,
-              task: (_, subTask) => {
+              task: async (_, subTask) => {
                 let outputSchemaAst: GraphQLSchema;
                 let outputSchema: DocumentNode;
                 const outputFileTemplateConfig = outputConfig.config || {};
                 let outputDocuments: Types.DocumentFile[] = [];
                 const outputSpecificSchemas = normalizeInstanceOrArray<Types.Schema>(outputConfig.schema);
-                const outputSpecificDocuments = normalizeInstanceOrArray<Types.OperationDocument>(
-                  outputConfig.documents
-                );
+                let outputSpecificDocuments = normalizeInstanceOrArray<Types.OperationDocument>(outputConfig.documents);
+
+                const preset: Types.OutputPreset | null = hasPreset
+                  ? typeof outputConfig.preset === 'string'
+                    ? await getPresetByName(outputConfig.preset, makeDefaultLoader(context.cwd))
+                    : outputConfig.preset
+                  : null;
+
+                if (preset) {
+                  if (preset.prepareDocuments) {
+                    outputSpecificDocuments = await preset.prepareDocuments(filename, outputSpecificDocuments);
+                  }
+                }
 
                 return subTask.newListr(
                   [
@@ -296,13 +304,9 @@ export async function executeCodegen(input: CodegenContext | Types.Config): Prom
                             normalizedPluginsArray.map(plugin => getPluginByName(Object.keys(plugin)[0], pluginLoader))
                           );
 
-                          const preset: Types.OutputPreset = hasPreset
-                            ? typeof outputConfig.preset === 'string'
-                              ? await getPresetByName(outputConfig.preset, makeDefaultLoader(context.cwd))
-                              : outputConfig.preset
-                            : null;
-
-                          const pluginMap: { [name: string]: CodegenPlugin } = Object.fromEntries(
+                          const pluginMap: {
+                            [name: string]: CodegenPlugin;
+                          } = Object.fromEntries(
                             pluginPackages.map((pkg, i) => {
                               const plugin = normalizedPluginsArray[i];
                               const name = Object.keys(plugin)[0];
@@ -318,7 +322,7 @@ export async function executeCodegen(input: CodegenContext | Types.Config): Prom
                             emitLegacyCommonJSImports: shouldEmitLegacyCommonJSImports(config, filename),
                           };
 
-                          const outputs: Types.GenerateOptions[] = hasPreset
+                          const outputs: Types.GenerateOptions[] = preset
                             ? await context.profiler.run(
                                 async () =>
                                   preset.buildGeneratesSection({

packages/graphql-codegen-cli/src/config.ts

@@ -1,4 +1,5 @@
 import { cosmiconfig, defaultLoaders } from 'cosmiconfig';
+import { TypeScriptLoader } from 'cosmiconfig-typescript-loader';
 import { resolve } from 'path';
 import {
   DetailedError,
@@ -21,6 +22,8 @@ import { createHash } from 'crypto';
 
 const { lstat } = promises;
 
+export type CodegenConfig = Types.Config;
+
 export type YamlCliFlags = {
   config: string;
   watch: boolean | string | string[];
@@ -38,7 +41,7 @@ export type YamlCliFlags = {
 };
 
 export function generateSearchPlaces(moduleName: string) {
-  const extensions = ['json', 'yaml', 'yml', 'js', 'config.js'];
+  const extensions = ['json', 'yaml', 'yml', 'js', 'ts', 'config.js'];
   // gives codegen.json...
   const regular = extensions.map(ext => `${moduleName}.${ext}`);
   // gives .codegenrc.json... but no .codegenrc.config.js
@@ -47,7 +50,7 @@ export function generateSearchPlaces(moduleName: string) {
   return [...regular.concat(dot), 'package.json'];
 }
 
-function customLoader(ext: 'json' | 'yaml' | 'js') {
+function customLoader(ext: 'json' | 'yaml' | 'js' | 'ts') {
   function loader(filepath: string, content: string) {
     if (typeof process !== 'undefined' && 'env' in process) {
       content = env(content);
@@ -70,6 +73,10 @@ function customLoader(ext: 'json' | 'yaml' | 'js') {
     if (ext === 'js') {
       return defaultLoaders['.js'](filepath, content);
     }
+
+    if (ext === 'ts') {
+      return TypeScriptLoader()(filepath, content);
+    }
   }
 
   return loader;
@@ -124,6 +131,7 @@ export async function loadCodegenConfig({
       '.yaml': customLoader('yaml'),
       '.yml': customLoader('yaml'),
       '.js': customLoader('js'),
+      '.ts': customLoader('ts'),
       noExt: customLoader('yaml'),
       ...customLoaders,
     },

packages/graphql-codegen-cli/src/index.ts

@@ -5,3 +5,4 @@ export * from './init/index.js';
 export * from './utils/cli-error.js';
 export * from './cli.js';
 export * from './graphql-config.js';
+export { CodegenConfig } from './config.js';

packages/graphql-codegen-cli/src/presets.ts

@@ -1,4 +1,4 @@
-import { DetailedError, Types } from '@graphql-codegen/plugin-helpers';
+import { Types } from '@graphql-codegen/plugin-helpers';
 import { resolve } from 'path';
 
 export async function getPresetByName(
@@ -31,9 +31,9 @@ export async function getPresetByName(
         /** ESM Error code */
         err.code !== 'ERR_MODULE_NOT_FOUND'
       ) {
-        throw new DetailedError(
-          `Unable to load preset matching ${name}`,
-          `
+        throw new Error(
+          `Unable to load preset matching ${name}
+
               Unable to load preset matching '${name}'.
               Reason:
                 ${err.message}
@@ -51,9 +51,9 @@ export async function getPresetByName(
     )
     .join('');
 
-  throw new DetailedError(
-    `Unable to find preset matching ${name}`,
-    `
+  throw new Error(
+    `Unable to find preset matching ${name}
+
         Unable to find preset matching '${name}'
         Install one of the following packages:
 

packages/graphql-codegen-cli/src/utils/watcher.ts

@@ -79,7 +79,7 @@ export const createWatcher = (
       .map(filename => ({ filename, config: normalizeOutputParam(config.generates[filename]) }))
       .forEach(entry => {
         if (entry.config.preset) {
-          const extension = entry.config.presetConfig && entry.config.presetConfig.extension;
+          const extension = entry.config.presetConfig && (entry.config.presetConfig as any).extension;
           if (extension) {
             ignored.push(join(entry.filename, '**', '*' + extension));
           }

packages/utils/plugins-helpers/src/index.ts

@@ -7,3 +7,4 @@ export * from './errors.js';
 export * from './getCachedDocumentNodeFromSchema.js';
 export * from './oldVisit.js';
 export * from './profiler.js';
+export { Types } from './types.js';

packages/utils/plugins-helpers/src/types.ts

@@ -218,6 +218,14 @@ export namespace Types {
   export type NamedPreset = string;
   export type OutputConfig = NamedPlugin | ConfiguredPlugin;
 
+  export type PresetNamesBase =
+    | 'client'
+    | 'near-operation-file'
+    | 'gql-tag-operations'
+    | 'graphql-modules'
+    | 'import-types-preset';
+  export type PresetNames = `${PresetNamesBase}-preset` | PresetNamesBase;
+
   /**
    * @additionalProperties false
    */
@@ -242,7 +250,7 @@ export namespace Types {
      *
      * List of available presets: https://graphql-code-generator.com/docs/presets/presets-index
      */
-    preset?: string | OutputPreset;
+    preset?: PresetNames | OutputPreset;
     /**
      * @description If your setup uses Preset to have a more dynamic setup and output, set the configuration object of your preset here.
      *
@@ -330,6 +338,10 @@ export namespace Types {
 
   export type OutputPreset<TPresetConfig = any> = {
     buildGeneratesSection: (options: PresetFnArgs<TPresetConfig>) => Promisable<GenerateOptions[]>;
+    prepareDocuments?: (
+      outputFilePath: string,
+      outputSpecificDocuments: Types.OperationDocument[]
+    ) => Promisable<Types.OperationDocument[]>;
   };
 
   /* Require Extensions */

yarn.lock

@@ -5760,7 +5760,7 @@ cosmiconfig-toml-loader@1.0.0:
   dependencies:
     "@iarna/toml" "^2.2.5"
 
-cosmiconfig-typescript-loader@^4.0.0:
+cosmiconfig-typescript-loader@4.0.0, cosmiconfig-typescript-loader@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-4.0.0.tgz#4a6d856c1281135197346a6f64dfa73a9cd9fefa"
   integrity sha512-cVpucSc2Tf+VPwCCR7SZzmQTQkPbkk4O01yXsYqXBIbjE1bhwqSyAgYQkRK1un4i0OPziTleqFhdkmOc4RQ/9g==