If you wish to have a simpler integration in a Webpack project, use
graphql-let, it uses this plugin behind the scenes, and provides simpler developer experience.
To use this template, make sure you are using
graphql-tag/loader with Webpack.
This plugin generates TypeScript typings for
.graphql files containing GraphQL documents, which later on can be consumed using
graphql-tag/loader or use
string 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
.graphql files, your IDE will provide auto-complete.
This plugin also handles
.graphql 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
Allows specifying a module definition path prefix to provide distinction between generated types.
By default, only the filename is being used to generate TS module declarations. Setting this to
true will generate it with a full path based on the CWD.
By default, a wildcard is being added as prefix, you can change that to a custom prefix
string (values: DocumentNode, string)
By default, the named exports will have a type
DocumentNode. Change this to "string" if you only use raw strings.
Given that you have a query named
my-query.graphql file, this template will generate the following code:
Accordingly, you can import the generated types and use it in your code: