TypeScript React-Query
Installation
This plugin generates Hooks with TypeScript typings.
It extends the basic TypeScript plugins: , - and thus shares a similar configuration.
If you are using the package instead of the package in your project, please set the option to .
Config API Reference
type:
Customize the fetcher you wish to use in the generated file. React-Query is agnostic to the data-fetching layer, so you should provide it, or use a custom one.
The following options are available to use:
-
‘fetch’ - requires you to specify endpoint and headers on each call, and uses to do the actual http call.
-
: hardcode your endpoint and fetch options into the generated output, using the environment method. You can also use as endpoint or header value.
-
- You can use custom fetcher method that should implement the exported interface. Example: .
-
: Will generate each hook with argument, where you should pass your own (created from ).
type: default:
For each generate query hook adds field with a corresponding GraphQL query. Useful for .
Usage Examples
type: default:
For each generate query hook adds getKey(variables: QueryVariables) function. Useful for cache updates. If addInfiniteQuery is true, it will also add a getKey function to each infinite query.
Usage Examples
type: default:
For each generate mutation hook adds getKey() function. Useful for call outside of functional component.
Usage Examples
type: default:
For each generate query hook adds field with a corresponding GraphQL query using the fetcher. It is useful for and .
Usage Examples
type: default:
Changes the default “TError” generic type.
type: default:
Adds an Infinite Query along side the standard one
type: default:
If false, it will work with , default value is true.
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:
Adds a suffix to generated operation result type names
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:
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:
This config adds PURE magic comment to the static variables to enforce treeshaking for your bundler.
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:
If set to true, it will enable support for parsing variables on fragments.
type:
Extends or overrides the built-in scalars and custom GraphQL scalars to a custom type.
Usage Examples
type: default:
Prefixes all the generated types.
Usage Examples
type: default:
Suffixes all the generated types.
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:
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.
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: default:
Does not add to the generated types, unless it was specified in the selection set.
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.
Usage Examples
Using default
By default, this plugin will generate a based on the environment global definition.
To use the generated hooks, import it, and then specify the endpoint and optionally :
Using with Codegen configuration
If you wish to avoid specifying and on each hook usage, you can specify those in the file:
And if you wish to have more control over the value, or even provide it in runtime, you can use environment variables:
You can even use a custom variable from your code, and add custom imports with plugin:
The generated hooks doesn’t require you to specify anything, you can just use it as-is:
Using
If you are using , you can set to , and then the generated React Hook will expect you to pass the instance (created by library).
And the, while using, provide your instance:
Using Custom Fetcher
If you wish to create a custom fetcher, you can provide your own function as a Mapper string (). Codegen will take care of importing it and use it as a fetcher.
As a shortcut, the property may also directly contain the function as a mapper string:
Codegen will use , and you can just use the hook directly:
Depending on the property, your should be in the following signature:
Usage example ()
Usage example ()
Using Infinite Query
If you wish to use infinite query for pagination or infinite scroll you can with the config setting. This will however setup an infinite query for every request whether in reality it can do it or not.
To use this you need to return an object of new queries, and it blends them in to the query.
Usage example ()
with the following query: