TypeScript Codegen

Type definitions for your queries, mutations and fragments are generated automatically using GraphQL Code Generator.

You can provide custom configuration for graphql-codegen using the codegenConfig configuration property.

Queries

Given this query:

query allFilms {
  allFilms {
    films {
      id
      title
      edited
    }
  }
}

The following type is generated:

export type AllFilmsQuery = {
  allFilms?: {
    films?: Array<{
      id: string
      title?: string | null
      edited?: string | null
    } | null> | null
  } | null
}

Fragments

Types for fragments are also generated:

fragment film on Film {
  id
  title
  edited
}

export type FilmFragment = {
  title?: string | null
  director?: string | null
  edited?: string | null
}

Importing types

You can import types via the #graphql-operations alias:

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { FilmFragment } from '#graphql-operations'

export default defineComponent({
  props: {
    films: {
      type: Array as PropType<FilmFragment[]>,
      default: () => [],
    },
  },
})
</script>