tessl/npm-graphql-codegen--typescript-react-apollo
GraphQL Code Generator plugin for generating TypeScript-typed React Apollo components, hooks, and HOCs from GraphQL operations
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Securityby
Pending
The risk profile of this skill
configuration.mddocs/
Configuration Options
The plugin offers extensive configuration options to customize the generated React Apollo code. All options extend the base client-side plugin configuration and provide fine-grained control over code generation.
API
interface ReactApolloRawPluginConfig extends RawClientSideBasePluginConfig {
withComponent?: boolean;
withHOC?: boolean;
withHooks?: boolean;
withMutationFn?: boolean;
withRefetchFn?: boolean;
withFragmentHooks?: boolean;
apolloReactCommonImportFrom?: string;
apolloReactComponentsImportFrom?: string;
apolloReactHocImportFrom?: string;
apolloReactHooksImportFrom?: string;
componentSuffix?: string;
reactApolloVersion?: 2 | 3;
withResultType?: boolean;
withMutationOptionsType?: boolean;
addDocBlocks?: boolean;
defaultBaseOptions?: ReactApolloPluginConfigDefaultBaseOptions;
hooksSuffix?: string;
}
interface ReactApolloPluginConfigDefaultBaseOptions {
awaitRefetchQueries?: boolean;
errorPolicy?: string;
fetchPolicy?: string;
ignoreResults?: boolean;
notifyOnNetworkStatusChange?: boolean;
returnPartialData?: boolean;
ssr?: boolean;
[key: string]: any;
}Configuration Options
Code Generation Controls
withComponent
- Type:
boolean - Default:
false - Description: Enable/disable React Component generation (deprecated for Apollo Client v3)
// Example configuration
config: {
withComponent: true // Generates <QueryComponent>, <MutationComponent>
}withHOC
- Type:
boolean - Default:
false - Description: Enable/disable Higher-Order Component generation (deprecated for Apollo Client v3)
// Example configuration
config: {
withHOC: true // Generates withQuery, withMutation HOCs
}withHooks
- Type:
boolean - Default:
true - Description: Enable/disable React Hooks generation
// Example configuration
config: {
withHooks: true // Generates useQuery, useMutation, useSubscription hooks
}withMutationFn
- Type:
boolean - Default:
true - Description: Enable/disable mutation function signature generation
withRefetchFn
- Type:
boolean - Default:
false - Description: Enable refetch function generation for queries
withFragmentHooks
- Type:
boolean - Default:
false - Description: Enable wrappers for Apollo's useFragment hook
Apollo Client Version
reactApolloVersion
- Type:
2 | 3 - Default:
3 - Description: Target Apollo Client version for import paths and API generation
// Apollo Client v3 (default)
config: {
reactApolloVersion: 3 // Uses @apollo/client imports
}
// Apollo Client v2 (legacy)
config: {
reactApolloVersion: 2 // Uses separate @apollo/react-* packages
}Import Customization
apolloReactCommonImportFrom
- Type:
string - Default:
"@apollo/react-common"(v2) or"@apollo/client"(v3) - Description: Custom import path for Apollo common utilities
apolloReactHooksImportFrom
- Type:
string - Default:
"@apollo/react-hooks"(v2) or"@apollo/client"(v3) - Description: Custom import path for Apollo hooks
Code Style Options
componentSuffix
- Type:
string - Default:
"Component" - Description: Suffix for generated component names
// With default suffix
config: {
componentSuffix: "Component" // Generates GetUserComponent
}
// With custom suffix
config: {
componentSuffix: "View" // Generates GetUserView
}hooksSuffix
- Type:
string - Default:
"" - Description: Custom suffix for hook names
addDocBlocks
- Type:
boolean - Default:
true - Description: Enable/disable JSDoc comment generation
// Generated with addDocBlocks: true
/**
* __useGetUserQuery__
*
* To run a query within a React component, call `useGetUserQuery`...
*/
export function useGetUserQuery(baseOptions?: Apollo.QueryHookOptions<GetUserQuery, GetUserQueryVariables>) {
// ... implementation
}Type Generation
withResultType
- Type:
boolean - Default:
true - Description: Enable/disable result type generation
withMutationOptionsType
- Type:
boolean - Default:
true - Description: Enable/disable mutation options type generation
Default Options
defaultBaseOptions
- Type:
ReactApolloPluginConfigDefaultBaseOptions - Description: Configure default options for all generated hooks
config: {
defaultBaseOptions: {
errorPolicy: 'all',
fetchPolicy: 'cache-first',
notifyOnNetworkStatusChange: true
}
}
// Generated code will include:
const defaultOptions = {
errorPolicy: 'all',
fetchPolicy: 'cache-first',
notifyOnNetworkStatusChange: true
} as const;Common Configuration Examples
Hooks Only (Recommended for Apollo Client v3)
config: {
withHooks: true,
withComponent: false,
withHOC: false,
withMutationFn: true,
reactApolloVersion: 3,
addDocBlocks: true
}Full Apollo Client v2 Compatibility
config: {
withHooks: true,
withComponent: true,
withHOC: true,
reactApolloVersion: 2,
addDocBlocks: true
}Fragment Hooks (Apollo Client 3.7+)
config: {
withHooks: true,
withFragmentHooks: true,
reactApolloVersion: 3
}
// This generates useFragment hooks like:
// export function useUserFieldsFragment<F = { id: string }>(identifiers: F) {
// return Apollo.useFragment<UserFieldsFragment>({
// fragment: UserFieldsFragmentDoc,
// fragmentName: "UserFields",
// from: { __typename: "User", ...identifiers }
// });
// }Hook Naming Customization
config: {
hooksSuffix: "Hook" // Changes useGetUserQuery to useGetUserQueryHook
}