nuxt-graphql-middleware
Go to documentationExpose GraphQL queries and mutations as server API routes.
Nuxt GraphQL Middleware
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
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.