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.

Requirements

In order to use this package, please make sure that you have GraphQL operations set as documents: ... in your codegen.yml.

Without loading your GraphQL operations (query, mutation, subscription and fragment), you won't see any change in the generated output.

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: pascal-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 preserves underscores.

Usage Example: Override All Names

config:
  namingConvention: lower-case#lowerCase

Usage Example: Upper-case enum values

config:
  namingConvention:
    typeNames: pascal-case#pascalCase
    enumValues: upper-case#upperCase

Usage Example: Keep

config:
  namingConvention: keep

Usage Example: Remove Underscores

config:
  namingConvention:
    typeNames: pascal-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)

Does not add __typename to the generated types, unless it was specified in the selection set. 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

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

operationResultSuffix (string, default value: "")

Adds a suffix to generated operation result type names

dedupeOperationSuffix (boolean, default value: false)

Set this configuration to true if you wish to make sure to remove duplicate operation name suffix.

documentMode ('graphQLTag' | 'documentNode' | 'external', default value: 'graphQLTag')

Declares how DocumentNode are created: - graphQLTag: graphql-tag or other modules (check gqlImport) will be used to generate document nodes. If this is used, document nodes are generated on client side i.e. the module used to generate this will be shipped to the client - documentNode: document nodes will be generated as objects when we generate the templates. - external: document nodes are imported from an external file. To be used with importDocumentNodeExternallyFrom

importDocumentNodeExternallyFrom (string | 'near-operation-file', default value: '')

This config should be used if documentMode is external. This has 2 usage: - any string: This would be the path to import document nodes from. This can be used if we want to manually create the document nodes e.g. Use graphql-tag in a separate file and export the generated document - 'near-operation-file': This is a special mode that is intended to be used with near-operation-file preset to import document nodes from those files. If these files are .graphql files, we make use of webpack loader.

Usage Example

config:
  documentMode: external
  importDocumentNodeExternallyFrom: path/to/document-node-file

config:
  documentMode: external
  importDocumentNodeExternallyFrom: near-operation-file

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

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

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

apolloReactCommonImportFrom (string, default value: apollo/react-common)

apolloReactComponentsImportFrom (string, default value: apollo/react-components)

apolloReactHocImportFrom (string, default value: apollo/react-hoc)

apolloReactHooksImportFrom (string, default value: apollo/react-hooks)

componentSuffix (string, default value: Component)

You can specify a suffix that gets attached to the name of the generated component.

reactApolloVersion (2 | 3, default value: 2)

Sets the version of react-apollo.

Usage Example

generates:
path/to/file.ts:
 plugins:
   - typescript
   - typescript-operations
   - typescript-react-apollo
 config:
   reactApolloVersion: 3

withResultType (boolean, default value: true)

Customized the output by enabling/disabling the generated result type.

Usage Example

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

withMutationOptionsType (boolean, default value: true)

Customized the output by enabling/disabling the generated mutation option type.

Usage Example: yml

generates: path/to/file.ts: plugins:

  • typescript
  • typescript-operations
  • typescript-react-apollo config: withMutationOptionsType: true

addDocBlocks (boolean, default value: true)

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 prefered IDE does not.

Usage Example: yml

generates: path/to/file.ts: plugins:

  • typescript
  • typescript-operations
  • typescript-react-apollo config: addDocBlocks: true

← TypeScript MongoDBTypeScript Vue Apollo →