[near-operation-file] Option to generate files based on operation name, not component name

[eddeee888]

Is your feature request related to a problem? Please describe.

Some tools such as Apollo Tooling generate files based on operation name.

Describe the solution you'd like

To make it easier to migrate from Apollo Tooling to Codegen, we could have an option to generate file name based on operation names.

Examples

// GraphQL Codegen detects gql in a React component:
------- ReactComponent.ts
...
const GET_FOO_QUERY = gql`
  query GetFoo($id: String) {
    ...
  }
`;
...
=========

// BEFORE: the generated filename is always based on the React component's filename:
------- ./__generated__/ReactComponent.ts
...
export type GetFooVariables = ...

export type GetFoo = ...
...
========

// AFTER: add a configuration option so the generated filename is based on the operation name (Query, Mutation, or Fragment):
------- ./__generated__/GetFoo.ts
...
export type GetFooVariables = ...

export type GetFoo = ...

[chihabhajji]

this is the missing piece of the puzzle for me, i want to be able to use the document nodes that were used for introspection instead of having other strings generated

import type { CodegenConfig } from '@graphql-codegen/cli';
import type { NearOperationFileConfig } from '@graphql-codegen/near-operation-file-preset';
import type { TypeScriptPluginConfig } from '@graphql-codegen/typescript';
import type { TypeScriptDocumentNodesRawPluginConfig } from '@graphql-codegen/typescript-document-nodes';
import type { TypeScriptDocumentsPluginConfig } from '@graphql-codegen/typescript-operations';
import type { ReactQueryVisitor } from '@graphql-codegen/typescript-react-query';

const typescriptGenerationConfig = {
  typesPrefix: 'BFF',
  declarationKind: 'type',
  useTypeImports: true,
  useImplementingTypes: true,
  scalars: {
    Date: { input: 'string', output: 'string' },
    DateTime: { input: 'string', output: 'string' },
    UUID: { input: 'string', output: 'string' },
  },
} satisfies TypeScriptPluginConfig;

const config: CodegenConfig = {
  overwrite: true,
  schema: './schema.gql',
  documents: '**/*.{queries,mutations}.{ts,tsx}',
  ignoreNoDocuments: true,

  generates: {
    'bff/models.ts': {
      plugins: ['typescript'],
      config: typescriptGenerationConfig,
    },

    'bff/operations.ts': {
      plugins: [
        {
          add: {
            content: "import type * as BFFModels from './models';",
          },
        },
        'typescript-operations',
      ],
      config: {
        addOperationExport: true,
        dedupeOperationSuffix: true,
        skipTypename: true,
        extractAllFieldsToTypes: true,
        preResolveTypes: false, // use omit and pick
        namespacedImportName: 'BFFModels',
        typesPrefix: 'BFF',
        useTypeImports: true,
      } satisfies TypeScriptDocumentsPluginConfig,
    },

    'src/': {
      preset: 'near-operation-file',
      presetConfig: {
        extension: '.react-query.ts',
        // optimal, but operations are not imported
        // folder: 'hooks',
        baseTypesPath: '../bff/operations',
        importTypesNamespace: 'BFFOperations',
        importAllFragmentsFrom: './bff/operations',
      } satisfies NearOperationFileConfig,
      plugins: ['typescript-document-nodes', 'typescript-react-query'],
      config: {
        reactQueryVersion: 5,
        fetcher: {
          clientImportPath:
            "import {authclientv2 as graphqlClient} from '@\/core\/providers\/auth-client'",
          isReactHook: false,
        },
        errorType: '{ message: string }',

        exposeFetcher: true,
        exposeQueryKeys: true,
        exposeMutationKeys: true,
        exposeQueryRootKeys: true,
        // only used for auth query, so redundant to generate all suspense queries, we will just use the fetcher and replicate the auth current user query
        addSuspenseQuery: false,
        addInfiniteQuery: false,

        importOperationTypesFrom: 'BFFOperations',
        typesPrefix: 'BFF',
        declarationKind: 'type',
        useTypeImports: true,
        // end

        // dedupeFragments: true,
        // pureMagicComment: true,
        documentMode: 'external',
        importDocumentNodeExternallyFrom: 'near-operation-file',
        namespacedImportName: 'Operations',
      } satisfies ReactQueryVisitor['rawConfig'] &
        TypeScriptDocumentsPluginConfig &
        TypeScriptDocumentNodesRawPluginConfig,
    },
  },
};

export default config;

which generates

import type * as BFFOperations from '../../../bff/operations';
import * as Operations from './field.queries';
import {authclientv2 as graphqlClient} from '@/core/providers/auth-client'
import type { GraphQLClient } from 'graphql-request';
import type { RequestInit } from 'graphql-request/dist/types.dom';
import { useMutation, type UseMutationOptions } from '@tanstack/react-query';

function fetcher<TData, TVariables extends { [key: string]: any }>(query: string, variables?: TVariables, requestHeaders?: RequestInit['headers']) {
  return async (): Promise<TData> => graphqlClient.request({
    document: query,
    variables,
    requestHeaders
  });
}






export const CreateFieldDocument = `
    mutation CreateField($input: FieldInput!) {
  createField(fieldInput: $input) {
    success
    message
    data {
      fieldId
      fieldName
      surfaceType
      isIndoor
      facilityId
      description
      matchDurationMinutes
    }
  }
}
    `;

export const useCreateFieldMutation = <
      TError = { message: string },
      TContext = unknown
    >(
      options?: UseMutationOptions<BFFOperations.BFFCreateFieldMutation, TError, BFFOperations.BFFCreateFieldMutationVariables, TContext>,
      headers?: RequestInit['headers']
    ) => {
    
    return useMutation<BFFOperations.BFFCreateFieldMutation, TError, BFFOperations.BFFCreateFieldMutationVariables, TContext>(
      {
    mutationKey: ['CreateField'],
    mutationFn: (variables?: BFFOperations.BFFCreateFieldMutationVariables) => fetcher<BFFOperations.BFFCreateFieldMutation, BFFOperations.BFFCreateFieldMutationVariables>(CreateFieldDocument, variables, headers)(),
    ...options
  }
    )};

useCreateFieldMutation.getKey = () => ['CreateField'];


useCreateFieldMutation.fetcher = (variables: BFFOperations.BFFCreateFieldMutationVariables, headers?: RequestInit['headers']) => fetcher<BFFOperations.BFFCreateFieldMutation, BFFOperations.BFFCreateFieldMutationVariables>(CreateFieldDocument, variables, headers);

export const UpdateFieldDocument = `
    mutation UpdateField($fieldId: UUID!, $input: FieldInput!) {
  updateField(fieldId: $fieldId, fieldInput: $input) {
    success
    message
    data {
      fieldId
      fieldName
      surfaceType
      isIndoor
      facilityId
      description
      matchDurationMinutes
    }
  }
}
    `;

export const useUpdateFieldMutation = <
      TError = { message: string },
      TContext = unknown
    >(
      options?: UseMutationOptions<BFFOperations.BFFUpdateFieldMutation, TError, BFFOperations.BFFUpdateFieldMutationVariables, TContext>,
      headers?: RequestInit['headers']
    ) => {
    
    return useMutation<BFFOperations.BFFUpdateFieldMutation, TError, BFFOperations.BFFUpdateFieldMutationVariables, TContext>(
      {
    mutationKey: ['UpdateField'],
    mutationFn: (variables?: BFFOperations.BFFUpdateFieldMutationVariables) => fetcher<BFFOperations.BFFUpdateFieldMutation, BFFOperations.BFFUpdateFieldMutationVariables>(UpdateFieldDocument, variables, headers)(),
    ...options
  }
    )};

useUpdateFieldMutation.getKey = () => ['UpdateField'];


useUpdateFieldMutation.fetcher = (variables: BFFOperations.BFFUpdateFieldMutationVariables, headers?: RequestInit['headers']) => fetcher<BFFOperations.BFFUpdateFieldMutation, BFFOperations.BFFUpdateFieldMutationVariables>(UpdateFieldDocument, variables, headers);

export const DeleteFieldDocument = `
    mutation DeleteField($fieldId: UUID!) {
  deleteField(fieldId: $fieldId) {
    success
    message
  }
}
    `;

export const useDeleteFieldMutation = <
      TError = { message: string },
      TContext = unknown
    >(
      options?: UseMutationOptions<BFFOperations.BFFDeleteFieldMutation, TError, BFFOperations.BFFDeleteFieldMutationVariables, TContext>,
      headers?: RequestInit['headers']
    ) => {
    
    return useMutation<BFFOperations.BFFDeleteFieldMutation, TError, BFFOperations.BFFDeleteFieldMutationVariables, TContext>(
      {
    mutationKey: ['DeleteField'],
    mutationFn: (variables?: BFFOperations.BFFDeleteFieldMutationVariables) => fetcher<BFFOperations.BFFDeleteFieldMutation, BFFOperations.BFFDeleteFieldMutationVariables>(DeleteFieldDocument, variables, headers)(),
    ...options
  }
    )};

useDeleteFieldMutation.getKey = () => ['DeleteField'];


useDeleteFieldMutation.fetcher = (variables: BFFOperations.BFFDeleteFieldMutationVariables, headers?: RequestInit['headers']) => fetcher<BFFOperations.BFFDeleteFieldMutation, BFFOperations.BFFDeleteFieldMutationVariables>(DeleteFieldDocument, variables, headers);

where clearly Operations isnt being used