nuxt-graphql-middleware 5.0.0-alpha.1 → 5.0.0-alpha.4

package/dist/module.mjs

@@ -6,18 +6,19 @@ import { useLogger, resolveFiles, defineNuxtModule, resolveAlias, createResolver
 import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
 import { existsSync } from 'fs';
 import { GraphqlMiddlewareTemplate } from '../dist/runtime/settings/index.js';
-import { promises, existsSync as existsSync$1 } from 'node:fs';
+import fs from 'node:fs/promises';
+import { existsSync as existsSync$1, promises } from 'node:fs';
 import { generate } from '@graphql-codegen/cli';
 import * as PluginSchemaAst from '@graphql-codegen/schema-ast';
 import { basename } from 'node:path';
-import { Source, parse, printSourceLocation } from 'graphql';
-import { Generator } from 'graphql-typescript-deluxe';
+import { printSourceLocation, parse, Source } from 'graphql';
+import { Generator, FieldNotFoundError, TypeNotFoundError, FragmentNotFoundError } from 'graphql-typescript-deluxe';
 import { pascalCase } from 'change-case-all';
 import colors from 'picocolors';
 import { validateGraphQlDocuments } from '@graphql-tools/utils';
 
 const name = "nuxt-graphql-middleware";
-const version = "5.0.0-alpha.1";
+const version = "5.0.0-alpha.4";
 
 const DEVTOOLS_UI_ROUTE = "/__nuxt-graphql-middleware";
 const DEVTOOLS_UI_LOCAL_PORT = 3300;
@@ -107,14 +108,14 @@ function validateOptions(options) {
 async function getSchemaPath(schemaPath, options, resolver, writeToDisk = false) {
   const dest = resolver(schemaPath);
   if (!options.downloadSchema) {
-    const fileExists2 = await promises.access(dest).then(() => true).catch(() => false);
+    const fileExists2 = await fs.access(dest).then(() => true).catch(() => false);
     if (!fileExists2) {
       logger.error(
         '"downloadSchema" is set to false but no schema exists at ' + dest
       );
       throw new Error("Missing GraphQL schema.");
     }
-    const schemaContent = await promises.readFile(dest).then((v) => v.toString());
+    const schemaContent = await fs.readFile(dest).then((v) => v.toString());
     return { schemaPath, schemaContent };
   }
   if (!options.graphqlEndpoint) {
@@ -216,20 +217,21 @@ function generateContextTemplate(collectedOperations, serverApiPrefix) {
     queryResult.code,
     mutationResult.code,
     subscriptionResult.code
-  ].join("\n");
+  ].filter(Boolean).join("\n");
   const combinedNitroCode = [
     queryResult.nitroCode,
     mutationResult.nitroCode,
     subscriptionResult.nitroCode
   ].join("\n");
+  const typeImports = allImports.length ? `import type {
+  ${allImports.join(",\n  ")}
+} from './../graphql-operations'` : "";
   return `
 import type { GraphqlResponse } from '#graphql-middleware-server-options-build'
-import type {
-  ${allImports.join(",\n  ")}
-} from './../graphql-operations'
+${typeImports}
 
 declare module '#nuxt-graphql-middleware/generated-types' {
-  export type GraphqlMiddlewareResponseUnion = ${allResultTypes.join(" | ")}
+  export type GraphqlMiddlewareResponseUnion = ${allResultTypes.join(" | ") || "never"}
 ${combinedCode}
 }
 
@@ -241,6 +243,8 @@ ${combinedNitroCode}
 `;
 }
 
+const SYMBOL_CROSS = "x";
+const SYMBOL_CHECK = "\u2714";
 function getMaxLengths(entries) {
   let name = 0;
   let path = 0;
@@ -263,11 +267,11 @@ function logAllEntries(entries) {
   let prevHadError = false;
   for (const entry of entries) {
     const hasErrors = entry.errors.length > 0;
-    const icon = hasErrors ? colors.red(" x ") : colors.green(" \u2713 ");
+    const icon = hasErrors ? colors.red(SYMBOL_CROSS) : colors.green(SYMBOL_CHECK);
     const type = entry.type.padEnd(lengths.type);
     const namePadded = colors.bold(entry.name.padEnd(lengths.name));
     const name = hasErrors ? colors.red(namePadded) : colors.green(namePadded);
-    const path = colors.dim(entry.path.padEnd(lengths.path));
+    const path = colors.dim(entry.path);
     const parts = [icon, type, name, path];
     if (hasErrors && !prevHadError) {
       process.stdout.write("-".repeat(process.stdout.columns) + "\n");
@@ -293,6 +297,7 @@ function logAllEntries(entries) {
   }
   logger.restoreStd();
 }
+
 class CollectedFile {
   filePath;
   fileContents;
@@ -324,12 +329,22 @@ class CollectedFile {
     return false;
   }
 }
+
 class Collector {
-  constructor(schema, context, nuxtConfigDocuments = [], generatorOptions) {
+  constructor(schema, context, nuxtConfigDocuments = [], generatorOptions = {}) {
     this.schema = schema;
     this.context = context;
     this.nuxtConfigDocuments = nuxtConfigDocuments;
-    this.generator = new Generator(schema, generatorOptions);
+    const mappedOptions = { ...generatorOptions };
+    if (!mappedOptions.output) {
+      mappedOptions.output = {};
+    }
+    if (!mappedOptions.output.buildTypeDocFilePath) {
+      mappedOptions.output.buildTypeDocFilePath = (filePath) => {
+        return this.filePathToBuildRelative(filePath);
+      };
+    }
+    this.generator = new Generator(schema, mappedOptions);
   }
   /**
    * All collected files.
@@ -343,10 +358,18 @@ class Collector {
    * A map of operation name and timestamp when the operation was last validated.
    */
   operationTimestamps = /* @__PURE__ */ new Map();
+  /**
+   * The generated operations and fragments.
+   */
+  rpcItems = /* @__PURE__ */ new Map();
   /**
    * The generated TypeScript type template output.
    */
   outputTypes = "";
+  /**
+   * The generated TypeScript enum template output.
+   */
+  outputEnums = "";
   /**
    * The generated oeprations file.
    */
@@ -355,21 +378,31 @@ class Collector {
    * The generated context template file.
    */
   outputContext = "";
-  /**
-   * Whether we need to rebuild the Generator state.
-   */
-  needsRebuild = false;
-  filePathToRelative(filePath) {
-    return filePath.replace(this.context.srcDir, "~");
+  filePathToBuildRelative(filePath) {
+    return "./" + relative(this.context.buildDir, filePath);
+  }
+  filePathToSourceRelative(filePath) {
+    return "./" + relative(process.cwd(), filePath);
   }
   operationToLogEntry(operation, errors) {
     return {
       name: operation.graphqlName,
       type: operation.operationType,
-      path: this.filePathToRelative(operation.filePath),
+      path: this.filePathToSourceRelative(operation.filePath),
       errors
     };
   }
+  buildOutputTypes(file) {
+    let output = "";
+    const enumImports = file.getTypeScriptEnumDependencies();
+    if (enumImports.length) {
+      output += `import type { ${enumImports.join(", ")} } from './enums'
+
+`;
+    }
+    output += file.getSource();
+    return output;
+  }
   /**
    * Executes code gen and performs validation for operations.
    */
@@ -377,8 +410,9 @@ class Collector {
     const output = this.generator.build();
     const operations = output.getCollectedOperations();
     const generatedCode = output.getGeneratedCode();
-    this.outputOperations = output.getOperationsFile();
-    this.outputTypes = output.getEverything();
+    this.outputOperations = output.getOperationsFile().getSource();
+    this.outputEnums = output.buildFile(["enum"]).getSource();
+    this.outputTypes = this.buildOutputTypes(output.getTypes());
     this.outputContext = generateContextTemplate(
       operations,
       this.context.serverApiPrefix
@@ -401,9 +435,7 @@ class Collector {
       if (previousTimestamp === operation.timestamp) {
         continue;
       }
-      const fragments = operation.dependencies.map(
-        (v) => v.type === "fragment-name" ? fragmentMap.get(v.value) || "" : ""
-      ).join("\n");
+      const fragments = operation.getGraphQLFragmentDependencies().map((v) => fragmentMap.get(v) || "").join("\n");
       const fullOperation = operationSourceMap.get(operation.graphqlName) + fragments;
       const source = new Source(fullOperation, basename(operation.filePath));
       const document = parse(source);
@@ -413,12 +445,55 @@ class Collector {
       } else {
         this.operationTimestamps.set(operation.graphqlName, operation.timestamp);
       }
-      logEntries.push(this.operationToLogEntry(operation, errors));
+      const shouldLog = errors.length || !this.context.logOnlyErrors;
+      if (shouldLog) {
+        logEntries.push(this.operationToLogEntry(operation, errors));
+      }
     }
     logAllEntries(logEntries);
     if (hasErrors) {
       throw new Error("GraphQL errors");
     }
+    for (const code of generatedCode) {
+      const id = `${code.identifier}_${code.graphqlName}`;
+      if (code.identifier === "fragment" || code.identifier === "mutation" || code.identifier === "query") {
+        if (this.rpcItems.get(id)?.timestamp === code.timestamp) {
+          continue;
+        }
+        const fragmentDepdendencies = code.getGraphQLFragmentDependencies().map((name) => fragmentMap.get(name) || "").join("\n\n");
+        this.rpcItems.set(id, {
+          id,
+          timestamp: code.timestamp,
+          source: code.source + "\n\n" + fragmentDepdendencies,
+          name: code.graphqlName,
+          filePath: code.filePath,
+          identifier: code.identifier
+        });
+      }
+    }
+  }
+  buildErrorMessage(error) {
+    let output = "";
+    if (error instanceof FieldNotFoundError || error instanceof TypeNotFoundError || error instanceof FragmentNotFoundError) {
+      const filePath = error.context?.filePath;
+      const file = filePath ? this.files.get(filePath) : null;
+      if (filePath) {
+        output += ` | ${this.filePathToSourceRelative(filePath)}
+`;
+      }
+      output += "\n" + error.message + "\n\n";
+      if (file) {
+        output += file.fileContents;
+      }
+    } else if (error instanceof Error) {
+      output += "\n" + error.message;
+    }
+    return output;
+  }
+  logError(error) {
+    let output = `${SYMBOL_CROSS}`;
+    output += this.buildErrorMessage(error);
+    logger.error(colors.red(output));
   }
   /**
    * Get all file paths that match the import patterns.
@@ -435,20 +510,27 @@ class Collector {
    * Initialise the collector.
    */
   async init() {
-    const files = await this.getImportPatternFiles();
-    for (const filePath of files) {
-      await this.addFile(filePath);
-    }
-    this.nuxtConfigDocuments.forEach((docString, i) => {
-      const pseudoPath = `nuxt.config.ts[${i}]`;
-      const file = new CollectedFile(pseudoPath, docString, false);
-      this.files.set(pseudoPath, file);
-      this.generator.add({
-        filePath: "~/nuxt.config.ts",
-        documentNode: file.parsed
-      });
-    });
-    this.buildState();
+    try {
+      const files = await this.getImportPatternFiles();
+      for (const filePath of files) {
+        await this.addFile(filePath);
+      }
+      const nuxtConfigDocuments = this.nuxtConfigDocuments.join("\n\n");
+      if (nuxtConfigDocuments.length) {
+        const filePath = this.context.nuxtConfigPath;
+        const file = new CollectedFile(filePath, nuxtConfigDocuments, false);
+        this.files.set(filePath, file);
+        this.generator.add({
+          filePath,
+          documentNode: file.parsed
+        });
+      }
+      this.buildState();
+      logger.success("All GraphQL documents are valid.");
+    } catch (e) {
+      this.logError(e);
+      throw new Error("GraphQL document validation failed.");
+    }
   }
   /**
    * Add a file.
@@ -457,12 +539,16 @@ class Collector {
     const file = await CollectedFile.fromFilePath(filePath);
     this.files.set(filePath, file);
     this.generator.add({
-      filePath: this.filePathToRelative(filePath),
+      filePath,
       documentNode: file.parsed
     });
     return file;
   }
   async handleAdd(filePath) {
+    const matching = await this.getImportPatternFiles();
+    if (!matching.includes(filePath)) {
+      return false;
+    }
     await this.addFile(filePath);
     return true;
   }
@@ -476,7 +562,7 @@ class Collector {
       return false;
     }
     this.generator.update({
-      filePath: this.filePathToRelative(filePath),
+      filePath,
       documentNode: file.parsed
     });
     return true;
@@ -487,7 +573,7 @@ class Collector {
       return false;
     }
     this.files.delete(filePath);
-    this.generator.remove(this.filePathToRelative(filePath));
+    this.generator.remove(filePath);
     return true;
   }
   handleUnlinkDir(folderPath) {
@@ -506,8 +592,8 @@ class Collector {
    * Handle the watcher event for the given file path.
    */
   async handleWatchEvent(event, filePath) {
+    let hasChanged = false;
     try {
-      let hasChanged = false;
       if (event === "add") {
         hasChanged = await this.handleAdd(filePath);
       } else if (event === "change") {
@@ -523,8 +609,17 @@ class Collector {
       }
     } catch (e) {
       this.generator.resetCaches();
-      console.log(e);
+      logger.error("Failed to update GraphQL code.");
+      this.logError(e);
+      return {
+        hasChanged: false,
+        error: { message: this.buildErrorMessage(e) }
+      };
+    }
+    if (hasChanged) {
+      logger.success("Finished GraphQL code update successfully.");
     }
+    return { hasChanged };
   }
   /**
    * Get the TypeScript types template contents.
@@ -532,6 +627,12 @@ class Collector {
   getTemplateTypes() {
     return this.outputTypes;
   }
+  /**
+   * Get the TypeScript Enums template contents.
+   */
+  getTemplateEnums() {
+    return this.outputEnums;
+  }
   /**
    * Get the context template contents.
    */
@@ -544,13 +645,15 @@ class Collector {
   getTemplateOperations() {
     return this.outputOperations;
   }
-  /**
-   * Log results (including parse/validation errors).
-   */
-  logDocuments(logEverything) {
-  }
 }
 
+function useViteWebSocket(nuxt) {
+  return new Promise((resolve) => {
+    nuxt.hooks.hook("vite:serverCreated", (viteServer) => {
+      resolve(viteServer.ws);
+    });
+  });
+}
 const RPC_NAMESPACE = "nuxt-graphql-middleware";
 const module = defineNuxtModule({
   meta: {
@@ -564,7 +667,8 @@ const module = defineNuxtModule({
   defaults: defaultOptions,
   async setup(passedOptions, nuxt) {
     const options = defu({}, passedOptions, defaultOptions);
-    function addAlias(name2, aliasPath) {
+    function addAlias(name2, arg) {
+      const aliasPath = typeof arg === "string" ? arg : arg.dst;
       nuxt.options.alias[name2] = aliasPath;
     }
     const isModuleBuild = process.env.MODULE_BUILD === "true" && nuxt.options._prepare;
@@ -605,40 +709,37 @@ const module = defineNuxtModule({
     });
     const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
     nuxt.options.build.transpile.push(runtimeDir);
-    const context = {
-      patterns: options.autoImportPatterns || [],
-      srcDir: nuxt.options.srcDir,
-      schemaPath,
-      serverApiPrefix: options.serverApiPrefix
-    };
     const collector = new Collector(
       schema,
-      context,
+      {
+        patterns: options.autoImportPatterns || [],
+        srcDir: nuxt.options.srcDir,
+        buildDir: srcResolver.resolve(nuxt.options.buildDir),
+        nuxtConfigPath: rootResolver.resolve("nuxt.config.ts"),
+        schemaPath,
+        serverApiPrefix: options.serverApiPrefix,
+        logOnlyErrors: !!options.logOnlyErrors
+      },
       options.documents,
       options.codegenConfig
     );
     await collector.init();
-    if (options.devtools) {
+    const isDevToolsEnabled = nuxt.options.dev && options.devtools;
+    let rpc;
+    if (isDevToolsEnabled) {
       const clientPath = moduleResolver.resolve("./client");
       setupDevToolsUI(nuxt, clientPath);
-      const setupRpc = () => {
-        extendServerRpc(RPC_NAMESPACE, {
+      onDevToolsInitialized(() => {
+        rpc = extendServerRpc(RPC_NAMESPACE, {
           // register server RPC functions
           getModuleOptions() {
             return options;
           },
           getDocuments() {
-            return [];
+            return [...collector.rpcItems.values()];
           }
         });
-      };
-      try {
-        setupRpc();
-      } catch (_e) {
-        onDevToolsInitialized(() => {
-          setupRpc();
-        });
-      }
+      });
     }
     nuxt.options.runtimeConfig.public["nuxt-graphql-middleware"] = {
       serverApiPrefix: options.serverApiPrefix
@@ -676,12 +777,22 @@ const module = defineNuxtModule({
       );
       addServerImports(serverUtils);
     }
-    const templateTypescript = addTemplate({
-      filename: GraphqlMiddlewareTemplate.OperationTypes,
-      write: true,
-      getContents: () => collector.getTemplateTypes()
-    });
-    addAlias("#graphql-operations", templateTypescript.dst);
+    addAlias(
+      "#graphql-operations",
+      addTemplate({
+        filename: GraphqlMiddlewareTemplate.OperationTypes,
+        write: true,
+        getContents: () => collector.getTemplateTypes()
+      })
+    );
+    addAlias(
+      "#graphql-operations/enums",
+      addTemplate({
+        filename: GraphqlMiddlewareTemplate.Enums,
+        write: true,
+        getContents: () => collector.getTemplateEnums()
+      })
+    );
     const templateDocuments = addTemplate({
       filename: GraphqlMiddlewareTemplate.Documents,
       write: true,
@@ -738,12 +849,12 @@ declare module '#graphql-documents' {
       }
       logger.info("No graphqlMiddleware.serverOptions file found.");
     };
-    const resolvedPath = findServerOptions();
+    const resolvedServerOptionsPath = findServerOptions();
     const moduleTypesPath = relative(
       nuxt.options.buildDir,
       moduleResolver.resolve("./types")
     );
-    const resolvedPathRelative = resolvedPath ? relative(nuxt.options.buildDir, resolvedPath) : null;
+    const resolvedPathRelative = resolvedServerOptionsPath ? relative(nuxt.options.buildDir, resolvedServerOptionsPath) : null;
     const template = addTemplate({
       filename: "graphqlMiddleware.serverOptions.mjs",
       write: true,
@@ -853,10 +964,22 @@ export type GraphqlClientContext = {}
       );
     });
     if (nuxt.options.dev || nuxt.options._prepare) {
+      let sendError = function(error) {
+        wsPromise.then((ws) => {
+          ws.send({
+            type: "error",
+            err: {
+              message: error.message,
+              stack: ""
+            }
+          });
+        });
+      };
       addServerHandler({
         handler: moduleResolver.resolve("./runtime/serverHandler/debug"),
         route: options.serverApiPrefix + "/debug"
       });
+      const wsPromise = useViteWebSocket(nuxt);
       nuxt.hook("builder:watch", async (event, pathAbsolute) => {
         if (pathAbsolute === schemaPath) {
           return;
@@ -864,7 +987,16 @@ export type GraphqlClientContext = {}
         if (!pathAbsolute.match(/\.(gql|graphql)$/)) {
           return;
         }
-        await collector.handleWatchEvent(event, pathAbsolute);
+        const { hasChanged, error } = await collector.handleWatchEvent(
+          event,
+          pathAbsolute
+        );
+        if (error) {
+          sendError(error);
+        }
+        if (hasChanged && rpc) {
+          rpc.broadcast.documentsUpdated([...collector.rpcItems.values()]);
+        }
       });
     }
   }

package/dist/runtime/composables/nuxtApp.js

@@ -3,6 +3,22 @@ import { getEndpoint } from "./../helpers/composables.js";
 import { hash } from "ohash";
 import { GraphqlMiddlewareCache } from "../helpers/ClientCache.js";
 import { useNuxtApp, useAppConfig } from "#imports";
+function logGraphQLErrors(operation, operationName, errors) {
+  errors.forEach((error) => {
+    console.group(
+      `Error in GraphQL response for ${operation} "${operationName}"`
+    );
+    console.error(`Message: ${error.message}`);
+    if (error.locations && error.locations.length > 0) {
+      const formattedLocations = error.locations.map((loc) => `line ${loc.line}, column ${loc.column}`).join(" | ");
+      console.error(`Locations: ${formattedLocations}`);
+    }
+    if (error.path) {
+      console.error(`Path: ${error.path.join(" -> ")}`);
+    }
+    console.groupEnd();
+  });
+}
 export function performRequest(operation, operationName, method, options, cacheOptions) {
   const state = useGraphqlState();
   const app = useNuxtApp();
@@ -34,6 +50,9 @@ export function performRequest(operation, operationName, method, options, cacheO
       method
     }
   ).then((v) => {
+    if (import.meta.dev && v.errors?.length) {
+      logGraphQLErrors(operation, operationName, v.errors);
+    }
     return {
       ...v,
       data: v.data,

package/dist/runtime/settings/index.d.ts

@@ -2,7 +2,11 @@ export declare enum GraphqlMiddlewareTemplate {
     /**
      * Contains the TS definitions for all GraphQL queries, mutations and fragments.
      */
-    OperationTypes = "graphql-operations.ts",
+    OperationTypes = "graphql-operations/index.d.ts",
+    /**
+     * Contains the TS definitions for all GraphQL queries, mutations and fragments.
+     */
+    Enums = "graphql-operations/enums.ts",
     /**
      * Signature for the GraphQL composable arguments and return types.
      */

package/dist/runtime/settings/index.js

@@ -1,5 +1,6 @@
 export var GraphqlMiddlewareTemplate = /* @__PURE__ */ ((GraphqlMiddlewareTemplate2) => {
-  GraphqlMiddlewareTemplate2["OperationTypes"] = "graphql-operations.ts";
+  GraphqlMiddlewareTemplate2["OperationTypes"] = "graphql-operations/index.d.ts";
+  GraphqlMiddlewareTemplate2["Enums"] = "graphql-operations/enums.ts";
   GraphqlMiddlewareTemplate2["ComposableContext"] = "nuxt-graphql-middleware/generated-types.d.ts";
   GraphqlMiddlewareTemplate2["Documents"] = "nuxt-graphql-middleware/graphql-documents.mjs";
   return GraphqlMiddlewareTemplate2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-graphql-middleware",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.4",
   "description": "Module to perform GraphQL requests as a server middleware.",
   "repository": {
     "type": "git",
@@ -35,8 +35,7 @@
     "dist"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build build",
-    "prepack_": "nuxt-module-build build && npm run client:build",
+    "prepack": "nuxt-module-build build && npm run client:build",
     "dev": "nuxi dev playground --trace-warnings",
     "dev:layers": "nuxi dev playground-layers --trace-warnings",
     "debug": "nuxi dev playground --inspect",
@@ -65,13 +64,9 @@
   "dependencies": {
     "@graphql-codegen/cli": "^5.0.5",
     "@graphql-codegen/schema-ast": "^4.1.0",
-    "@graphql-codegen/typescript": "^4.1.3",
-    "@graphql-codegen/typescript-generic-sdk": "^4.0.1",
-    "@graphql-codegen/typescript-operations": "^4.4.1",
     "@graphql-tools/utils": "^10.2.2",
     "@nuxt/devtools-kit": "1.3.7",
-    "dependency-graph": "^1.0.0",
-    "graphql-typescript-deluxe": "^0.0.1",
+    "graphql-typescript-deluxe": "^0.0.5",
     "inquirer": "^9.3.2",
     "minisearch": "^6.3.0",
     "picocolors": "^1.0.1"