Keep your GraphQL server private: Expose GraphQL queries and mutations as fully typed API routes.
Documentation – npm – Version 2.x (for Nuxt 2)
- 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
npx nuxi@latest module add nuxt-graphql-middleware
Minimal configuration needed:
export default defineNuxtConfig({
modules: ['nuxt-graphql-middleware'],
graphqlMiddleware: {
graphqlEndpoint: 'https://example.com/graphql',
},
})
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:https://localhost:3000/api/graphql_middleware/query/films
to get the same
result.
The 3.x releases are only compatible with Nuxt 3. The 2.x branch and releases on npm are compatible with Nuxt 2.