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
}