Integrate Nuxt Apollo into your project.
@nuxtjs/apollo
development dependency.yarn add -D @nuxtjs/apollo@next
import { defineNuxtConfig } from 'nuxt/config'export default defineNuxtConfig({ modules: ['@nuxtjs/apollo'],})
import { defineNuxtConfig } from 'nuxt/config'export default defineNuxtConfig({ modules: ['@nuxtjs/apollo'], apollo: { clients: { default: { httpEndpoint: 'https://api.spacex.land/graphql' } }, },})
gql
tag function as well as key composables.<template> <p>There are {{ data?.ships?.length || 0 }} ships.</p></template><script lang="ts" setup>const query = gql` query getShips($limit: Int!) { ships(limit: $limit) { id name } }`const variables = { limit: 5 }const { data } = await useAsyncQuery(query, variables)</script>