dotansimha / dotansimha/graphql-code-generator-community
`typescript-urql` incorrectly prefixes document variables
- 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.