Nuxt UI Pro v1.0 is out with 50+ Vue components.

nuxt-graphql-middleware
nuxt-graphql-middleware

Expose GraphQL queries and mutations as server API routes.

nuxt-graphql-middleware banner

Nuxt GraphQL Middleware

Expose GraphQL queries and mutations as fully typed API routes.

DocumentationnpmVersion 2.x (for Nuxt 2)

Test

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

npm install --save 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)

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.