Nuxt GraphQL Middleware

Keep your GraphQL server private: Expose GraphQL queries and mutations as fully typed API routes.

Documentation – npm – Version 2.x (for Nuxt 2)

Features

• Exposes each query and mutation as an API route
• GraphQL requests are only done on the server side
• No GraphQL documents in client bundle
• Includes composables to perform queries or mutations
• Modify request headers, responses and handle errors
• HMR for all GraphQL files
• Integration with Nuxt DevTools
• Full TypeScript integration for schema, queries, mutations and fragments using graphql-code-generator

Setup

Install

npx nuxi@latest module add nuxt-graphql-middleware

Minimal configuration needed:

export default defineNuxtConfig({
  modules: ['nuxt-graphql-middleware'],
  graphqlMiddleware: {
    graphqlEndpoint: 'https://example.com/graphql',
  },
})

Usage

Write your first query, e.g. in pages/films.query.graphql:

query films {
  allFilms {
    films {
      id
    }
  }
}

Your query is now available via the useGraphqlQuery() composable:

const { data } = await useGraphqlQuery('films')
console.log(data.allFilms.films)

Or using the convenience wrapper for useAsyncData:

const { data } = await useAsyncGraphqlQuery('films')
console.log(data.value.allFilms.films)

Alternatively you can also call http://localhost:3000/api/graphql_middleware/query/films to get the same result.

Nuxt 2

The 3.x releases are only compatible with Nuxt 3. The 2.x branch and releases on npm are compatible with Nuxt 2.