TypeScript Codegen

Type definitions for your queries, mutations and fragments are generated automatically using graphql-typescript-deluxe.

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

To enable full GraphQL support in your LSP/IDE, make sure to configure a graphql.config.ts file.

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 setup lang="ts">
import type { FilmFragment } from '#graphql-operations'

defineProps<{
  film: FilmFragment
}>()
</script>