@lewebsimple/nuxt-graphql 0.1.7 → 0.1.9

package/README.md

@@ -23,6 +23,25 @@ Install the module to your Nuxt application with one command:
 npx nuxi module add @lewebsimple/nuxt-graphql
 ```
 
+Optionnally adjust options in your Nuxt config. The defaults shown below:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ["@lewebsimple/nuxt-graphql"],
+  graphql: {
+    // GraphQL HTTP endpoint served by Yoga
+    endpoint: "/api/graphql",
+    // Codegen controls document scanning and outputs
+    codegen: {
+      enabled: true,
+      pattern: "**/*.gql", // scan .gql files across layers
+      schemaOutput: "server/graphql/schema.graphql", // saved SDL
+    },
+  },
+});
+```
+
 Define your GraphQL schema in `server/graphql/schema.ts`:
 
 ```ts
@@ -43,7 +62,7 @@ export const schema = createSchema<GraphQLContext>({
 });
 ```
 
-Define your GraphQL context in `server/graphql/context.ts`:
+Optionnally define your GraphQL context in `server/graphql/context.ts`:
 
 ```ts
 import type { H3Event } from "h3";
@@ -59,6 +78,7 @@ export type GraphQLContext = Awaited<ReturnType<typeof createContext>>;
 
 That's it! You can now use Nuxt GraphQL in your Nuxt app ✨
 
+Yoga GraphiQL is available at `http://localhost:3000/api/graphql` by default.
 
 ## Contribution
 

package/dist/module.d.mts

@@ -3,7 +3,6 @@ import * as _nuxt_schema from '@nuxt/schema';
 interface ModuleOptions {
     endpoint?: string;
     codegen?: {
-        enabled?: boolean;
         pattern?: string;
         schemaOutput?: string;
     };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@lewebsimple/nuxt-graphql",
   "configKey": "graphql",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -44,6 +44,16 @@ function writeFileIfChanged(path, content) {
   return true;
 }
 
+async function loadGraphQLSchema(schemaPath) {
+  const { createJiti } = await import('jiti');
+  const jiti = createJiti(import.meta.url, { interopDefault: true });
+  const module = await jiti.import(schemaPath);
+  if (!module.schema) {
+    throw new Error(`${schemaPath} must export a 'schema' variable`);
+  }
+  const { printSchema, lexicographicSortSchema } = await import('graphql');
+  return printSchema(lexicographicSortSchema(module.schema));
+}
 function analyzeGraphQLDocuments(docs) {
   const byFile = /* @__PURE__ */ new Map();
   const operationsByType = {
@@ -92,9 +102,9 @@ function analyzeGraphQLDocuments(docs) {
   return { byFile, operationsByType };
 }
 function generateRegistryByTypeSource(analysis) {
-  const q = analysis.query.map((o) => o.name);
-  const m = analysis.mutation.map((o) => o.name);
-  const s = analysis.subscription.map((o) => o.name);
+  const queries = analysis.query.map((o) => o.name);
+  const mutations = analysis.mutation.map((o) => o.name);
+  const subscriptions = analysis.subscription.map((o) => o.name);
   const lines = [
     `import type { TypedDocumentNode } from "@graphql-typed-document-node/core";`,
     `import * as ops from "#graphql/operations";`,
@@ -102,11 +112,11 @@ function generateRegistryByTypeSource(analysis) {
     `type ResultOf<T> = T extends { __apiType?: (variables: infer _) => infer R } ? R : never;`,
     `type VariablesOf<T> = T extends { __apiType?: (variables: infer V) => infer _ } ? V : never;`
   ];
-  if (q.length > 0) {
+  if (queries.length > 0) {
     lines.push(
       ``,
       `export const queries = {`,
-      ...q.map((name) => `  ${name}: ops.${name}Document,`),
+      ...queries.map((name) => `  ${name}: ops.${name}Document,`),
       `} as const;`
     );
   } else {
@@ -117,11 +127,11 @@ function generateRegistryByTypeSource(analysis) {
     `export type QueryResult<N extends QueryName> = ResultOf<(typeof queries)[N]>;`,
     `export type QueryVariables<N extends QueryName> = VariablesOf<(typeof queries)[N]>;`
   );
-  if (m.length > 0) {
+  if (mutations.length > 0) {
     lines.push(
       ``,
       `export const mutations = {`,
-      ...m.map((name) => `  ${name}: ops.${name}Document,`),
+      ...mutations.map((name) => `  ${name}: ops.${name}Document,`),
       `} as const;`
     );
   } else {
@@ -132,11 +142,11 @@ function generateRegistryByTypeSource(analysis) {
     `export type MutationResult<N extends MutationName> = ResultOf<(typeof mutations)[N]>;`,
     `export type MutationVariables<N extends MutationName> = VariablesOf<(typeof mutations)[N]>;`
   );
-  if (s.length > 0) {
+  if (subscriptions.length > 0) {
     lines.push(
       ``,
       `export const subscriptions = {`,
-      ...s.map((name) => `  ${name}: ops.${name}Document,`),
+      ...subscriptions.map((name) => `  ${name}: ops.${name}Document,`),
       `} as const;`
     );
   } else {
@@ -164,16 +174,6 @@ function formatDefinitions(defs) {
   };
   return defs.map((def) => `${colorOf(def)}${def.name}${reset}`).join(`${dim} / ${reset}`);
 }
-async function loadGraphQLSchema(schemaPath) {
-  const { createJiti } = await import('jiti');
-  const jiti = createJiti(import.meta.url, { interopDefault: true });
-  const module = await jiti.import(schemaPath);
-  if (!module.schema) {
-    throw new Error(`${schemaPath} must export a 'schema' variable`);
-  }
-  const { printSchema, lexicographicSortSchema } = await import('graphql');
-  return printSchema(lexicographicSortSchema(module.schema));
-}
 async function runCodegen(options) {
   const { sdl, documents, operationsFile } = options;
   if (documents.length === 0) {
@@ -219,13 +219,17 @@ const module$1 = defineNuxtModule({
   defaults: {
     endpoint: "/api/graphql",
     codegen: {
-      enabled: true,
       pattern: "**/*.gql",
       schemaOutput: "server/graphql/schema.graphql"
     }
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
+    if (options.endpoint) {
+      if (!options.endpoint.startsWith("/")) {
+        logger.warn("GraphQL endpoint should start with '/' (e.g., '/api/graphql')");
+      }
+    }
     const { rootDir, serverDir } = nuxt.options;
     const layerDirs = [
       ...getLayerDirectories(nuxt),
@@ -250,51 +254,54 @@ const module$1 = defineNuxtModule({
       logger.success(`GraphQL Yoga ready at ${cyan}${url.replace(/\/$/, "")}${endpoint}${reset}`);
     });
     nuxt.options.runtimeConfig.public.graphql = { endpoint };
-    if (options.codegen?.enabled !== false) {
-      const codegenPattern = options.codegen?.pattern ?? "**/*.gql";
-      const graphqlrcFile = join(rootDir, ".graphqlrc");
-      const operationsFile = join(nuxt.options.buildDir, "graphql/operations.ts");
-      const registryFile = join(nuxt.options.buildDir, "graphql/registry.ts");
-      const schemaOutput = options.codegen?.schemaOutput ?? "server/graphql/schema.graphql";
-      const schemaFile = join(rootDir, schemaOutput);
-      const generate = async () => {
-        const [sdl, documents] = await Promise.all([
-          loadGraphQLSchema(schemaPath),
-          findMultipleFiles(layerRootDirs, codegenPattern)
-        ]);
-        const docs = documents.map((document) => ({ path: document, content: readFileSync(document, "utf-8") }));
-        const analysis = analyzeGraphQLDocuments(docs);
-        for (const doc of docs) {
-          const relativePath = doc.path.startsWith(rootDir) ? doc.path.slice(rootDir.length + 1) : doc.path;
-          const defs = analysis.byFile.get(doc.path) ?? [];
-          logger.info(`${cyan}${relativePath}${reset} [${formatDefinitions(defs)}]`);
-        }
-        await runCodegen({ sdl, documents, operationsFile });
-        if (writeFileIfChanged(schemaFile, sdl)) {
-          logger.info(`GraphQL schema saved to ${cyan}${schemaOutput}${reset}`);
-        }
-        const config = JSON.stringify({ schema: relative(rootDir, schemaFile), documents: codegenPattern }, null, 2);
-        if (writeFileIfChanged(graphqlrcFile, config)) {
-          logger.info(`GraphQL config saved to ${cyan}.graphqlrc${reset}`);
-        }
-        if (writeFileIfChanged(registryFile, generateRegistryByTypeSource(analysis.operationsByType))) {
-          logger.info(`GraphQL registry saved to ${cyan}${relative(rootDir, registryFile)}${reset}`);
+    const codegenPattern = options.codegen?.pattern ?? "**/*.gql";
+    const graphqlrcFile = join(rootDir, ".graphqlrc");
+    const operationsFile = join(nuxt.options.buildDir, "graphql/operations.ts");
+    const registryFile = join(nuxt.options.buildDir, "graphql/registry.ts");
+    nuxt.options.alias["#graphql/operations"] = operationsFile;
+    nuxt.options.alias["#graphql/registry"] = registryFile;
+    const schemaOutput = options.codegen?.schemaOutput ?? "server/graphql/schema.graphql";
+    if (schemaOutput) {
+      if (!schemaOutput.endsWith(".graphql")) {
+        logger.warn(`Schema output '${schemaOutput}' should have .graphql extension.`);
+      }
+    }
+    const schemaFile = join(rootDir, schemaOutput);
+    const generate = async () => {
+      const [sdl, documents] = await Promise.all([
+        loadGraphQLSchema(schemaPath),
+        findMultipleFiles(layerRootDirs, codegenPattern)
+      ]);
+      const docs = documents.map((document) => ({ path: document, content: readFileSync(document, "utf-8") }));
+      const analysis = analyzeGraphQLDocuments(docs);
+      for (const doc of docs) {
+        const relativePath = doc.path.startsWith(rootDir) ? doc.path.slice(rootDir.length + 1) : doc.path;
+        const defs = analysis.byFile.get(doc.path) ?? [];
+        logger.info(`${cyan}${relativePath}${reset} [${formatDefinitions(defs)}]`);
+      }
+      await runCodegen({ sdl, documents, operationsFile });
+      if (writeFileIfChanged(schemaFile, sdl)) {
+        logger.info(`GraphQL schema saved to ${cyan}${schemaOutput}${reset}`);
+      }
+      const config = JSON.stringify({ schema: relative(rootDir, schemaFile), documents: codegenPattern }, null, 2);
+      if (writeFileIfChanged(graphqlrcFile, config)) {
+        logger.info(`GraphQL config saved to ${cyan}.graphqlrc${reset}`);
+      }
+      if (writeFileIfChanged(registryFile, generateRegistryByTypeSource(analysis.operationsByType))) {
+        logger.info(`GraphQL registry saved to ${cyan}${relative(rootDir, registryFile)}${reset}`);
+      }
+    };
+    nuxt.hook("prepare:types", async ({ references }) => {
+      await generate();
+      if (existsSync(operationsFile)) references.push({ path: operationsFile });
+      if (existsSync(registryFile)) references.push({ path: registryFile });
+    });
+    if (nuxt.options.dev) {
+      nuxt.hook("builder:watch", async (event, path) => {
+        if (path.endsWith(".gql")) {
+          await generate();
         }
-      };
-      nuxt.hook("prepare:types", async ({ references }) => {
-        await generate();
-        if (existsSync(operationsFile)) references.push({ path: operationsFile });
-        if (existsSync(registryFile)) references.push({ path: registryFile });
       });
-      if (nuxt.options.dev) {
-        nuxt.hook("builder:watch", async (event, path) => {
-          if (path.endsWith(".gql")) {
-            await generate();
-          }
-        });
-      }
-      nuxt.options.alias["#graphql/operations"] = operationsFile;
-      nuxt.options.alias["#graphql/registry"] = registryFile;
     }
     addImportsDir(resolve("./runtime/composables"));
     addPlugin(resolve("./runtime/plugins/graphql"));

package/dist/runtime/composables/useGraphQLMutation.d.ts

@@ -1,10 +1,9 @@
-import { type Ref } from "vue";
 import { type MutationName, type MutationResult, type MutationVariables } from "#graphql/registry";
-type IsEmptyObject<T> = T extends Record<string, never> ? true : keyof T extends never ? true : false;
+import type { IsEmptyObject } from "../utils/helpers.js";
 export declare function useGraphQLMutation<N extends MutationName>(operationName: N): {
-    mutate: (...args: IsEmptyObject<MutationVariables<N>> extends true ? [variables?: MutationVariables<N>] : [variables: MutationVariables<N>]) => Promise<MutationResult<N>>;
-    data: Ref<MutationResult<N> | null, MutationResult<N> | null>;
-    error: Ref<Error | null, Error | null>;
-    pending: Ref<boolean, boolean>;
+    mutate: (...args: IsEmptyObject<MutationVariables<N>> extends true ? [variables?: MutationVariables<N>] : [variables: MutationVariables<N>]) => Promise<{
+        data: MutationResult<N> | null;
+        error: Error | null;
+    }>;
+    pending: import("vue").Ref<boolean, boolean>;
 };
-export {};

package/dist/runtime/composables/useGraphQLMutation.js

@@ -4,22 +4,18 @@ import { mutations } from "#graphql/registry";
 export function useGraphQLMutation(operationName) {
   const document = mutations[operationName];
   const { request } = useGraphQL();
-  const data = ref(null);
-  const error = ref(null);
   const pending = ref(false);
   async function mutate(...args) {
     pending.value = true;
-    error.value = null;
     try {
       const result = await request(document, args[0]);
-      data.value = result;
-      return result;
+      return { data: result, error: null };
     } catch (e) {
-      error.value = e instanceof Error ? e : new Error(String(e));
-      throw e;
+      const error = e instanceof Error ? e : new Error(String(e));
+      return { data: null, error };
     } finally {
       pending.value = false;
     }
   }
-  return { mutate, data, error, pending };
+  return { mutate, pending };
 }

package/dist/runtime/composables/useGraphQLQuery.d.ts

@@ -1,5 +1,4 @@
 import type { AsyncData, AsyncDataOptions } from "#app";
 import { type QueryName, type QueryResult, type QueryVariables } from "#graphql/registry";
-type IsEmptyObject<T> = T extends Record<string, never> ? true : keyof T extends never ? true : false;
+import type { IsEmptyObject } from "../utils/helpers.js";
 export declare function useGraphQLQuery<N extends QueryName>(operationName: N, ...args: IsEmptyObject<QueryVariables<N>> extends true ? [variables?: QueryVariables<N>, opts?: AsyncDataOptions<QueryResult<N>>] : [variables: QueryVariables<N>, opts?: AsyncDataOptions<QueryResult<N>>]): AsyncData<QueryResult<N>, Error | null>;
-export {};

package/dist/runtime/composables/useGraphQLQuery.js

@@ -6,6 +6,6 @@ export function useGraphQLQuery(operationName, ...args) {
   const document = queries[operationName];
   const [variables, opts] = args;
   const { request } = useGraphQL();
-  const key = `gql:q:${operationName}:${hash(variables ?? {})}`;
+  const key = `graphql:query:${operationName}:${hash(variables ?? {})}`;
   return useAsyncData(key, () => request(document, variables), opts);
 }

package/dist/runtime/utils/helpers.d.ts

@@ -0,0 +1 @@
+export type IsEmptyObject<T> = T extends Record<string, never> ? true : keyof T extends never ? true : false;

package/dist/templates/yoga-handler.mjs

@@ -1,7 +1,8 @@
 import { createYoga } from "graphql-yoga";
-import { defineEventHandler, toWebRequest, sendWebResponse } from "h3";
+import { defineEventHandler, toWebRequest, sendWebResponse, createError } from "h3";
 import { schema } from "#graphql/schema";
 import { createContext } from "#graphql/context";
+import { useLogger } from "@nuxt/kit";
 
 let yoga = null;
 
@@ -11,14 +12,23 @@ function getYoga() {
       schema,
       graphqlEndpoint: "{{endpoint}}",
       fetchAPI: globalThis,
+      graphiql: process.env.NODE_ENV !== "production",
     });
   }
   return yoga;
 }
 
 export default defineEventHandler(async (event) => {
-  const request = toWebRequest(event);
-  const context = await createContext(event);
-  const response = await getYoga().handleRequest(request, context);
-  return sendWebResponse(event, response);
+  const logger = useLogger();
+  try {
+    const request = toWebRequest(event);
+    const context = await createContext(event);
+    const response = await getYoga().handleRequest(request, context);
+    return sendWebResponse(event, response);
+  }
+  catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    logger.error("GraphQL Server Error:", message);
+    throw createError({ statusCode: 500, message: "GraphQL server error" });
+  }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lewebsimple/nuxt-graphql",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Opinionated Nuxt module for using GraphQL",
   "repository": "lewebsimple/nuxt-graphql",
   "license": "MIT",
@@ -22,17 +22,6 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "prepack": "nuxt-module-build build",
-    "dev": "npm run dev:prepare && nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
-    "lint": "eslint .",
-    "test": "vitest run",
-    "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
-  },
   "dependencies": {
     "@graphql-codegen/cli": "^5.0.7",
     "@graphql-codegen/typed-document-node": "^5.1.2",
@@ -42,7 +31,7 @@
     "@nuxt/kit": "^4.2.2",
     "graphql": "^16.12.0",
     "graphql-request": "^7.4.0",
-    "graphql-yoga": "^5.17.1",
+    "graphql-yoga": "^5.18.0",
     "jiti": "^2.6.1",
     "ohash": "^2.0.11",
     "tinyglobby": "^0.2.15"
@@ -59,10 +48,25 @@
     "eslint": "^9.39.2",
     "nuxt": "^4.2.2",
     "typescript": "~5.9.3",
-    "vitest": "^4.0.15",
-    "vue-tsc": "^3.1.8"
+    "vitest": "^4.0.16",
+    "vue-tsc": "^3.2.1"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "changlog": {
+    "types": {
+      "chore": false
+    }
+  },
+  "scripts": {
+    "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release --push && npm publish",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   }
 }