Use GraphQL schema to create TS types and react hooks

Very often when working with backend it is useful for frontend application to know what response can we get.

When working with TypeScript we can actually generate types and hooks using schema.graphql or even “live” backend.

This is where graphql-codegen comes in handy

When you need to create generic components for resources (types) shared across different components you can use typescript plugin

When writing graphql queries, you can also generate type-safe react hooks with typescript-react-apollo plugin. With this plugin you only need to write *.graphql with desired Query, Mutation, Subscription or Fragment (you don’t need to import fragments in your quries!) and respective hooks will be created.

Example configuration codegen.yaml file from project:

overwrite: true

schema: 'http://localhost:4000/graphql'

documents:
  - 'src/**/queries.ts'
  - 'src/**/*.graphql'

generates:
  src/__generated__/types.tsx:
    plugins:
      - 'typescript'
    config:
      maybeValue: T | undefined

  src/__generated__/operations.tsx:
    preset: import-types
    presetConfig:
      typesPath: ./types
    plugins:
      - typescript-operations
    config:
      maybeValue: T | undefined

  src/__generated__/hooks.tsx:
    preset: import-types
    presetConfig:
      typesPath: ./operations
    plugins:
      - typescript-react-apollo
    config:
      maybeValue: T | undefined

Tweet