near-operation-file-preset with typescript-operations not working after upgrade of dependencies to latest version

[Dominik-Reinert]

Which packages are impacted by your issue?

@graphql-codegen/typescript-operations

Describe the bug

Hey folks,

I am trying to upgrade the codegen dependencies from

"@graphql-codegen/cli"	^2.16.2
"@graphql-codegen/near-operation-file-preset"	^2.4.1
"@graphql-codegen/typescript"	"^2.7.3"
"@graphql-codegen/typescript-operations"	"2.5.3"

to the latest version of the respective dependencies.

on the old dependencies, the code generation works fine.

on the new versions however, the generation never finishes.

Running the generation with the --debug flag gives the following output:

[STARTED] Generate to ./app/util/graphql/api-types.ts
[STARTED] Generate to ./app/
[STARTED] Generate to ./bin/generated-schema-introspection.json
[STARTED] Load GraphQL schemas
[STARTED] Load GraphQL schemas
[STARTED] Load GraphQL schemas
[SUCCESS] Load GraphQL schemas
[SUCCESS] Load GraphQL schemas
[SUCCESS] Load GraphQL schemas
[STARTED] Load GraphQL documents
[STARTED] Load GraphQL documents
[STARTED] Load GraphQL documents
[SUCCESS] Load GraphQL documents
[SUCCESS] Load GraphQL documents
[SUCCESS] Load GraphQL documents
[STARTED] Generate
[STARTED] Generate
[STARTED] Generate

I narrowed down the problem to the near-operation-file in combination with the typescript-operations. when removing the operations plugin, the generation works again, but my app is broken as the typescript operations are not generated anymore

Anyone has an idea, what might be causing this?

It is not:

• a memory issue
• a circular dependency in fragment files
• an invalid or inaccessible document

Your Example Website or App

https://stackblitz.com/github/dotansimha/graphql-code-generator-issue-sandbox-template?file=codegen.ts

Steps to Reproduce the Bug or Issue

I dont know, just update the dependencies and run the script as usual

Expected behavior

As a user, I would expect to

1. either see an error indicating what is happening
2. the code generation to work fine like it does on old versions

Screenshots or Videos

No response

Platform

• OS: Linux, github actions

• NodeJS: 18

• graphql version: 16.6

    "@graphql-codegen/cli": "^5.0.3",
    "@graphql-codegen/near-operation-file-preset": "^3.0.0",
    "@graphql-codegen/typescript": "^4.1.2",
    "@graphql-codegen/typescript-operations": "^4.4.0",
  

Codegen Config File

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

export const generationConfig = {
dedupeFragments: true,
maybeValue: 'T | null',
namingConvention: 'keep',
defaultScalarType: 'string',
arrayInputCoercion: false,
scalars: {
BigDecimal: 'number',
},
};

const config: CodegenConfig = {
schema: 'schema.graphql',
documents: [
'./app//queries.ts',
'./app//fragments.ts',
'./app//shared-queries/*',
'./app//shared-fragments/',
'./app/**/.query.ts',
'./app//*.fragment.ts',
'./app//*.mutation.ts',
],
generates: {
'./app/util/graphql/api-types.ts': {
plugins: ['typescript'],
config: generationConfig,
},
'./app/': {
preset: 'near-operation-file',
presetConfig: {
baseTypesPath: 'util/graphql/api-types.ts',
extension: '.api-types.ts',
cwd: './',
folder: 'generated',
},
plugins: ['typescript-operations'],
config: generationConfig,
},
'./bin/generated-schema-introspection.json': {
plugins: ['introspection'],
},
},
};

export default config;

Additional context

No response

[eddeee888]

Hi @Dominik-Reinert ,

I've tried looking at the reproduction but don't see a setup similar to yours. Could you please update that to help me understand where the issue might be?

If that cannot be done, here's some steps to self-debug:

• Try bumping versions one major version at a time to see when it breaks
  • Note that after @graphql-codegen/cli@5, you don't need @graphql-codegen/typescript or @graphql-codegen/typescript-operations explicitly
• Try removing items in generates to see which one causes the issue

[Dominik-Reinert]

hey @eddeee888

sorry I seem to have shared a wrong link 🤔

here is a fork that I hopefully saved correctly:

https://stackblitz.com/edit/github-mfybgazf-1f1ckv15?file=codegen.ts

[Dominik-Reinert]

@eddeee888 is this actually what you were asking about?

[eddeee888]

Hi @Dominik-Reinert ,
I couldn't run codegen on your link. So I forked it with some minor adjustment:

• @graphql-codegen/cli already brings in @graphql-codegen/typescript and @graphql-codegen/typescript-operations, so I removed them
• @graphql-codegen/introspection is in devDeps
• Fixed some paths in codegen.ts

After running, I can see it finishes very quickly without being stuck. Could you check for yourself to make sure the reproduction works correctly for you as well?

[Dominik-Reinert]

hey @eddeee888 I removed the extra libraries and checked for differences applied in your solution.

I reran the generation, but it never finishes. see here:

simplescreenrecorder-2025-02-03_15.15.55.mp4

[eddeee888]

Hi @Dominik-Reinert , is the screen recording running the code in reproduction repo?
If it's happening on your machine (and not in the reproduction repo), it could be hard for me to debug.

Nothing jumps out as unusual in the codegen config you've shared. Maybe you could try narrowing the documents to just one file to see if it fixes it?

[Dominik-Reinert]

Hey @eddeee888, first off: thanks for still following along 🙂

It is failing on my local machine and on github CI. Also across Linux and Mac systems.

As written in the description:

I narrowed down the problem to the near-operation-file in combination with the typescript-operations. when removing the operations plugin, the generation works again, but my app is broken as the typescript operations are not generated anymore

Removing the documents only works if I remove all documents... 😅

Is there no way to get more useful output logs than the few logs I added in the description?

[eddeee888]

Hi @Dominik-Reinert ,

Unfortunately, --verbose and --debug are the only ones we have at the CLI level. For issues like this, I'd normally dive deeper and use debugger/console.log in the codebase's codegen files (in node_modules) to narrow it down further 🙂

I've got a feeling this may have something to do with your specific combination of schema and documents.
Another idea is starting from a bare repo, and slowly add schema and document files until you see the issue?

[Dominik-Reinert]

hey @eddeee888

adding logs to the node modules files could be a good starting point 🤔 Based on the things written here, do you have an entry point where you would expect an issue to happen? 🙂

I narrowed down the generation of types to just a handful of queries and mutations, but it still never finishes.

As stated in the PR description already though,

I narrowed down the problem to the near-operation-file in combination with the typescript-operations. when removing the operations plugin, the generation works again, but my app is broken as the typescript operations are not generated anymore

and that is still the case 😕

[eddeee888]

If operations plugin is the issue, I would suggest starting from these:

1. where the plugin runs
2. Most of the logic is seems to be in the base plugin:
   a. FragmentDefinition: when codegen sees a fragment declaration, it'd run this block
   b. OperationDefinition: when codegen sees an operation declaration (e.g. query Foo, mutation Bar), it'd run this block
   c. SelectionSetToObject: turns selection set into types. There's quite a bit of logic in here 😅