`typescript-urql` incorrectly prefixes document variables

Issue workflow progress

[x] 1. The issue provides a reproduction available on Github, Stackblitz or CodeSandbox
- GitHub minimal repro: https://github.com/arempe93/graphql-codegen-urql-repro
- CodeSandbox repro: https://codesandbox.io/s/graphql-codegen-uql-prefix-67dgz5?file=/index.ts:428-446
[ ] 2. A failing test has been provided
[ ] 3. A local solution has been provided
[ ] 4. A pull request is pending review

Describe the bug

When using import-types with typescript-urql, the generated document variable will also incorrectly get prefixed. This same behavior also occurs if you set the importOperationTypesFrom config manually with no presets.

import * as Types from './graphql.d'

const UserDocument = ...

export function useUserQuery(options?: Omit<Urql.UseQueryArgs<Types.UserQueryVariables>, 'query'>) {
  return Urql.useQuery<Types.UserQuery>({ query: Types.UserDocument, ...options });
};

Link to location in reproduction

I believe the problem code is here:

https://github.com/dotansimha/graphql-code-generator/blob/cb59afdcea134385e34d544b90e1cd189945230a/packages/plugins/typescript/urql/src/visitor.ts#L145-L147

Sidenote

This greedy prefixing behavior does not occur if you use the near-operation-file preset with baseTypesPath+importTypesNamespace. It actually does the opposite and doesn't prefix anything; you need to use the typesPrefix config. But at least that config does not prefix the document variable.

To Reproduce

My codegen.yml config file:

schema: schema.graphql
documents: document.graphql
generates:
  graphql.d.ts:
    plugins:
      - typescript
      - typescript-operations
  index.ts:
    preset: "import-types"
    presetConfig:
      typesPath: "./graphql.d"
    plugins:
      - typescript-urql

Link to codegen.yml in reproduction

Expected behavior

A Types. prefix will not be added to the document variable when using import-types

Workaround

Use the add plugin with typesPrefix config instead of import-types preset.

schema: schema.graphql
documents: document.graphql
generates:
  graphql.d.ts:
    plugins:
      - typescript
      - typescript-operations
  index.ts:
    # preset: "import-types"
    # presetConfig:
    #   typesPath: "./graphql.d"
    plugins:
      - typescript-urql
      - add:
          content: "import * as Types from './graphql.d'"
    config:
      typesPrefix: "Types."

Environment:

OS: macOS 11.6
NodeJS: v16.13
@graphql-codegen/import-types-preset: 2.1.15
@graphql-codegen/typescript: 2.4.8
@graphql-codegen/typescript-operations: 2.3.5
@graphql-codegen/typescript-urql: 3.5.6

dotansimha / graphql-code-generator-community