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}Table of Contents