Recipes

TypesScript support

Nuxt Apollo gracefully support TypeScript.

TypesScript support

Nuxt Apollo gracefully support TypeScript.


Type Casting

When using TypeScript, It's greatly beneficial to utilize the correct types of your data. This can be done by casting a custom type as demonstrated below.

app.vue
const query = gql`
  query getShips($limit: Int!) {
    ships(limit: $limit) {
      id
      name
    }
  }
`

const variables = { limit: 5 }

type ShipsResult = {
  ships: {
    id?: string;
    name: string;
  }[]
}

useQuery<ShipsResult>(query, variables)
useAsyncQuery<ShipsResult>(query, variables)

GraphQL documents

When importing .gql or .graphql files in TypeScript, A common error you may encounter is "Cannot find module '*.gql' or its corresponding type declarations". This can be resolved by creating a type declaration file as seen below.

globals.d.ts
declare module '*.gql' {
  import { DocumentNode } from 'graphql'
  const Schema: DocumentNode
  export = Schema
}

declare module '*.graphql' {
  import { DocumentNode } from 'graphql'
  const Schema: DocumentNode
  export = Schema
}