or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdindex.mdplugin-function.mdvalidation.mdvisitor.md
tile.json

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
}