TypeScript React Apollo

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

Installation

Install using npm (or yarn):

$ npm install 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:

  <Test.Component variables={...}>
    ...
  </Test.Component>

Or if you prefer:

  const withTestData = Test.HOC(...);

Configuration

noHOC (default value: false)

This will disable the higher order components generation.

noComponents (default value: false)

This will cause the code generator to omit React Components. So, in case you are just using hooks, you can disable the Components setting this option to true.

withHooks (default value: false)

This will cause the codegen to add React Hooks implementations, to be used in conjunction with react-apollo-hooks. The generated code will wrap base useQuery and useMutation hooks with TypeScript typings.

You can use the generated hook in your Functional Component like this:

  const { data, loading, error } = Test.use(...);

Or if you are using noNamespaces option:

  const { data, loading, error } = useTest(...);

withSubscriptionHooks (default value: false)

This will cause the codegen to add React Hooks even for Subscriptions. Since they are not included in the react-apollo-hooks package, the option is separated.

In order to use this flag, you should add a importUseSubscriptionFrom option specifying the path (relative to generated file) where the useSubscription function and the SubscriptionHookOptions<T, TVariables> type may be found.

For example if you have defined useSubscription in the react-apollo-subscriptions.tsx file, you can use:

withHooks: true
withSubscriptionHooks: true
importUseSubscriptionFrom: './react-apollo-subscriptions'

This feature is experimental. You can find an actual implementation here or from this issue on react-apollo-hooks.

importUseSubscriptionFrom

See withSubscriptionHooks.