Using `enumValues` with `typescript-resolvers` is incompatible with `verbatimModuleSyntax`

[simon-abbott]

Which packages are impacted by your issue?

@graphql-codegen/cli, @graphql-codegen/typescript-resolvers

Describe the bug

Using both enumValues and the typescript-resolvers plugin causes the generated file to be categorically incompatible with TypeScript's verbatimModuleSyntax option.

Using typescript-resolvers adds the import import { GraphQLResolveInfo } from 'graphql';. This is fine, except that GraphQLResolveInfo is strictly just a type, and therefore requires the use of import type instead. Setting useTypeImports: true fixes this issue, but causes all the enums defined in enumValues to also be imported via import type, which then also breaks the build because they are not re-exported as types.

Your Example Website or App

https://codesandbox.io/p/devbox/crazy-mestorf-gpqtvr?file=%2Fcodegen.ts%3A11%2C12-11%2C33

Steps to Reproduce the Bug or Issue

1. Open the linked repro
2. Run npm run typecheck
3. It will fail with 'GraphQLResolveInfo' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.
4. Enable useTypeImports: true and re-run npm run typecheck
5. It will fail with 'Foo' resolves to a type-only declaration and must be re-exported using a type-only re-export when 'verbatimModuleSyntax' is enabled.

Expected behavior

I expect to be able to make a types file that contains both resolvers and enums that compiles when using modern TS features.

Specifically, I would expect that the hard-coded type-only imports from graphql (namely GraphQLResolveInfo and GraphQLScalarTypeConfig, but there are likely more) would be imported using import type (or import { type X }) even without the use of useTypeImports, and/or that using useTypeImports would still import enumValues as values, not as types.

In general I would expect that useTypeImports wouldn't even be an option, I would expect that types would be imported as types and values imported as values without the end user needing to configure the import style.

Screenshots or Videos

No response

Platform

• OS: Any
• NodeJS: 20
• graphql version: ^16.2.0
• @graphql-codegen/* version(s): ^4.0.1

Codegen Config File

No response

Additional context

No response

[Eprince-hub]

I am having this same issue now that is causing the CI to fail

Error: graphql/graphqlGeneratedTypes.ts(1,10): error TS1484: 'GraphQLResolveInfo' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.
Error: graphql/graphqlGeneratedTypes.ts(2,10): error TS1484: 'Context' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.
Error: Process completed with exit code 2.

You may find the solution here https://github.com/dotansimha/graphql-code-generator/issues/10028#issuecomment-2206940409 helpful, That fixed it for me

[simon-abbott]

As I said, using useTypeImports: true works if you don't also specify any custom enums. As soon as you do, you need to import some imports as type and some as value, and useTypeImports: true treats all imports the same (either all type or no type). If you're not using any custom enums than that is the solution for sure.

[sonewman]

I have come accross this issue also... i narrowed it down to this bit of code https://github.com/dotansimha/graphql-code-generator/blob/master/packages/plugins/typescript/typescript/src/visitor.ts#L358

[eddeee888]

Thanks @sonewman ! Would you like to send a PR to fix? 🙂 One thing to note is we could add export type to that line, but if we need to use the native TypeScript enum as variable, we'd need to import it from the original file, and not the generated types file