dotansimha / dotansimha/graphql-code-generator-community

`typescript-urql` incorrectly prefixes document variables

Open
#180 1 comment 5 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
137
Forks
195
Avg merge
6h 20m
Merged PRs (30d)
16

Description

### Issue workflow progress

- [x] 1. The issue provides a reproduction available on [Github](https://github.com/dotansimha/graphql-code-generator-issue-sandbox-template), [Stackblitz](https://stackblitz.com/github/dotansimha/graphql-code-generator-issue-sandbox-template) or [CodeSandbox](https://codesandbox.io/s/github/dotansimha/graphql-code-generator-issue-sandbox-template)

- 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.

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

const UserDocument = ...

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

> [Link to location in reproduction](https://github.com/arempe93/graphql-codegen-urql-repro/blob/a1af8754f6ebcdfbf26ad38ee766055b6d2edf7f/index.ts#L17-L19)

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:

```yml
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](https://github.com/arempe93/graphql-codegen-urql-repro/blob/a1af8754f6ebcdfbf26ad38ee766055b6d2edf7f/codegen.yml)

### 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.

```yml
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

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.