{"library":"nuxt-graphql-middleware","title":"Nuxt GraphQL Middleware","description":"Nuxt GraphQL Middleware is an actively developed Nuxt 3 module, currently at version 5.4.0, that streamlines GraphQL integration by acting as a server middleware. It uniquely exposes each GraphQL query and mutation as a fully typed API route, ensuring that GraphQL requests are performed exclusively on the server side, thus keeping GraphQL documents out of the client bundle. The module provides composables like `useGraphqlQuery` and `useAsyncGraphqlQuery` for convenient data fetching within Nuxt applications. It boasts super-fast TypeScript code generation via `graphql-typescript-deluxe`, supports Hot Module Replacement (HMR) for GraphQL files, and includes an integration with the Model Context Protocol (MCP) to expose schema and operations to AI assistants, enabled in dev mode. The project shows a consistent release cadence with frequent patch updates and significant major releases like 5.0.0 which brought build performance improvements and 5.1.0 enforcing Nuxt 3.17+ compatibility. It also integrates with Nuxt DevTools and offers optional client-side caching. Its core differentiator lies in its server-first approach to GraphQL, transforming operations into accessible API endpoints.","language":"javascript","status":"active","last_verified":"Thu Apr 23","install":{"commands":["npm install nuxt-graphql-middleware"],"cli":null},"imports":["import { useAsyncGraphqlQuery } from '#imports'","import { useGraphqlQuery } from '#imports'","import type { GraphqlMiddlewareModuleOptions } from 'nuxt-graphql-middleware'","import { defineClientOptions } from 'nuxt-graphql-middleware/runtime/client-options'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// 1. Install the module:\n// npx nuxi@latest module add nuxt-graphql-middleware\n\n// 2. Configure in nuxt.config.ts\n// import { defineNuxtConfig } from 'nuxt'\n// export default defineNuxtConfig({\n//   modules: ['nuxt-graphql-middleware'],\n//   graphqlMiddleware: {\n//     // Replace with your actual GraphQL API endpoint\n//     graphqlEndpoint: process.env.GRAPHQL_ENDPOINT ?? 'https://swapi-graphql.netlify.app/.netlify/functions/index',\n//     // 'dev-only' downloads schema only during `npm run dev` for type generation\n//     downloadSchema: 'dev-only'\n//   }\n// })\n\n// 3. Create your GraphQL query file, e.g., `assets/queries/films.query.graphql`\n// query films {\n//   allFilms {\n//     films {\n//       id\n//       title\n//       releaseDate\n//     }\n//   }\n// }\n\n// 4. Use the query in a Vue component, e.g., `pages/index.vue`\n<template>\n  <div>\n    <h1>Star Wars Films</h1>\n    <p v-if=\"pending\">Loading films...</p>\n    <p v-if=\"error\">Error: {{ error?.message }}</p>\n    <ul v-if=\"films\">\n      <li v-for=\"film in films\" :key=\"film.id\">\n        {{ film.title }} ({{ film.releaseDate }})\n      </li>\n    </ul>\n    <button @click=\"refresh\">Refresh</button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n// useAsyncGraphqlQuery is auto-imported by Nuxt 3, no explicit import needed in .vue files\n// For explicit type imports: import type { GraphqlMiddlewareModuleOptions } from 'nuxt-graphql-middleware'\n\ninterface Film {\n  id: string;\n  title: string;\n  releaseDate: string;\n}\n\ninterface FilmsData {\n  allFilms: {\n    films: Film[];\n  };\n}\n\nconst { data, pending, error, refresh } = await useAsyncGraphqlQuery<FilmsData>('films');\n\nconst films = computed(() => data.value?.allFilms?.films || []);\n\n// Optional: watch for data changes\nwatch(data, (newValue) => {\n  if (newValue) {\n    console.log('Films loaded:', newValue.allFilms.films.length);\n  }\n});\n\n// Example of server-side data access (during SSR)\nif (import.meta.server && data.value) {\n  console.log('Films fetched on server:', data.value.allFilms.films[0]?.title);\n}\n</script>\n","lang":"typescript","description":"This example demonstrates how to configure `nuxt-graphql-middleware`, define a GraphQL query in a `.graphql` file, and then use the `useAsyncGraphqlQuery` composable within a Nuxt 3 component to fetch and display data, including handling loading and error states.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}