TypeScript React Apollo
Installation
This plugin generates React Apollo components and HOC with TypeScript typings.
It extends the basic TypeScript plugins: , - and thus shares a similar configuration.
Config API Reference
type: default:
Customize the output by enabling/disabling the generated Component (deprecated since Apollo-Client v3). For more details: https://apollographql.com/docs/react/api/react/components
Usage Examples
type: default:
Customize the output by enabling/disabling the HOC (deprecated since Apollo-Client v3). For more details: https://apollographql.com/docs/react/api/react/hoc
Usage Examples
type: default:
Customized the output by enabling/disabling the generated React Hooks. For more details: https://apollographql.com/docs/react/api/react/hooks
Usage Examples
type: default:
Customized the output by enabling/disabling the generated mutation function signature.
Usage Examples
type: default:
Enable generating a function to be used with refetchQueries
Usage Examples
type: default:
Customize the package where apollo-react common lib is loaded from.
type: default:
Customize the package where apollo-react component lib is loaded from.
type: default:
Customize the package where apollo-react HOC lib is loaded from.
type: default:
Customize the package where apollo-react hooks lib is loaded from.
type: default:
You can specify a suffix that gets attached to the name of the generated component.
type: default:
Sets the version of react-apollo. If you are using the old (deprecated) package of , please set this configuration to . If you are using Apollo-Client v3, please set this to .
Usage Examples
type: default:
Customized the output by enabling/disabling the generated result type.
Usage Examples
type: default:
Customized the output by enabling/disabling the generated mutation option type.
Usage Examples
type: default:
Allows you to enable/disable the generation of docblocks in generated code. Some IDE’s (like VSCode) add extra inline information with docblocks, you can disable this feature if your preferred IDE does not.
Usage Examples
type:
type:
type: default:
Deprecated. Changes the documentMode to .
type: default:
Customize from which module will be imported from. This is useful if you want to use modules other than , e.g. .
Usage Examples
graphql.macro
Gatsby
type: default:
Customize from which module will be imported from. This is useful if you want to use modules other than , e.g. .
type: default:
Set this configuration to if you wish to tell codegen to generate code with no identifier.
type: default:
Set this configuration to if you wish to make sure to remove duplicate operation name suffix.
type: default:
Set this configuration to if you wish to disable auto add suffix of operation name, like , , , .
type: default:
Adds a suffix to generated operation result type names
type: default:
Changes the GraphQL operations variables prefix.
type: default:
Changes the GraphQL operations variables suffix.
type: default:
Changes the GraphQL fragments variables prefix.
type: default:
Changes the GraphQL fragments variables suffix.
type: default:
Declares how DocumentNode are created:
- : or other modules (check ) will be used to generate document nodes. If this is used, document nodes are generated on client side i.e. the module used to generate this will be shipped to the client
- : document nodes will be generated as objects when we generate the templates.
- : Similar to documentNode except it imports external fragments instead of embedding them.
- : document nodes are imported from an external file. To be used with
Note that some plugins (like ) also supports for this parameter.
type: default:
If you are using , you can set this to to apply document optimizations for your GraphQL document. This will remove all “loc” and “description” fields from the compiled document, and will remove all empty arrays (such as , and ).
type: default:
This config is used internally by presets, but you can use it manually to tell codegen to prefix all base types that it’s using. This is useful if you wish to generate base types from plugin into a different file, and import it from there.
type: default:
This config should be used if is . This has 2 usage:
-
any string: This would be the path to import document nodes from. This can be used if we want to manually create the document nodes e.g. Use in a separate file and export the generated document
-
‘near-operation-file’: This is a special mode that is intended to be used with preset to import document nodes from those files. If these files are files, we make use of webpack loader.
Usage Examples
type: default:
This config adds PURE magic comment to the static variables to enforce treeshaking for your bundler.
type: default:
If set to true, it will enable support for parsing variables on fragments.
type: default:
Makes scalars strict.
If scalars are found in the schema that are not defined in an error will be thrown during codegen.
Usage Examples
type: default:
Allows you to override the type that unknown scalars will have.
Usage Examples
type:
Extends or overrides the built-in scalars and custom GraphQL scalars to a custom type.
Usage Examples
type: default:
Allow you to override the naming convention of the output. You can either override all namings, or specify an object with specific custom naming convention per output. The format of the converter must be a valid . Allowed values for specific output are: , . You can also use “keep” to keep all GraphQL names as-is. Additionally, you can set to if you want to override the default behavior, which is to preserve underscores.
Available case functions in are , , , , , , , , , , , , , , , , , and See more
Usage Examples
Override All Names
Upper-case enum values
Keep names as is
Remove Underscores
type: default:
Prefixes all the generated types.
Usage Examples
type: default:
Suffixes all the generated types.
Usage Examples
type: default:
Does not add to the generated types, unless it was specified in the selection set.
Usage Examples
type: default:
Automatically adds field to the generated types, even when they are not specified in the selection set, and makes it non-optional
Usage Examples
type: default:
Will use rather than when importing only types. This gives compatibility with TypeScript’s “importsNotUsedAsValues”: “error” option
Usage Examples
type: default:
Removes fragment duplicates for reducing data transfer. It is done by removing sub-fragments imports from fragment definition Instead - all of them are imported to the Operation node.
type: default:
Whether fragment types should be inlined into other operations. “inline” is the default behavior and will perform deep inlining fragment types within operation type definitions. “combine” is the previous behavior that uses fragment type references without inlining the types (and might cause issues with deeply nested fragment that uses list types).
type: default:
Emit legacy common js imports. Default it will be this way it ensure that generated code works with non-compliant bundlers.
Usage Example
With React Hooks
For the given input:
And the following configuration:
Codegen will pre-compile the GraphQL operation into a object, and generate a ready-to-use React Hook for each operation you have.
In your application code, you can import it from the generated file, and use the React Hook in your component code:
Generate Data Component
Codegen also supports generating data Components (deprecated in v3), you can turn it on this way:
Generate HOC
Codegen also supports generating High-Order-Components (deprecated in v3), you can turn it on this way: