nuxt-graphql-middleware 5.0.0-alpha.0 → 5.0.0-alpha.10

package/dist/module.d.mts

@@ -1,203 +1,10 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { HookResult } from 'nuxt/schema';
+import { OperationResponseError } from '../dist/runtime/types.js';
+export { GraphqlMiddlewareServerOptions } from '../dist/runtime/types.js';
 import { Types } from '@graphql-codegen/plugin-helpers';
 import { SchemaASTConfig } from '@graphql-codegen/schema-ast';
 import { GeneratorOptions } from 'graphql-typescript-deluxe';
-import { H3Event } from 'h3';
-import { FetchOptions, FetchResponse, FetchError } from 'ofetch';
-import { ContextType, GraphqlServerResponse } from '#graphql-middleware/types';
-import { GraphqlMiddlewareResponseUnion } from '#nuxt-graphql-middleware/generated-types';
-
-type GraphqlMiddlewareRequestContext<C extends ContextType = ContextType> = {
-    client?: Partial<C>;
-};
-type GraphqlMiddlewareGraphqlEndpointMethod<C extends ContextType> = (event?: H3Event, operation?: string, operationName?: string, context?: GraphqlMiddlewareRequestContext<C>) => string | Promise<string> | undefined;
-type GraphqlMiddlewareServerFetchOptionsMethod<C extends ContextType> = (event?: H3Event, operation?: string, operationName?: string, context?: GraphqlMiddlewareRequestContext<C>) => FetchOptions | Promise<FetchOptions>;
-type GraphqlMiddlewareOnServerResponseMethod<ServerReponse, T, C extends ContextType> = (event: H3Event, response: FetchResponse<ServerReponse>, operation?: string, operationName?: string, context?: GraphqlMiddlewareRequestContext<C>) => T | Promise<T>;
-type GraphqlMiddlewareOnServerErrorMethod<C extends ContextType> = (event: H3Event, error: FetchError, operation?: string, operationName?: string, context?: GraphqlMiddlewareRequestContext<C>) => any | Promise<any>;
-type GraphqlMiddlewareDoRequestMethodContext<C extends ContextType> = {
-    /**
-     * The incoming request event from H3.
-     */
-    event: H3Event;
-    /**
-     * The type of operation.
-     */
-    operation: 'query' | 'mutation';
-    /**
-     * The name of the operation.
-     */
-    operationName: string;
-    /**
-     * The operation document (the raw GraphQL query/mutation as a string).
-     */
-    operationDocument: string;
-    /**
-     * Variables for the operation.
-     */
-    variables: Record<string, any>;
-    /**
-     * For file uploads (which are done using FormData), this contains the full
-     * form data with these keys:
-     *
-     * - operations: string
-     *   A JSON string of an object with "query", "variables" and "operationName" properties.
-     *   Example:
-     *   operations='{ "query": "mutation ($id: String!, $file: Upload!) { uploadFile(id: $id, file: $file) { id filename } }", "variables": { "file": null, "id": "1" } }'
-     * - map: string
-     *   A JSON string of an object whose keys are strings starting at '0' and the values being an array with a single string:
-     *   Example:
-     *   map='{ "0": ["variables.file"] }'
-     * - [number]
-     *   For every file there is a FormData entry with a name that matches the key in `map`.
-     *   Example:
-     *   0=[Binary File]
-     */
-    formData?: FormData;
-    context: GraphqlMiddlewareRequestContext<C>;
-};
-type GraphqlMiddlewareDoRequestMethod<T, C extends ContextType> = (context: GraphqlMiddlewareDoRequestMethodContext<C>) => Promise<T>;
-/**
- * Configuration options during runtime.
- */
-type GraphqlMiddlewareServerOptions<Additions extends object = object, C extends ContextType = ContextType, CustomResponse = GraphqlServerResponse<GraphqlMiddlewareResponseUnion> & Additions> = {
-    /**
-     * Custom callback to return the GraphQL endpoint per request.
-     *
-     * The method is only called if no `doGraphqlRequest` method is implemented.
-     *
-     * @default undefined
-     *
-     * @example
-     * ```ts
-     * function graphqlEndpoint(event, operation, operationName) {
-     *   const language = getLanguageFromRequest(event)
-     *   return `https://api.example.com/${language}/graphql`
-     * }
-     * ```
-     */
-    graphqlEndpoint?: GraphqlMiddlewareGraphqlEndpointMethod<C>;
-    /**
-     * Provide the options for the ofetch request to the GraphQL server.
-     *
-     * The method is only called if no `doGraphqlRequest` method is implemented.
-     *
-     * @default undefined
-     *
-     * @example
-     * ```ts
-     * import { getHeader } from 'h3'
-     *
-     * // Pass the cookie from the client request to the GraphQL request.
-     * function serverFetchOptions(event, operation, operationName) {
-     *   return {
-     *     headers: {
-     *       Cookie: getHeader(event, 'cookie')
-     *     }
-     *   }
-     * }
-     * ```
-     */
-    serverFetchOptions?: GraphqlMiddlewareServerFetchOptionsMethod<C>;
-    /**
-     * Handle the response from the GraphQL server.
-     *
-     * The method is only called if no `doGraphqlRequest` method is implemented.
-     *
-     * You can alter the response, add additional properties to the data, get
-     * and set headers, etc.
-     *
-     * ```ts
-     * import type { H3Event } from 'h3'
-     * import type { FetchResponse } from 'ofetch'
-     *
-     * function onServerResponse(event: H3Event, graphqlResponse: FetchResponse) {
-     *   // Set a static header.
-     *   event.node.res.setHeader('x-nuxt-custom-header', 'A custom header value')
-     *
-     *   // Pass the set-cookie header from the GraphQL response to the client.
-     *   const setCookie = graphqlResponse.headers.get('set-cookie')
-     *   if (setCookie) {
-     *     event.node.res.setHeader('set-cookie', setCookie)
-     *   }
-     *
-     *   // Add additional properties to the response.
-     *   graphqlResponse._data.__customProperty = ['My', 'values']
-     *
-     *   // Return the GraphQL response.
-     *   return graphqlResponse._data
-     * }
-     * ```
-     */
-    onServerResponse?: GraphqlMiddlewareOnServerResponseMethod<GraphqlServerResponse<GraphqlMiddlewareResponseUnion>, CustomResponse, C>;
-    /**
-     * Handle a fetch error from the GraphQL request.
-     *
-     * The method is only called if no `doGraphqlRequest` method is implemented.
-     *
-     * Note that errors are only thrown for responses that are not status
-     * 200-299. See https://github.com/unjs/ofetch#%EF%B8%8F-handling-errors for
-     * more information.
-     *
-     * ```ts
-     * import { createError } from 'h3'
-     * import type { H3Event } from 'h3'
-     * import type { FetchError } from 'ofetch'
-     *
-     * function onServerError(
-     *   event: H3Event,
-     *   error: FetchError,
-     *   operation: string,
-     *   operationName: string,
-     * ) {
-     *   // Throw a h3 error.
-     *   throw createError({
-     *     statusCode: 500,
-     *     statusMessage: `Couldn't execute GraphQL ${operation} "${operationName}".`,
-     *     data: error.message
-     *   })
-     * }
-     * ```
-     */
-    onServerError?: GraphqlMiddlewareOnServerErrorMethod<C>;
-    /**
-     * Provide a custom fetch method for requests to the GraphQL server.
-     *
-     * This can be used if onServerError, onServerResponse, serverFetchOptions
-     * and graphqlEndpoint are not enough to meet your requirements.
-     *
-     * When this method is implemented, all other methods are not called.
-     *
-     * The method will be called in the /api/graphql server route and should
-     * perform the GraphQL request and return the response.
-     *
-     * An example use case might be to handle expired tokens.
-     *
-     * * ```ts
-     * async function doGraphqlRequest({
-     *   event,
-     *   operation,
-     *   operationName,
-     *   operationDocument,
-     *   variables,
-     * }) {
-     *   const result = await $fetch.raw('https://example.com/graphql', {
-     *     method: 'POST'
-     *     body: {
-     *       query: operationDocument,
-     *       variables,
-     *       operationName
-     *     },
-     *     headers: {
-     *       'custom-header': 'foobar'
-     *     }
-     *   })
-     *
-     *   return result._data
-     * }
-     * ```
-     */
-    doGraphqlRequest?: GraphqlMiddlewareDoRequestMethod<CustomResponse, C>;
-};
 
 interface ModuleOptions {
     /**
@@ -220,6 +27,14 @@ interface ModuleOptions {
      * ```
      */
     autoImportPatterns?: string[];
+    /**
+     * The path where your graphql.config.ts is, relative to the location of nuxt.config.ts.
+     *
+     * Used to generate the correct paths in the graphql.config.ts file generated by the module.
+     *
+     * @default "./graphql.config.ts"
+     */
+    graphqlConfigFilePath?: string;
     /**
      * Additional raw documents to include.
      *
@@ -264,6 +79,10 @@ interface ModuleOptions {
      * @default false
      */
     debug?: boolean;
+    /**
+     * Displays GraphQL response errors in an overlay in dev mode.
+     */
+    errorOverlay?: boolean;
     /**
      * The URL of the GraphQL server.
      *
@@ -275,9 +94,20 @@ interface ModuleOptions {
     /**
      * Download the GraphQL schema and store it on disk.
      *
+     * Usually you'll want to only enable this during dev mode.
+     *
      * @default true
      */
     downloadSchema?: boolean;
+    /**
+     * Path to the GraphQL schema file.
+     *
+     * If `downloadSchema` is `true`, the downloaded schema is written to this specified path.
+     * If `downloadSchema` is `false`, this file must be present in order to generate types.
+     *
+     * @default './schema.graphql'
+     */
+    schemaPath?: string;
     /**
      * The prefix for the server route.
      *
@@ -287,14 +117,12 @@ interface ModuleOptions {
      */
     serverApiPrefix?: string;
     /**
-     * Path to the GraphQL schema file.
-     *
-     * If `downloadSchema` is `true`, the downloaded schema is written to this specified path.
-     * If `downloadSchema` is `false`, this file must be present in order to generate types.
+     * Logs only errors.
      *
-     * @default './schema.graphql'
+     * When enabled only errors are logged to the console when generating the GraphQL operations.
+     * If false, all operations are logged, including valid ones.
      */
-    schemaPath?: string;
+    logOnlyErrors?: boolean;
     /**
      * Options for graphql-typescript-deluxe code generator.
      */
@@ -342,17 +170,41 @@ interface ModuleOptions {
         maxSize?: number;
     };
 }
-interface ModuleHooks {
-}
+
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 declare module '@nuxt/schema' {
     interface AppConfig {
         graphqlMiddleware: {
+            /**
+             * Whether the client cache is enabled.
+             */
             clientCacheEnabled: boolean;
+            /**
+             * The max number of items in the cache.
+             */
             clientCacheMaxSize: number;
         };
     }
 }
+declare module '#app' {
+    interface RuntimeNuxtHooks {
+        /**
+         * Emitted when any GraphQL response contains errors.
+         */
+        'nuxt-graphql-middleware:errors': (errors: OperationResponseError) => HookResult;
+    }
+}
+declare module 'vite/types/customEvent.d.ts' {
+    interface CustomEventMap {
+        /**
+         * Emitted when GraphQL operations have been updated.
+         */
+        'nuxt-graphql-middleware:reload': {
+            operations: string[];
+        };
+    }
+}
 
-export { type GraphqlMiddlewareServerOptions, type ModuleHooks, type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.d.ts

@@ -1,203 +1,10 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { HookResult } from 'nuxt/schema';
+import { OperationResponseError } from '../dist/runtime/types.js';
+export { GraphqlMiddlewareServerOptions } from '../dist/runtime/types.js';
 import { Types } from '@graphql-codegen/plugin-helpers';
 import { SchemaASTConfig } from '@graphql-codegen/schema-ast';
 import { GeneratorOptions } from 'graphql-typescript-deluxe';
-import { H3Event } from 'h3';
-import { FetchOptions, FetchResponse, FetchError } from 'ofetch';
-import { ContextType, GraphqlServerResponse } from '#graphql-middleware/types';
-import { GraphqlMiddlewareResponseUnion } from '#nuxt-graphql-middleware/generated-types';
-
-type GraphqlMiddlewareRequestContext<C extends ContextType = ContextType> = {
-    client?: Partial<C>;
-};
-type GraphqlMiddlewareGraphqlEndpointMethod<C extends ContextType> = (event?: H3Event, operation?: string, operationName?: string, context?: GraphqlMiddlewareRequestContext<C>) => string | Promise<string> | undefined;
-type GraphqlMiddlewareServerFetchOptionsMethod<C extends ContextType> = (event?: H3Event, operation?: string, operationName?: string, context?: GraphqlMiddlewareRequestContext<C>) => FetchOptions | Promise<FetchOptions>;
-type GraphqlMiddlewareOnServerResponseMethod<ServerReponse, T, C extends ContextType> = (event: H3Event, response: FetchResponse<ServerReponse>, operation?: string, operationName?: string, context?: GraphqlMiddlewareRequestContext<C>) => T | Promise<T>;
-type GraphqlMiddlewareOnServerErrorMethod<C extends ContextType> = (event: H3Event, error: FetchError, operation?: string, operationName?: string, context?: GraphqlMiddlewareRequestContext<C>) => any | Promise<any>;
-type GraphqlMiddlewareDoRequestMethodContext<C extends ContextType> = {
-    /**
-     * The incoming request event from H3.
-     */
-    event: H3Event;
-    /**
-     * The type of operation.
-     */
-    operation: 'query' | 'mutation';
-    /**
-     * The name of the operation.
-     */
-    operationName: string;
-    /**
-     * The operation document (the raw GraphQL query/mutation as a string).
-     */
-    operationDocument: string;
-    /**
-     * Variables for the operation.
-     */
-    variables: Record<string, any>;
-    /**
-     * For file uploads (which are done using FormData), this contains the full
-     * form data with these keys:
-     *
-     * - operations: string
-     *   A JSON string of an object with "query", "variables" and "operationName" properties.
-     *   Example:
-     *   operations='{ "query": "mutation ($id: String!, $file: Upload!) { uploadFile(id: $id, file: $file) { id filename } }", "variables": { "file": null, "id": "1" } }'
-     * - map: string
-     *   A JSON string of an object whose keys are strings starting at '0' and the values being an array with a single string:
-     *   Example:
-     *   map='{ "0": ["variables.file"] }'
-     * - [number]
-     *   For every file there is a FormData entry with a name that matches the key in `map`.
-     *   Example:
-     *   0=[Binary File]
-     */
-    formData?: FormData;
-    context: GraphqlMiddlewareRequestContext<C>;
-};
-type GraphqlMiddlewareDoRequestMethod<T, C extends ContextType> = (context: GraphqlMiddlewareDoRequestMethodContext<C>) => Promise<T>;
-/**
- * Configuration options during runtime.
- */
-type GraphqlMiddlewareServerOptions<Additions extends object = object, C extends ContextType = ContextType, CustomResponse = GraphqlServerResponse<GraphqlMiddlewareResponseUnion> & Additions> = {
-    /**
-     * Custom callback to return the GraphQL endpoint per request.
-     *
-     * The method is only called if no `doGraphqlRequest` method is implemented.
-     *
-     * @default undefined
-     *
-     * @example
-     * ```ts
-     * function graphqlEndpoint(event, operation, operationName) {
-     *   const language = getLanguageFromRequest(event)
-     *   return `https://api.example.com/${language}/graphql`
-     * }
-     * ```
-     */
-    graphqlEndpoint?: GraphqlMiddlewareGraphqlEndpointMethod<C>;
-    /**
-     * Provide the options for the ofetch request to the GraphQL server.
-     *
-     * The method is only called if no `doGraphqlRequest` method is implemented.
-     *
-     * @default undefined
-     *
-     * @example
-     * ```ts
-     * import { getHeader } from 'h3'
-     *
-     * // Pass the cookie from the client request to the GraphQL request.
-     * function serverFetchOptions(event, operation, operationName) {
-     *   return {
-     *     headers: {
-     *       Cookie: getHeader(event, 'cookie')
-     *     }
-     *   }
-     * }
-     * ```
-     */
-    serverFetchOptions?: GraphqlMiddlewareServerFetchOptionsMethod<C>;
-    /**
-     * Handle the response from the GraphQL server.
-     *
-     * The method is only called if no `doGraphqlRequest` method is implemented.
-     *
-     * You can alter the response, add additional properties to the data, get
-     * and set headers, etc.
-     *
-     * ```ts
-     * import type { H3Event } from 'h3'
-     * import type { FetchResponse } from 'ofetch'
-     *
-     * function onServerResponse(event: H3Event, graphqlResponse: FetchResponse) {
-     *   // Set a static header.
-     *   event.node.res.setHeader('x-nuxt-custom-header', 'A custom header value')
-     *
-     *   // Pass the set-cookie header from the GraphQL response to the client.
-     *   const setCookie = graphqlResponse.headers.get('set-cookie')
-     *   if (setCookie) {
-     *     event.node.res.setHeader('set-cookie', setCookie)
-     *   }
-     *
-     *   // Add additional properties to the response.
-     *   graphqlResponse._data.__customProperty = ['My', 'values']
-     *
-     *   // Return the GraphQL response.
-     *   return graphqlResponse._data
-     * }
-     * ```
-     */
-    onServerResponse?: GraphqlMiddlewareOnServerResponseMethod<GraphqlServerResponse<GraphqlMiddlewareResponseUnion>, CustomResponse, C>;
-    /**
-     * Handle a fetch error from the GraphQL request.
-     *
-     * The method is only called if no `doGraphqlRequest` method is implemented.
-     *
-     * Note that errors are only thrown for responses that are not status
-     * 200-299. See https://github.com/unjs/ofetch#%EF%B8%8F-handling-errors for
-     * more information.
-     *
-     * ```ts
-     * import { createError } from 'h3'
-     * import type { H3Event } from 'h3'
-     * import type { FetchError } from 'ofetch'
-     *
-     * function onServerError(
-     *   event: H3Event,
-     *   error: FetchError,
-     *   operation: string,
-     *   operationName: string,
-     * ) {
-     *   // Throw a h3 error.
-     *   throw createError({
-     *     statusCode: 500,
-     *     statusMessage: `Couldn't execute GraphQL ${operation} "${operationName}".`,
-     *     data: error.message
-     *   })
-     * }
-     * ```
-     */
-    onServerError?: GraphqlMiddlewareOnServerErrorMethod<C>;
-    /**
-     * Provide a custom fetch method for requests to the GraphQL server.
-     *
-     * This can be used if onServerError, onServerResponse, serverFetchOptions
-     * and graphqlEndpoint are not enough to meet your requirements.
-     *
-     * When this method is implemented, all other methods are not called.
-     *
-     * The method will be called in the /api/graphql server route and should
-     * perform the GraphQL request and return the response.
-     *
-     * An example use case might be to handle expired tokens.
-     *
-     * * ```ts
-     * async function doGraphqlRequest({
-     *   event,
-     *   operation,
-     *   operationName,
-     *   operationDocument,
-     *   variables,
-     * }) {
-     *   const result = await $fetch.raw('https://example.com/graphql', {
-     *     method: 'POST'
-     *     body: {
-     *       query: operationDocument,
-     *       variables,
-     *       operationName
-     *     },
-     *     headers: {
-     *       'custom-header': 'foobar'
-     *     }
-     *   })
-     *
-     *   return result._data
-     * }
-     * ```
-     */
-    doGraphqlRequest?: GraphqlMiddlewareDoRequestMethod<CustomResponse, C>;
-};
 
 interface ModuleOptions {
     /**
@@ -220,6 +27,14 @@ interface ModuleOptions {
      * ```
      */
     autoImportPatterns?: string[];
+    /**
+     * The path where your graphql.config.ts is, relative to the location of nuxt.config.ts.
+     *
+     * Used to generate the correct paths in the graphql.config.ts file generated by the module.
+     *
+     * @default "./graphql.config.ts"
+     */
+    graphqlConfigFilePath?: string;
     /**
      * Additional raw documents to include.
      *
@@ -264,6 +79,10 @@ interface ModuleOptions {
      * @default false
      */
     debug?: boolean;
+    /**
+     * Displays GraphQL response errors in an overlay in dev mode.
+     */
+    errorOverlay?: boolean;
     /**
      * The URL of the GraphQL server.
      *
@@ -275,9 +94,20 @@ interface ModuleOptions {
     /**
      * Download the GraphQL schema and store it on disk.
      *
+     * Usually you'll want to only enable this during dev mode.
+     *
      * @default true
      */
     downloadSchema?: boolean;
+    /**
+     * Path to the GraphQL schema file.
+     *
+     * If `downloadSchema` is `true`, the downloaded schema is written to this specified path.
+     * If `downloadSchema` is `false`, this file must be present in order to generate types.
+     *
+     * @default './schema.graphql'
+     */
+    schemaPath?: string;
     /**
      * The prefix for the server route.
      *
@@ -287,14 +117,12 @@ interface ModuleOptions {
      */
     serverApiPrefix?: string;
     /**
-     * Path to the GraphQL schema file.
-     *
-     * If `downloadSchema` is `true`, the downloaded schema is written to this specified path.
-     * If `downloadSchema` is `false`, this file must be present in order to generate types.
+     * Logs only errors.
      *
-     * @default './schema.graphql'
+     * When enabled only errors are logged to the console when generating the GraphQL operations.
+     * If false, all operations are logged, including valid ones.
      */
-    schemaPath?: string;
+    logOnlyErrors?: boolean;
     /**
      * Options for graphql-typescript-deluxe code generator.
      */
@@ -342,17 +170,41 @@ interface ModuleOptions {
         maxSize?: number;
     };
 }
-interface ModuleHooks {
-}
+
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 declare module '@nuxt/schema' {
     interface AppConfig {
         graphqlMiddleware: {
+            /**
+             * Whether the client cache is enabled.
+             */
             clientCacheEnabled: boolean;
+            /**
+             * The max number of items in the cache.
+             */
             clientCacheMaxSize: number;
         };
     }
 }
+declare module '#app' {
+    interface RuntimeNuxtHooks {
+        /**
+         * Emitted when any GraphQL response contains errors.
+         */
+        'nuxt-graphql-middleware:errors': (errors: OperationResponseError) => HookResult;
+    }
+}
+declare module 'vite/types/customEvent.d.ts' {
+    interface CustomEventMap {
+        /**
+         * Emitted when GraphQL operations have been updated.
+         */
+        'nuxt-graphql-middleware:reload': {
+            operations: string[];
+        };
+    }
+}
 
-export { type GraphqlMiddlewareServerOptions, type ModuleHooks, type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "nuxt-graphql-middleware",
   "configKey": "graphqlMiddleware",
-  "version": "5.0.0-alpha.0",
+  "version": "5.0.0-alpha.10",
   "compatibility": {
-    "nuxt": ">=3.13.0"
+    "nuxt": ">=3.15.0"
   },
   "builder": {
     "@nuxt/module-builder": "0.8.4",