TypeScript GraphQL Files Modules
Installation
This plugin generates TypeScript typings for files containing GraphQL documents, which later on can be consumed using or use types if you will use the operations as raw strings, and get type-check and type-safety for your imports. This means that any time you import objects from files, your IDE will provide auto-complete.
This plugin also handles files containing multiple GraphQL documents, and name the imports according to the operation name.
⚠ Fragments are not generated with named imports, only as default imports, due to behavior.
Config API Reference
type: default:
Allows specifying a module definition path prefix to provide distinction between generated types.
Usage Examples
type: default:
By default, only the filename is being used to generate TS module declarations. Setting this to will generate it with a full path based on the CWD.
type: default:
By default, a wildcard is being added as prefix, you can change that to a custom prefix
type: default:
By default, the named exports will have a type . Change this to “string” if you only use raw strings.
Pre-Requirements
To use this template, make sure you are using with Webpack.
Example
Given that you have a query named in file, this template will generate the following code:
Accordingly, you can import the generated types and use it in your code: