dotansimha / dotansimha/graphql-code-generator

Use client preset with imported types

Open
#9,894 1 comment 8 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
11.3k
Forks
1.4k
Avg merge
1d 1h
Merged PRs (30d)
23

Description

### Is your feature request related to a problem? Please describe.

Currently the `typescript-operations` plugin allows me to use the `import-types` preset and with `preResolvesTypes` to generate operation types which pick from existing types (generated elsewhere). I would like to have this same behavior when using the client preset.

### Describe the solution you'd like

I would like to be able to specify `preResolveTypes: false` and provide a `typesPath` (same as currently available for import-types preset) when using the client preset. When set the client preset should not generate new top level operation types but should instead pick from the imported types from the typesPath (again same as is currently setup with import-types)

### Describe alternatives you've considered

I have tried to use a combination of existing plugins to get the same behavior as client but with imported types. This has almost worked but the missing piece is generating the `gql` function which the client function is doing with the currently undocumented gql-tag-operations (https://github.com/dotansimha/graphql-code-generator/blob/master/packages/plugins/typescript/gql-tag-operations/src/index.ts).

My current config has the following components which successfully generates the types (with a custom plugin on the original schema types).
```
'./src/__gql__/schemaTypes.ts': {
plugins: {
'./graphql/plugins/myPluginThing.js': {},
'typescript': {
nonOptionalTypename: true,
},
'typescript-operations': {
skipTypename: true,
dedupeFragments: true,
preResolveTypes: false,
},
},
},
'./src/__gql__/operationTypes.ts': {
preset: 'import-types',
presetConfig: {
typesPath: './schemaTypes',
},
plugins: {
'typescript-operations': {
skipTypename: true,
dedupeFragments: true,
preResolveTypes: false,
},
},
},
'./src/__gql__/apolloClient.ts': {
preset: 'import-types',
presetConfig: {
typesPath: './operationTypes',
},
plugins: {
'typescript-react-apollo': {
withHooks: false,
}
},
},
'./src/__gql__/typedDocNode.ts': {
plugins: {
'typed-document-node': {}
},
},
```

This all works great but we currently rely on the types generated by gql-tag-operations in the client preset to types the gql queries we write e.g. `gql(`query { stuff { id } }`)` has a return type of a TypedDocumentNode (rather than just the document node when using apollos gql function).

I considered using this gql-tag-operations plugin but was unsure how to generate the `SourceWithOperations` object which is handled here in the client preset: https://github.com/dotansimha/graphql-code-generator/blob/master/packages/presets/client/src/process-sources.ts.

### Is your feature request related to a problem? Please describe.

I think the most ideal solution to me is client is extended to support importing types. Alternative better documentation on the `gql-tag-operations` might make sense as it might be a simple to plugin that in? Equally I could just be missing a simple fix for what I'm trying to do so any help if much appreciated.

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.