namingConvention shouldn't affect documentVariablePrefix/Suffix

[fluidsonic]

Which packages are impacted by your issue?

@graphql-codegen/visitor-plugin-common

Describe the bug

namingConvention is supposed to affect type names (typeNames) and enum value names (enumValues) only.

However, variable names created with typed-document-node for operations are also affected by the option, which is not expected.

Your Example Website or App

https://stackblitz.com/edit/github-xc1bjj?file=types.ts

Steps to Reproduce the Bug or Issue

In the Stackblitz example, set the namingConvention and run npm run generate to test the following scenarios:

namingConvention: { typeNames: "change-case-all#pascalCase" } (default)

export const GqluserDocument = …                // should be [g]ql[U]serDocument
export const GqldeleteUserDocument =  …         // should be [g]ql[D]eleteUserDocument
export const GqlDeleteUserUppercaseDocument = … // should be [g]qlDeleteUserUppercaseDocument
export type  MutationDeleteUserArgs = …         // good, as expected
export type  QueryUserArgs = …                  // good, as expected

namingConvention: { typeNames: "keep" }

export const gqluserDocument = …                // bad, but as expected
export const gqldeleteUserDocument = …          // bad, but as expected
export const gqlDeleteUserUppercaseDocument = … // good, as expected
export type  MutationdeleteUserArgs = …         // bad, but as expected?
export type  QueryuserArgs = …                  // bad, but as expected?

Expected behavior

With namingConvention: { typeNames: "change-case-all#pascalCase" } (default) I expect:

• Types start uppercase.
• Explicit prefixes and suffixes remain exactly as defined. I chose a lowercase prefix here because these are used for variable names, not type names.

export const gqlUserDocument = …                // good, as expected
export const gqlDeleteUserDocument =  …         // good, as expected
export const gqlDeleteUserUppercaseDocument = … // good, as expected
export type  MutationDeleteUserArgs = …         // good, as expected
export type  QueryUserArgs = …                  // good, as expected

It's impossible to achieve that consistency easily with the currently available config options. Either the gql prefix starts uppercase or the …Args types are lowercase after Mutation and Query. The only alternative is to write my own conversion function that checks if the string (which can be either a type or a variable name) starts with my prefix and then treat that in a special way.

Also, I need to write all operation names in uppercase in the GraphQL document in order to achieve gqlUserDocument instead of gqluserDocument, which seems odd.

--

This happens because documentVariablePrefix/Suffix are passed as prefix/suffix to the convertName and thus converted as if they're part of the type name. They should instead be applied after converting the type name.

graphql-code-generator/packages/plugins/other/visitor-plugin-common/src/client-side-base-visitor.ts

Lines 743 to 749 in 39e6e80

	public getOperationVariableName(node: OperationDefinitionNode) {
	return this.convertName(node, {
	suffix: this.config.documentVariableSuffix,
	prefix: this.config.documentVariablePrefix,
	useTypesPrefix: false,
	});
	}

Screenshots or Videos

No response

Platform

• OS: macOS, Linux
• NodeJS: 22.2.0, 18.20.3
• graphql version: 16.8.1, 16.2.0
• @graphql-codegen/cli: 5.0.2
• @graphql-codegen/near-operation-file-preset: 3.0.0
• @graphql-codegen/typed-document-node: 5.0.7
• @graphql-codegen/typescript: 4.0.7
• @graphql-codegen/typescript-operations: 4.2.1
• @graphql-typed-document-node/core: 3.2.0

Codegen Config File

import { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  config: {
    documentVariablePrefix: 'gql',
    namingConvention: {
      typeNames: 'change-case-all#pascalCase',
    },
  },
  schema: 'schema.graphql',
  documents: 'document.graphql',
  generates: {
    'types.ts': {
      plugins: ['typed-document-node', 'typescript', 'typescript-operations'],
    },
  },
};

export default config;

Additional context

Schema

type Mutation {
    deleteUser(id: ID!): Boolean
}

type Query {
    user(id: ID!): User!
}

type User {
    id: ID!
    username: String!
    email: String!
}

Document

query user {
    user(id: 1) {
        id
        username
        email
    }
}

mutation deleteUser($id: ID!) {
    deleteUser(id: $id)
}

mutation DeleteUserUppercase($id: ID!) {
    deleteUser(id: $id)
}