Nuxt Apollo gracefully support TypeScript.
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.
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)
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.
declare module '*.gql' {
import { DocumentNode } from 'graphql'
const Schema: DocumentNode
export = Schema
}
declare module '*.graphql' {
import { DocumentNode } from 'graphql'
const Schema: DocumentNode
export = Schema
}