Composables

nuxt-graphql-middleware provides three fully typed composables to perform queries and mutations.

useGraphqlQuery

Executes a query using $fetch and returns the response.

const { data } = await useGraphqlQuery('films')

Variables can be passed as the second argument:

const { data } = await useGraphqlQuery('filmById', { id: '123' })

Arguments are properly type checked:

// ✅ Everyting correct.
const { data } = await useGraphqlQuery('filmById', { id: '123' })

// ❌ Wrong variable type.
const { data } = await useGraphqlQuery('filmById', { id: 123 })

// ❌ Missing variables.
const { data } = await useGraphqlQuery('filmById')

// ❌ Wrong query name.
const { data } = await useGraphqlQuery('getFilmById', { id: '123' })

The return value is also properly typed based on the query response:

const { data } = await useGraphqlQuery('filmById', { id: '123' })

// ❌ Property does not exist.
console.log(data.films)

// ❌ Object is possibly null.
console.log(data.allFilms.films)

// ✅ Everyting correct.
console.log(data.allFilms?.films)

Fetch Options

You can also pass an object instead, which allows you to additionally provide fetch options for the request:

const { data } = await useGraphqlQuery({
  name: 'filmById',
  variables: { id: '123' },
  fetchOptions: {
    headers: {
      authorization: 'foobar',
    },
  },
})

useGraphqlMutation

Same usage like useGraphqlQuery:

const { data } = await useGraphqlMutation('trackVisit')

const { data } = await useGraphqlMutation('addToCart', { id: '456' })

useGraphqlState

This composable allows you to set fetch options for the useGraphqlQuery and useGraphqlMutation composables. One common use case is to pass custom request headers to the GraphQL middleware request:

// plugins/graphqlConfig.ts

export default defineNuxtPlugin((NuxtApp) => {
  // Get the configuration state.
  const state = useGraphqlState()

  if (!state) {
    return
  }

  state.fetchOptions = {
    headers: {
      CustomHeader: 'foobar',
    },
  }
}

You can find more examples in the composables configuration section.