dotansimha / dotansimha/graphql-code-generator

Redundant suffix when handling anonymous operation names with user-provided `namingConvention` function

Open
#10,012 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
11.3k
Forks
1.4k
Avg merge
1d 1h
Merged PRs (30d)
23

Description

### Which packages are impacted by your issue?

@graphql-codegen/visitor-plugin-common

### Describe the bug

When using a custom `namingConvention` function to add a suffix for generated types, the operations' name does not match with the respective value inside TypedDocumentNode. See "Expected behavior" section for more details.

It looks like a redundant suffix is being added in `handleAnonymousOperation`:

https://github.com/dotansimha/graphql-code-generator/blob/9af9ce215e210241b1ae9e8b7e3f60e3f9f10aa7/packages/plugins/other/visitor-plugin-common/src/base-documents-visitor.ts#L218-L234

It's then added again in few lines underneath:

https://github.com/dotansimha/graphql-code-generator/blob/9af9ce215e210241b1ae9e8b7e3f60e3f9f10aa7/packages/plugins/other/visitor-plugin-common/src/base-documents-visitor.ts#L285-L293

### Your Example Website or App

https://stackblitz.com/edit/gql-codgen-13f1zd

### Steps to Reproduce the Bug or Issue

1. Open the reproduction link
2. Run `npm run generate` (optional)
3. Take a look at the errors inside `~/__generated__/gql/graphql.ts`

Or if you prefer, you can create a new project with the provided `codegen.ts` and run graphql-codegen.

### Expected behavior

If I don't specify a `namingConvention` to add a suffix, this is how the generated code would look like:

```ts
export type UserQueryVariables = Exact<{ ... }>;
export type UserQuery = { ... };
export const UserDocument = { ... } as unknown as DocumentNode;
```

I expected that after adding the suffix, it would look like this:

```ts
export type UserQueryVariablesCustomSuffix = Exact<{ ... }>;
export type UserQueryCustomSuffix = { ... };
export const UserDocumentCustomSuffix = { ... } as unknown as DocumentNode;
```

However, this is the result:

```ts
// 👇️ This does not match with DocumentNode in UserDocumentCustomSuffix
export type UserCustomSuffixQueryVariablesCustomSuffix = Exact<{ ... }>; // <-- 👀
// 👇️ This does not match with DocumentNode in UserDocumentCustomSuffix
export type UserCustomSuffixQueryCustomSuffix = { ... };

export const UserDocumentCustomSuffix = { ... } as unknown as DocumentNode;
```

### Screenshots or Videos

![image](https://github.com/dotansimha/graphql-code-generator/assets/110041780/57140ccc-7b5e-4544-b745-50fb589c0bfb)

### Platform

- OS: Linux 6.8 Fedora Linux 40 (Workstation Edition)
- NodeJS: 20.14.0
- `graphql` version: 16.8.2
- `@graphql-codegen/cli` version: 5.0.2

### Codegen Config File

```ts
import { type CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
schema: 'schema.graphql',
documents: 'document.graphql',
generates: {
'./__generated__/gql/': {
preset: 'client',
config: {
namingConvention: './appendSuffix',
},
},
},
}

export default config
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.