TypeScript React Apollo

This plugin generates React Apollo components and HOC with TypeScript typings. It extends the basic TypeScript template @graphql-codegen/typescript and thus shares a similar configuration.

Installation

$ yarn add @graphql-codegen/typescript-react-apollo

Usage

For the given input:

query Test {
  feed {
    id
    commentCount
    repository {
      full_name
      html_url
      owner {
        avatar_url
      }
    }
  }
}

We can use the generated code like this:

  <TestComponent variables={...}>
    ...
  </TestComponent>

Or if you prefer:

  const withTestData = withTestQuery(...);

Configuration

scalars (ScalarsMap)

Extends or overrides the built-in scalars and custom GraphQL scalars to a custom type.

Usage Example

config:
  scalars:
    DateTime: Date
    JSON: { [key: string]: any }

namingConvention (NamingConvention, default value: change-case#pascalCase)

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 module#method. Allowed values for specific output are: typeNames, enumValues. You can also use "keep" to keep all GraphQL names as-is. Additionally you can set transformUnderscore to true if you want to override the default behaviour, which is to preserver underscores.

Usage Example: Override All Names

config:
  namingConvention: change-case#lowerCase

Usage Example: Upper-case enum values

config:
  namingConvention:
    typeNames: change-case#pascalCase
    enumValues: change-case#upperCase

Usage Example: Keep

config:
  namingConvention: keep

Usage Example: Transform Underscores

config:
  typeNames: change-case#pascalCase
  transformUnderscore: true

typesPrefix (string, default value: "")

Prefixes all the generated types.

Usage Example: Add "I" Prefix

config:
  typesPrefix: I

skipTypename (boolean, default value: false)

Automatically adds __typename field to the generated types, even when they are not specified in the selection set.

Usage Example

config:
  skipTypename: true

nonOptionalTypename (boolean, default value: false)

Automatically adds __typename field to the generated types, even when they are not specified in the selection set, and makes it non-optional

Usage Example

config:
  nonOptionalTypename: true

noGraphQLTag (boolean, default value: false)

Instead of adding gql tag with the GraphQL operation, it uses the percompiled JSON representation (DocumentNode) of the operation.

Usage Example

config:
  noGraphQLTag: true

gqlImport (string, default value: gql#graphql-tag)

Customize from which module will gql be imported from. This is useful if you want to use modules other than graphql-tag, e.g. graphql.macro.

Usage Example: graphql.macro

config:
  gqlImport: graphql.macro#gql

Usage Example: Gatsby

config:
  gqlImport: gatsby#graphql

withHOC (boolean, default value: true)

Customized the output by enabling/disabling the HOC.

Usage Example

generates:
path/to/file.ts:
  plugins:
    - typescript
    - typescript-operations
    - typescript-react-apollo
  config:
    withHOC: false

withComponent (boolean, default value: true)

Customized the output by enabling/disabling the generated Component.

Usage Example

generates:
path/to/file.ts:
  plugins:
    - typescript
    - typescript-operations
    - typescript-react-apollo
  config:
    withComponent: false

withHooks (boolean, default value: false)

Customized the output by enabling/disabling the generated React Hooks.

Usage Example

generates:
path/to/file.ts:
  plugins:
    - typescript
    - typescript-operations
    - typescript-react-apollo
  config:
    withHooks: false

withMutationFn (boolean, default value: true)

Customized the output by enabling/disabling the generated mutation function signature.

Usage Example

generates:
path/to/file.ts:
  plugins:
    - typescript
    - typescript-operations
    - typescript-react-apollo
  config:
    withMutationFn: true

hooksImportFrom (string, default value: react-apollo-hooks)

You can specify alternative module that is exports useQuery useMutation and useSubscription. This is useful for further abstraction of some common tasks (eg. error handling). Filepath relative to generated file can be also specified.

reactApolloImportFrom (string, default value: react-apollo)

You can specify module that exports components Query, Mutation, Subscription and HOCs This is useful for further abstraction of some common tasks (eg. error handling). Filepath relative to generated file can be also specified.