nuxt-graphql-middleware 5.0.0-alpha.2 → 5.0.0-alpha.5

package/dist/module.mjs

@@ -2,22 +2,22 @@ import { loadSchema } from '@graphql-tools/load';
 import { fileURLToPath } from 'url';
 import { relative } from 'pathe';
 import { defu } from 'defu';
-import { useLogger, resolveFiles, defineNuxtModule, resolveAlias, createResolver, addImports, addServerImports, addTemplate, addServerHandler, addPlugin } from '@nuxt/kit';
+import { useLogger, resolveFiles, defineNuxtModule, resolveAlias, createResolver, addImports, addServerImports, addTypeTemplate, addTemplate, addServerHandler, addPlugin } from '@nuxt/kit';
 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 { pascalCase } from 'change-case-all';
+import { printSourceLocation, parse, OperationTypeNode, Source } from 'graphql';
+import { Generator, FieldNotFoundError, TypeNotFoundError, FragmentNotFoundError } from 'graphql-typescript-deluxe';
 import colors from 'picocolors';
 import { validateGraphQlDocuments } from '@graphql-tools/utils';
 
 const name = "nuxt-graphql-middleware";
-const version = "5.0.0-alpha.2";
+const version = "5.0.0-alpha.5";
 
 const DEVTOOLS_UI_ROUTE = "/__nuxt-graphql-middleware";
 const DEVTOOLS_UI_LOCAL_PORT = 3300;
@@ -97,7 +97,8 @@ const defaultOptions = {
   debug: false,
   includeComposables: true,
   documents: [],
-  devtools: true
+  devtools: true,
+  errorOverlay: true
 };
 function validateOptions(options) {
   if (!options.graphqlEndpoint) {
@@ -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) {
@@ -135,112 +136,23 @@ const fileExists = (path, extensions = ["js", "ts", "mjs"]) => {
   return extension ? `${path}.${extension}` : null;
 };
 
-function groupOperationsByType(ops) {
-  const result = {
-    query: {},
-    mutation: {},
-    subscription: {}
-  };
-  for (const op of ops) {
-    result[op.operationType][op.graphqlName] = {
-      hasVariables: op.hasVariables,
-      variablesOptional: !op.needsVariables
-    };
-  }
-  return result;
-}
-function buildOperationTypeCode(operationMetadata, typeName, serverApiPrefix) {
-  const imports = [];
-  const resultTypes = [];
-  let code = "";
-  let nitroCode = "";
-  const operationNames = Object.keys(operationMetadata);
-  if (operationNames.length === 0) {
-    return { code, nitroCode, imports, resultTypes };
-  }
-  const lines = [];
-  const nitroLines = [];
-  for (const name of operationNames) {
-    const nameResult = pascalCase(`${name}${typeName}`);
-    const nameVariables = pascalCase(`${name}${typeName}Variables`);
-    resultTypes.push(nameResult);
-    imports.push(nameResult);
-    const { hasVariables, variablesOptional } = operationMetadata[name];
-    if (hasVariables) {
-      imports.push(nameVariables);
-    }
-    const variablesType = hasVariables ? nameVariables : "null";
-    lines.push(
-      `    ${name}: [${variablesType}, ${variablesOptional ? "true" : "false"}, ${nameResult}]`
-    );
-    nitroLines.push(`
-    '${serverApiPrefix}/${typeName.toLowerCase()}/${name}': {
-      'default': GraphqlResponse<${nameResult}>
-    }`);
-  }
-  code += `  export type GraphqlMiddleware${typeName} = {
-${lines.join(",\n")}
-  }
-`;
-  nitroCode += nitroLines.join("\n");
-  return { code, nitroCode, imports, resultTypes };
-}
-function generateContextTemplate(collectedOperations, serverApiPrefix) {
-  const grouped = groupOperationsByType(collectedOperations);
-  const queryResult = buildOperationTypeCode(
-    grouped.query,
-    "Query",
-    serverApiPrefix
-  );
-  const mutationResult = buildOperationTypeCode(
-    grouped.mutation,
-    "Mutation",
-    serverApiPrefix
-  );
-  const subscriptionResult = buildOperationTypeCode(
-    grouped.subscription,
-    "Subscription",
-    serverApiPrefix
-  );
-  const allImports = [
-    ...queryResult.imports,
-    ...mutationResult.imports,
-    ...subscriptionResult.imports
-  ];
-  const allResultTypes = [
-    ...queryResult.resultTypes,
-    ...mutationResult.resultTypes,
-    ...subscriptionResult.resultTypes
-  ];
-  const combinedCode = [
-    queryResult.code,
-    mutationResult.code,
-    subscriptionResult.code
-  ].join("\n");
-  const combinedNitroCode = [
-    queryResult.nitroCode,
-    mutationResult.nitroCode,
-    subscriptionResult.nitroCode
-  ].join("\n");
-  return `
-import type { GraphqlResponse } from '#graphql-middleware-server-options-build'
-import type {
-  ${allImports.join(",\n  ")}
+function generateResponseTypeTemplate(operations, context) {
+  const allTypes = operations.map((v) => v.typeName).sort();
+  return `import type {
+  ${allTypes.join(",\n  ")}
 } from './../graphql-operations'
+import type { GraphqlResponseAdditions } from './server-options'
+import type { GraphqlServerResponse } from '${context.runtimeTypesPath}'
 
-declare module '#nuxt-graphql-middleware/generated-types' {
-  export type GraphqlMiddlewareResponseUnion = ${allResultTypes.join(" | ")}
-${combinedCode}
-}
+export type GraphqlMiddlewareResponseUnion =
+  | ${allTypes.join("\n  | ") || "never"}
 
-declare module 'nitropack' {
-  interface InternalApi {
-${combinedNitroCode}
-  }
-}
-`;
+export type GraphqlResponse<T> = GraphqlServerResponse<T> & GraphqlResponseAdditions
+export type GraphqlResponseTyped = GraphqlResponse<GraphqlMiddlewareResponseUnion>`;
 }
 
+const SYMBOL_CROSS = "x";
+const SYMBOL_CHECK = "\u2714";
 function getMaxLengths(entries) {
   let name = 0;
   let path = 0;
@@ -263,7 +175,7 @@ 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("\u2714");
+    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);
@@ -293,6 +205,7 @@ function logAllEntries(entries) {
   }
   logger.restoreStd();
 }
+
 class CollectedFile {
   filePath;
   fileContents;
@@ -324,12 +237,61 @@ class CollectedFile {
     return false;
   }
 }
+
+function generateNitroTypes(operations, serverApiPrefix) {
+  const endpoints = [];
+  const imports = [];
+  for (const operation of operations) {
+    imports.push(operation.typeName);
+    const method = operation.operationType === OperationTypeNode.QUERY ? "get" : "post";
+    endpoints.push(
+      `    '${serverApiPrefix}/${operation.operationType}/${operation.graphqlName}': {
+      '${method}': GraphqlResponse<${operation.typeName}>
+    }`
+    );
+  }
+  return `import type { GraphqlResponse } from './response'
+import type {
+  ${imports.sort().join(",\n  ")}
+} from './../graphql-operations'
+
+declare module 'nitropack/types' {
+  interface InternalApi {
+${endpoints.sort().join("\n")}
+  }
+}`;
+}
+
+function generateSourcesTemplate(operations, srcDir) {
+  const lines = [];
+  for (const operation of operations) {
+    const filePath = relative(srcDir, operation.filePath);
+    lines.push(
+      `${operation.operationType}_${operation.graphqlName}: '${filePath}',`
+    );
+  }
+  return `
+export const operationSources = {
+  ${lines.join("\n  ")}
+}
+`;
+}
+
 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.
@@ -351,29 +313,55 @@ class Collector {
    * The generated TypeScript type template output.
    */
   outputTypes = "";
+  /**
+   * The generated TypeScript enum template output.
+   */
+  outputEnums = "";
   /**
    * The generated oeprations file.
    */
   outputOperations = "";
+  /**
+   * The generated oepration types file.
+   */
+  outputOperationTypes = "";
   /**
    * The generated context template file.
    */
-  outputContext = "";
+  outputResponseTypes = "";
+  /**
+   * The generated nitro template file.
+   */
+  outputNitroTypes = "";
   /**
-   * Whether we need to rebuild the Generator state.
+   * The generated nitro template file.
    */
-  needsRebuild = false;
-  filePathToRelative(filePath) {
+  outputSources = "";
+  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: 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.
    */
@@ -381,12 +369,27 @@ class Collector {
     const output = this.generator.build();
     const operations = output.getCollectedOperations();
     const generatedCode = output.getGeneratedCode();
-    this.outputOperations = output.getOperationsFile();
-    this.outputTypes = output.getEverything();
-    this.outputContext = generateContextTemplate(
+    this.outputOperations = output.getOperationsFile({
+      exportName: "documents",
+      minify: !this.context.isDev
+    }).getSource();
+    this.outputOperationTypes = output.getOperationTypesFile({
+      importFrom: "./../graphql-operations"
+    }).getSource();
+    this.outputEnums = output.buildFile(["enum"]).getSource();
+    this.outputTypes = this.buildOutputTypes(output.getTypes());
+    this.outputResponseTypes = generateResponseTypeTemplate(
+      operations,
+      this.context
+    );
+    this.outputNitroTypes = generateNitroTypes(
       operations,
       this.context.serverApiPrefix
     );
+    this.outputSources = generateSourcesTemplate(
+      operations,
+      this.context.rootDir
+    );
     const fragmentMap = /* @__PURE__ */ new Map();
     const operationSourceMap = /* @__PURE__ */ new Map();
     for (const code of generatedCode) {
@@ -415,7 +418,10 @@ 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) {
@@ -439,6 +445,29 @@ class Collector {
       }
     }
   }
+  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.
    */
@@ -454,21 +483,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: this.filePathToRelative("nuxt.config.ts"),
-        documentNode: file.parsed
-      });
-    });
-    this.buildState();
-    logger.success("All GraphQL documents are valid.");
+    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.
@@ -477,12 +512,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;
   }
@@ -496,7 +535,7 @@ class Collector {
       return false;
     }
     this.generator.update({
-      filePath: this.filePathToRelative(filePath),
+      filePath,
       documentNode: file.parsed
     });
     return true;
@@ -507,7 +546,7 @@ class Collector {
       return false;
     }
     this.files.delete(filePath);
-    this.generator.remove(this.filePathToRelative(filePath));
+    this.generator.remove(filePath);
     return true;
   }
   handleUnlinkDir(folderPath) {
@@ -544,13 +583,16 @@ class Collector {
     } catch (e) {
       this.generator.resetCaches();
       logger.error("Failed to update GraphQL code.");
-      logger.error(e);
-      return false;
+      this.logError(e);
+      return {
+        hasChanged: false,
+        error: { message: this.buildErrorMessage(e) }
+      };
     }
     if (hasChanged) {
-      logger.success("Finished GraphQL code update.");
+      logger.success("Finished GraphQL code update successfully.");
     }
-    return hasChanged;
+    return { hasChanged };
   }
   /**
    * Get the TypeScript types template contents.
@@ -558,11 +600,17 @@ class Collector {
   getTemplateTypes() {
     return this.outputTypes;
   }
+  /**
+   * Get the TypeScript Enums template contents.
+   */
+  getTemplateEnums() {
+    return this.outputEnums;
+  }
   /**
    * Get the context template contents.
    */
-  getTemplateContext() {
-    return this.outputContext;
+  getTemplateResponseTypes() {
+    return this.outputResponseTypes;
   }
   /**
    * Get the operations template contents.
@@ -570,8 +618,46 @@ class Collector {
   getTemplateOperations() {
     return this.outputOperations;
   }
+  /**
+   * Get the operation types template contents.
+   */
+  getTemplateOperationTypes() {
+    return this.outputOperationTypes;
+  }
+  /**
+   * Get the nitro types template contents.
+   */
+  getTemplateNitroTypes() {
+    return this.outputNitroTypes;
+  }
+  /**
+   * Get the nitro types template contents.
+   */
+  getTemplateSources() {
+    return this.outputSources;
+  }
+}
+
+function generateDocumentTypesTemplate() {
+  return `
+import type { Query, Mutation } from './operations'
+
+declare module '#nuxt-graphql-middleware/documents' {
+  export type Documents = {
+    query: Record<keyof Query, string>
+    mutation: Record<keyof Mutation, string>
+  }
+  export const documents: Documents
+}`;
 }
 
+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: {
@@ -579,14 +665,19 @@ const module = defineNuxtModule({
     configKey: "graphqlMiddleware",
     version,
     compatibility: {
-      nuxt: ">=3.13.0"
+      nuxt: ">=3.15.0"
     }
   },
   defaults: defaultOptions,
   async setup(passedOptions, nuxt) {
     const options = defu({}, passedOptions, defaultOptions);
-    function addAlias(name2, aliasPath) {
-      nuxt.options.alias[name2] = aliasPath;
+    function addAlias(name2, path) {
+      nuxt.options.alias[name2] = path;
+    }
+    function inlineNitroExternals(path) {
+      nuxt.options.nitro.externals = nuxt.options.nitro.externals || {};
+      nuxt.options.nitro.externals.inline = nuxt.options.nitro.externals.inline || [];
+      nuxt.options.nitro.externals.inline.push(path);
     }
     const isModuleBuild = process.env.MODULE_BUILD === "true" && nuxt.options._prepare;
     if (isModuleBuild) {
@@ -626,12 +717,26 @@ const module = defineNuxtModule({
     });
     const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
     nuxt.options.build.transpile.push(runtimeDir);
+    const nuxtGraphqlMiddlewareBuildDir = nuxt.options.buildDir + "/nuxt-graphql-middleware";
+    const operationTypesBuildDir = nuxt.options.buildDir + "/graphql-operations";
+    const toBuildRelative = (path) => {
+      return relative(nuxtGraphqlMiddlewareBuildDir, path);
+    };
+    addAlias("#nuxt-graphql-middleware", nuxtGraphqlMiddlewareBuildDir);
+    addAlias("#graphql-operations", operationTypesBuildDir);
     const context = {
+      isDev: nuxt.options.dev,
       patterns: options.autoImportPatterns || [],
       srcDir: nuxt.options.srcDir,
+      rootDir: nuxt.options.rootDir,
       buildDir: srcResolver.resolve(nuxt.options.buildDir),
+      nuxtConfigPath: rootResolver.resolve("nuxt.config.ts"),
       schemaPath,
-      serverApiPrefix: options.serverApiPrefix
+      serverApiPrefix: options.serverApiPrefix,
+      logOnlyErrors: !!options.logOnlyErrors,
+      runtimeTypesPath: toBuildRelative(
+        moduleResolver.resolve("./runtime/types.ts")
+      )
     };
     const collector = new Collector(
       schema,
@@ -657,9 +762,6 @@ const module = defineNuxtModule({
         });
       });
     }
-    nuxt.options.runtimeConfig.public["nuxt-graphql-middleware"] = {
-      serverApiPrefix: options.serverApiPrefix
-    };
     nuxt.options.appConfig.graphqlMiddleware = {
       clientCacheEnabled: !!options.clientCache?.enabled,
       clientCacheMaxSize: options.clientCache?.maxSize || 100
@@ -693,44 +795,73 @@ const module = defineNuxtModule({
       );
       addServerImports(serverUtils);
     }
-    const templateTypescript = addTemplate({
+    addTypeTemplate({
       filename: GraphqlMiddlewareTemplate.OperationTypes,
       write: true,
       getContents: () => collector.getTemplateTypes()
     });
-    addAlias("#graphql-operations", templateTypescript.dst);
+    addTypeTemplate({
+      filename: GraphqlMiddlewareTemplate.Types,
+      write: true,
+      getContents: () => {
+        return `
+declare module '#nuxt-graphql-middleware/sources' {
+  export const operationSources: Record<string, string>
+}
+`;
+      }
+    });
+    addTemplate({
+      filename: GraphqlMiddlewareTemplate.Enums,
+      write: true,
+      getContents: () => collector.getTemplateEnums()
+    });
+    addTemplate({
+      filename: GraphqlMiddlewareTemplate.OperationSources,
+      write: true,
+      getContents: () => collector.getTemplateSources()
+    });
+    addTemplate({
+      filename: GraphqlMiddlewareTemplate.Helpers,
+      write: true,
+      getContents: () => `export const serverApiPrefix = '${context.serverApiPrefix}'
+export function getEndpoint(operation, operationName) {
+  return '${context.serverApiPrefix}' + '/' + operation + '/' + operationName
+}
+`
+    });
+    addTypeTemplate({
+      filename: GraphqlMiddlewareTemplate.HelpersTypes,
+      write: true,
+      getContents: () => `export const serverApiPrefix: string;
+export function getEndpoint(operation: string, operationName: string): string
+`
+    });
+    addTypeTemplate({
+      filename: GraphqlMiddlewareTemplate.NitroTypes,
+      write: true,
+      getContents: () => collector.getTemplateNitroTypes()
+    });
+    addTypeTemplate({
+      filename: GraphqlMiddlewareTemplate.OperationTypesAll,
+      write: true,
+      getContents: () => collector.getTemplateOperationTypes()
+    });
     const templateDocuments = addTemplate({
       filename: GraphqlMiddlewareTemplate.Documents,
       write: true,
       getContents: () => collector.getTemplateOperations()
     });
-    addAlias("#graphql-documents", templateDocuments.dst);
-    const templateContext = addTemplate({
-      filename: GraphqlMiddlewareTemplate.ComposableContext,
+    inlineNitroExternals(templateDocuments.dst);
+    addTypeTemplate({
+      filename: GraphqlMiddlewareTemplate.ResponseTypes,
       write: true,
-      getContents: () => collector.getTemplateContext()
+      getContents: () => collector.getTemplateResponseTypes()
     });
-    addAlias("#nuxt-graphql-middleware/generated-types", templateContext.dst);
-    addTemplate({
+    addTypeTemplate({
       write: true,
-      filename: "nuxt-graphql-middleware/graphql-documents.d.ts",
-      getContents: () => {
-        return `
-import type {
-  GraphqlMiddlewareQuery,
-  GraphqlMiddlewareMutation,
-} from '#nuxt-graphql-middleware/generated-types'
-
-declare module '#graphql-documents' {
-  type Operations = {
-    query: GraphqlMiddlewareQuery
-    mutation: GraphqlMiddlewareMutation
-  }
-  const operations: Operations
-  export { operations, Operations }
-}
-`;
-      }
+      filename: "nuxt-graphql-middleware/documents.d.ts",
+      getContents: () => generateDocumentTypesTemplate()
     });
     const findServerOptions = () => {
       const newPath = serverResolver.resolve("graphqlMiddleware.serverOptions");
@@ -755,14 +886,11 @@ declare module '#graphql-documents' {
       }
       logger.info("No graphqlMiddleware.serverOptions file found.");
     };
-    const resolvedPath = findServerOptions();
-    const moduleTypesPath = relative(
-      nuxt.options.buildDir,
-      moduleResolver.resolve("./types")
-    );
-    const resolvedPathRelative = resolvedPath ? relative(nuxt.options.buildDir, resolvedPath) : null;
+    const resolvedServerOptionsPath = findServerOptions();
+    const moduleTypesPath = toBuildRelative(moduleResolver.resolve("./types"));
+    const resolvedPathRelative = resolvedServerOptionsPath ? toBuildRelative(resolvedServerOptionsPath) : null;
     const template = addTemplate({
-      filename: "graphqlMiddleware.serverOptions.mjs",
+      filename: "nuxt-graphql-middleware/server-options.mjs",
       write: true,
       getContents: () => {
         const serverOptionsLine = resolvedPathRelative ? `import serverOptions from '${resolvedPathRelative}'` : `const serverOptions = {}`;
@@ -772,26 +900,20 @@ export { serverOptions }
 `;
       }
     });
+    inlineNitroExternals(template.dst);
     addTemplate({
-      filename: "graphqlMiddleware.serverOptions.d.ts",
+      filename: "nuxt-graphql-middleware/server-options.d.ts",
       write: true,
       getContents: () => {
         const serverOptionsLineTypes = resolvedPathRelative ? `import serverOptions from '${resolvedPathRelative}'` : `const serverOptions: GraphqlMiddlewareServerOptions = {}`;
         return `
 import type { GraphqlMiddlewareServerOptions } from '${moduleTypesPath}'
 ${serverOptionsLineTypes}
-import type { GraphqlServerResponse } from '${runtimeTypesPath}'
-import type { GraphqlMiddlewareResponseUnion } from '#nuxt-graphql-middleware/generated-types'
 
-type GraphqlResponseAdditions =
+export type GraphqlResponseAdditions =
   typeof serverOptions extends GraphqlMiddlewareServerOptions<infer R, any, any> ? R : {}
 
-export type GraphqlResponse<T> = GraphqlServerResponse<T> & GraphqlResponseAdditions
-
-export type GraphqlResponseTyped = GraphqlResponse<GraphqlMiddlewareResponseUnion>
-
-export { serverOptions }
-`;
+export { serverOptions }`;
       }
     });
     const getClientOptionsImport = () => {
@@ -799,13 +921,13 @@ export { serverOptions }
         "graphqlMiddleware.clientOptions"
       );
       if (fileExists(clientOptionsPath)) {
-        const pathRelative = relative(nuxt.options.buildDir, clientOptionsPath);
+        const pathRelative = toBuildRelative(clientOptionsPath);
         return `import clientOptions from '${pathRelative}'`;
       }
     };
     const clientOptionsImport = getClientOptionsImport();
-    const clientOptionsTemplate = addTemplate({
-      filename: "graphqlMiddleware.clientOptions.mjs",
+    addTemplate({
+      filename: "nuxt-graphql-middleware/client-options.mjs",
       write: true,
       getContents: () => {
         if (clientOptionsImport) {
@@ -815,39 +937,25 @@ export { clientOptions }`;
         return `export const clientOptions = {}`;
       }
     });
-    const runtimeTypesPath = relative(
-      nuxt.options.buildDir,
-      moduleResolver.resolve("./runtime/types.ts")
-    );
     addTemplate({
-      filename: "graphqlMiddleware.clientOptions.d.ts",
+      filename: "nuxt-graphql-middleware/client-options.d.ts",
       write: true,
       getContents: () => {
         if (clientOptionsImport) {
-          return `import type { GraphqlClientOptions } from '${runtimeTypesPath}'
+          return `import type { GraphqlClientOptions } from '${context.runtimeTypesPath}'
 ${clientOptionsImport}
 
 export type GraphqlClientContext = typeof clientOptions extends GraphqlClientOptions<infer R> ? R : {}
 
 export { clientOptions }`;
         }
-        return `import type { GraphqlClientOptions } from '${runtimeTypesPath}'
+        return `import type { GraphqlClientOptions } from '${context.runtimeTypesPath}'
 export const clientOptions: GraphqlClientOptions
 
 export type GraphqlClientContext = {}
 `;
       }
     });
-    addAlias("#graphql-middleware-client-options", clientOptionsTemplate.dst);
-    nuxt.options.nitro.externals = nuxt.options.nitro.externals || {};
-    nuxt.options.nitro.externals.inline = nuxt.options.nitro.externals.inline || [];
-    nuxt.options.nitro.externals.inline.push(template.dst);
-    nuxt.options.nitro.externals.inline.push(templateDocuments.dst);
-    addAlias("#graphql-middleware-server-options-build", template.dst);
-    addAlias(
-      "#graphql-middleware/types",
-      moduleResolver.resolve("./runtime/types.ts")
-    );
     addServerHandler({
       handler: moduleResolver.resolve("./runtime/serverHandler/index"),
       route: options.serverApiPrefix + "/:operation/:name"
@@ -861,6 +969,11 @@ export type GraphqlClientContext = {}
     addPlugin(moduleResolver.resolve("./runtime/plugins/provideState"), {
       append: false
     });
+    if (context.isDev && options.errorOverlay) {
+      addPlugin(moduleResolver.resolve("./runtime/plugins/devMode"), {
+        append: false
+      });
+    }
     nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.externals = defu(
         typeof nitroConfig.externals === "object" ? nitroConfig.externals : {},
@@ -870,10 +983,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;
@@ -881,9 +1006,17 @@ export type GraphqlClientContext = {}
         if (!pathAbsolute.match(/\.(gql|graphql)$/)) {
           return;
         }
-        const hasChanged = await collector.handleWatchEvent(event, pathAbsolute);
-        if (hasChanged && rpc) {
-          rpc.broadcast.documentsUpdated([...collector.rpcItems.values()]);
+        const { hasChanged, error } = await collector.handleWatchEvent(
+          event,
+          pathAbsolute
+        );
+        if (error) {
+          sendError(error);
+        }
+        if (hasChanged) {
+          if (rpc) {
+            rpc.broadcast.documentsUpdated([...collector.rpcItems.values()]);
+          }
         }
       });
     }