Skip to content

dulnan/nuxt-graphql-middleware

Repository files navigation

nuxt-graphql-middleware banner

Nuxt GraphQL Middleware

Keep your GraphQL server private: 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

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.