[near-operation-file-preset] Add presetConfig.filePerOperation to generate one file per operation (#1399)

Author: eddeee888

.changeset/afraid-buckets-fly.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/near-operation-file-preset': minor
+---
+
+Add `filePerOperation` config to generate filename based on named operation or fragment, instead of source filename

.vscode/settings.json

@@ -17,7 +17,7 @@
     "coverage": true,
     "npm": true
   },
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "js/ts.tsdk.path": "node_modules/typescript/lib",
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[typescript]": {

packages/presets/near-operation-file/src/fragment-resolver.ts

@@ -89,7 +89,7 @@ function buildFragmentRegistry(
   const registry = documents.reduce<FragmentRegistry>((prev: FragmentRegistry, documentRecord) => {
     const fragments: FragmentDefinitionNode[] = documentRecord.document.definitions.filter(
       d => d.kind === Kind.FRAGMENT_DEFINITION,
-    ) as FragmentDefinitionNode[];
+    );
 
     for (const fragment of fragments) {
       const schemaType = schemaObject.getType(fragment.typeCondition.name.value);
@@ -100,8 +100,12 @@ function buildFragmentRegistry(
         );
       }
 
+      const filePath = generateFilePath({
+        location: documentRecord.location,
+        meta: { operations: [], fragments: [fragment] },
+      });
+
       const fragmentName = fragment.name.value;
-      const filePath = generateFilePath(documentRecord.location);
       const possibleTypes = getPossibleTypes(schemaObject, schemaType);
       const possibleTypeNames = possibleTypes.map(t => t.name);
       const imports = createFragmentImports(baseVisitor, fragment.name.value, possibleTypeNames);

packages/presets/near-operation-file/src/index.ts

@@ -177,7 +177,7 @@ export type NearOperationFileConfig = {
   folder?: string;
   /**
    * @description Optional, override the name of the import namespace used to import from the `baseTypesPath` file.
-   * @default Types
+   * @default Types (if `baseTypesPath` is set)
    *
    * @exampleMarkdown
    * ```ts filename="codegen.ts" {11}
@@ -200,6 +200,30 @@ export type NearOperationFileConfig = {
    * ```
    */
   importTypesNamespace?: string;
+
+  /**
+   * @description Optional, generates one file per operation, using the operation name as the filename. Note: if your documents are in `.graphql` files and there are multiple operations or fragments in a single file, the generated filename will be based on the first operation or fragment found.
+   * @default false
+   *
+   * @exampleMarkdown
+   * ```ts filename="codegen.ts" {11}
+   *  import type { CodegenConfig } from '@graphql-codegen/cli';
+   *  const config: CodegenConfig = {
+   *    // ...
+   *    generates: {
+   *      'path/to/file.ts': {
+   *        preset: 'near-operation-file',
+   *        presetConfig: {
+   *          filePerOperation: true
+   *        },
+   *        plugins: ['typescript-operations'],
+   *      },
+   *    },
+   *  };
+   *  export default config;
+   * ```
+   */
+  filePerOperation?: boolean;
 };
 
 export type FragmentNameToFile = {
@@ -226,6 +250,7 @@ export const preset: Types.OutputPreset<NearOperationFileConfig> = {
       (options.presetConfig.baseTypesPath ? 'Types' : undefined); // When there is `baseTypesPath`, we assume there'd be a type import, so we default `importTypesNamespace` value to `Types` for convenience.
     const importAllFragmentsFrom: FragmentImportFromFn | string | null =
       options.presetConfig.importAllFragmentsFrom || null;
+    const filePerOperation = options.presetConfig.filePerOperation || false;
 
     const shouldAbsolute = !baseTypesPath.startsWith('~');
 
@@ -239,10 +264,20 @@ export const preset: Types.OutputPreset<NearOperationFileConfig> = {
       schemaObject,
       {
         baseDir,
-        generateFilePath(location: string) {
+        generateFilePath({ location, meta }) {
           const newFilePath = defineFilepathSubfolder(location, folder);
 
-          return appendFileNameToFilePath(newFilePath, fileName, extension);
+          let customFilename = fileName;
+          if (filePerOperation) {
+            // Note: If a file only has unnamed operations (i.e. undefined operation name) or fragment (i.e. undefined fragment name).
+            // In such case, the generated filename will be based on the source document file.
+            customFilename =
+              meta['operations'][0]?.name?.value ||
+              meta['fragments'][0]?.name?.value ||
+              customFilename;
+          }
+
+          return appendFileNameToFilePath(newFilePath, customFilename, extension);
         },
         schemaTypesSource: {
           path: shouldAbsolute ? join(options.baseOutputDir, baseTypesPath) : baseTypesPath,

packages/presets/near-operation-file/src/resolve-document-imports.ts

@@ -1,4 +1,9 @@
-import { FragmentDefinitionNode, GraphQLSchema } from 'graphql';
+import {
+  GraphQLSchema,
+  Kind,
+  type FragmentDefinitionNode,
+  type OperationDefinitionNode,
+} from 'graphql';
 import { isUsingTypes, Types } from '@graphql-codegen/plugin-helpers';
 import {
   FragmentImport,
@@ -25,7 +30,13 @@ export type DocumentImportResolverOptions = {
   /**
    * Generates a target file path from the source `document.location`
    */
-  generateFilePath: (location: string) => string;
+  generateFilePath: (params: {
+    location: string;
+    meta: {
+      operations: OperationDefinitionNode[];
+      fragments: FragmentDefinitionNode[];
+    };
+  }) => string;
   /**
    * Schema base types source
    */
@@ -69,7 +80,22 @@ export function resolveDocumentImports<T>(
 
   return documents.map(documentFile => {
     try {
-      const generatedFilePath = generateFilePath(documentFile.location);
+      const meta: {
+        operations: OperationDefinitionNode[];
+        fragments: FragmentDefinitionNode[];
+      } = {
+        operations: [],
+        fragments: [],
+      };
+      for (const definition of documentFile.document.definitions) {
+        if (definition.kind === Kind.OPERATION_DEFINITION) {
+          meta.operations.push(definition);
+        } else if (definition.kind === Kind.FRAGMENT_DEFINITION) {
+          meta.fragments.push(definition);
+        }
+      }
+      const generatedFilePath = generateFilePath({ location: documentFile.location, meta });
+
       const importStatements: string[] = [];
       const { externalFragments, fragmentImports } = resolveFragments(
         generatedFilePath,

packages/presets/near-operation-file/tests/fixtures/file-per-operation.1.graphql.ts

@@ -0,0 +1,23 @@
+export const user1a = /* GraphQL */ `
+  query User1a {
+    user1a: user {
+      id
+    }
+  }
+`;
+export const user1b = /* GraphQL */ `
+  query User1b {
+    user1b: user {
+      id
+      name
+    }
+  }
+`;
+
+export const anon = /* GraphQL */ `
+  query {
+    anon: user {
+      __typename
+    }
+  }
+`;

packages/presets/near-operation-file/tests/fixtures/file-per-operation.2.graphql.ts

@@ -0,0 +1,7 @@
+export const user2 = /* GraphQL */ `
+  query User2 {
+    user2: user {
+      ...UserFragment3
+    }
+  }
+`;

packages/presets/near-operation-file/tests/fixtures/file-per-operation.3.graphql.ts

@@ -0,0 +1,5 @@
+export const userFragment3 = /* GraphQL */ `
+  fragment UserFragment3 on User {
+    id
+  }
+`;

packages/presets/near-operation-file/tests/fixtures/file-per-operation.4.graphql

@@ -0,0 +1,5 @@
+query User4($id: ID!) {
+  user4: user {
+    name
+  }
+}

packages/presets/near-operation-file/tests/fixtures/file-per-operation.5.graphql.ts

@@ -0,0 +1,13 @@
+export const userFragment5a = /* GraphQL */ `
+  fragment UserFragment5a on User {
+    id
+  }
+`;
+
+export const user5b = /* GraphQL */ `
+  query User5b {
+    user1a: user {
+      id
+    }
+  }
+`;