@graphql-codegen/typescript-react-apollo
Version:
GraphQL Code Generator plugin for generating a ready-to-use React Components/HOC/Hooks based on GraphQL operations
282 lines (281 loc) • 9 kB
text/typescript
import { RawClientSideBasePluginConfig } from '@graphql-codegen/visitor-plugin-common';
/**
* @description This plugin generates React Apollo components and HOC with TypeScript typings.
*
* It extends the basic TypeScript plugins: `@graphql-codegen/typescript`, `@graphql-codegen/typescript-operations` - and thus shares a similar configuration.
*/
export interface ReactApolloRawPluginConfig extends RawClientSideBasePluginConfig {
/**
* @description 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
* @default false
*
* @exampleMarkdown
* ```ts filename="codegen.ts"
* import type { CodegenConfig } from '@graphql-codegen/cli';
*
* const config: CodegenConfig = {
* // ...
* generates: {
* 'path/to/file.ts': {
* plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
* config: {
* withComponent: true
* },
* },
* },
* };
* export default config;
* ```
*/
withComponent?: boolean;
/**
* @description Customize the output by enabling/disabling the HOC (deprecated since Apollo-Client v3). For more details: https://apollographql.com/docs/react/api/react/hoc
* @default false
*
* @exampleMarkdown
* ```ts filename="codegen.ts"
* import type { CodegenConfig } from '@graphql-codegen/cli';
*
* const config: CodegenConfig = {
* // ...
* generates: {
* 'path/to/file.ts': {
* plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
* config: {
* withHOC: true
* },
* },
* },
* };
* export default config;
* ```
*/
withHOC?: boolean;
/**
* @description Customized the output by enabling/disabling the generated React Hooks. For more details: https://apollographql.com/docs/react/api/react/hooks
* @default true
*
* @exampleMarkdown
* ```ts filename="codegen.ts"
* import type { CodegenConfig } from '@graphql-codegen/cli';
*
* const config: CodegenConfig = {
* // ...
* generates: {
* 'path/to/file.ts': {
* plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
* config: {
* withHooks: true
* },
* },
* },
* };
* export default config;
* ```
*/
withHooks?: boolean;
/**
* @description Customized the output by enabling/disabling the generated mutation function signature.
* @default true
*
* @exampleMarkdown
* ```ts filename="codegen.ts"
* import type { CodegenConfig } from '@graphql-codegen/cli';
*
* const config: CodegenConfig = {
* // ...
* generates: {
* 'path/to/file.ts': {
* plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
* config: {
* withMutationFn: true
* },
* },
* },
* };
* export default config;
* ```
*/
withMutationFn?: boolean;
/**
* @description Enable generating a function to be used with refetchQueries
* @default false
*
* @exampleMarkdown
* ```ts filename="codegen.ts"
* import type { CodegenConfig } from '@graphql-codegen/cli';
*
* const config: CodegenConfig = {
* // ...
* generates: {
* 'path/to/file.ts': {
* plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
* config: {
* withRefetchFn: false
* },
* },
* },
* };
* export default config;
* ```
*/
withRefetchFn?: boolean;
/**
* @description Customize the package where apollo-react common lib is loaded from.
* @default "@apollo/react-common"
*/
apolloReactCommonImportFrom?: string;
/**
* @description Customize the package where apollo-react component lib is loaded from.
* @default "@apollo/react-components"
*/
apolloReactComponentsImportFrom?: string;
/**
* @description Customize the package where apollo-react HOC lib is loaded from.
* @default "@apollo/react-hoc"
*/
apolloReactHocImportFrom?: string;
/**
* @description Customize the package where apollo-react hooks lib is loaded from.
* @default "@apollo/react-hooks"
*/
apolloReactHooksImportFrom?: string;
/**
* @description You can specify a suffix that gets attached to the name of the generated component.
* @default Component
*/
componentSuffix?: string;
/**
* @description Sets the version of react-apollo.
* If you are using the old (deprecated) package of `react-apollo`, please set this configuration to `2`.
* If you are using Apollo-Client v3, please set this to `3`.
* @default 3
*
* @exampleMarkdown
* ```ts filename="codegen.ts"
* import type { CodegenConfig } from '@graphql-codegen/cli';
*
* const config: CodegenConfig = {
* // ...
* generates: {
* 'path/to/file.ts': {
* plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
* config: {
* reactApolloVersion: 2
* },
* },
* },
* };
* export default config;
* ```
*/
reactApolloVersion?: 2 | 3;
/**
* @description Customized the output by enabling/disabling the generated result type.
* @default true
*
* @exampleMarkdown
* ```ts filename="codegen.ts"
* import type { CodegenConfig } from '@graphql-codegen/cli';
*
* const config: CodegenConfig = {
* // ...
* generates: {
* 'path/to/file.ts': {
* plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
* config: {
* withResultType: true
* },
* },
* },
* };
* export default config;
* ```
*/
withResultType?: boolean;
/**
* @description Customized the output by enabling/disabling the generated mutation option type.
* @default true
*
* @exampleMarkdown
* ```ts filename="codegen.ts"
* import type { CodegenConfig } from '@graphql-codegen/cli';
*
* const config: CodegenConfig = {
* // ...
* generates: {
* 'path/to/file.ts': {
* plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
* config: {
* withMutationOptionsType: true
* },
* },
* },
* };
* export default config;
* ```
*/
withMutationOptionsType?: boolean;
/**
* @description Whether or not to include wrappers for Apollo's useFragment hook.
* @default false
*
* @exampleMarkdown
* ```ts filename="codegen.ts"
* import type { CodegenConfig } from '@graphql-codegen/cli';
*
* const config: CodegenConfig = {
* // ...
* generates: {
* 'path/to/file.ts': {
* plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
* config: {
* withFragmentHooks: true
* },
* },
* },
* };
* export default config;
* ```
*/
withFragmentHooks?: boolean;
/**
* @description 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.
* @default true
*
* @exampleMarkdown
* ```ts filename="codegen.ts"
* import type { CodegenConfig } from '@graphql-codegen/cli';
*
* const config: CodegenConfig = {
* // ...
* generates: {
* 'path/to/file.ts': {
* plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
* config: {
* addDocBlocks: true
* },
* },
* },
* };
* export default config;
* ```
*/
addDocBlocks?: boolean;
/**
* @description Configure default mutation and query hook options.
*/
defaultBaseOptions?: ReactApolloPluginConfigDefaultBaseOptions;
hooksSuffix?: string;
}
export interface ReactApolloPluginConfigDefaultBaseOptions {
awaitRefetchQueries?: boolean;
errorPolicy?: string;
fetchPolicy?: string;
ignoreResults?: boolean;
notifyOnNetworkStatusChange?: boolean;
returnPartialData?: boolean;
ssr?: boolean;
[key: string]: any;
}