nuxt-graphql-middleware 4.2.0 → 4.3.1

package/dist/runtime/serverHandler/helpers/index.d.ts

@@ -1,18 +1,22 @@
 import { type QueryObject } from 'ufo';
 import type { H3Event } from 'h3';
 import type { FetchOptions, FetchResponse, FetchError } from 'ofetch';
-import type { GraphqlMiddlewareRuntimeConfig, GraphqlMiddlewareServerOptions } from './../../../types.js';
+import type { GraphqlMiddlewareRequestContext, GraphqlMiddlewareRuntimeConfig, GraphqlMiddlewareServerOptions } from './../../../types.js';
 import { GraphqlMiddlewareOperation } from './../../settings/index.js';
 import { type Documents } from '#graphql-documents';
 export declare function queryParamToVariables(query: QueryObject): any;
+/**
+ * Extract the client context from the query params.
+ */
+export declare function extractRequestContext(query: QueryObject): GraphqlMiddlewareRequestContext<any>;
 /**
  * Get the URL of the GraphQL endpoint.
  */
-export declare function getEndpoint(config: GraphqlMiddlewareRuntimeConfig, serverOptions: GraphqlMiddlewareServerOptions, event: H3Event, operation: GraphqlMiddlewareOperation, operationName: string): string | Promise<string>;
+export declare function getEndpoint(config: GraphqlMiddlewareRuntimeConfig, serverOptions: GraphqlMiddlewareServerOptions<any, any>, event: H3Event, operation: GraphqlMiddlewareOperation, operationName: string, context: GraphqlMiddlewareRequestContext<any>): string | Promise<string>;
 /**
  * Get the options for the $fetch request to the GraphQL server.
  */
-export declare function getFetchOptions(serverOptions: GraphqlMiddlewareServerOptions, event: H3Event, operation: GraphqlMiddlewareOperation, operationName: string): FetchOptions | Promise<FetchOptions>;
+export declare function getFetchOptions(serverOptions: GraphqlMiddlewareServerOptions<any, any>, event: H3Event, operation: GraphqlMiddlewareOperation, operationName: string, context: GraphqlMiddlewareRequestContext<any>): FetchOptions | Promise<FetchOptions>;
 export declare function throwError(statusMessage: string, statusCode?: number): never;
 /**
  * Assure that the request is valid.
@@ -21,8 +25,8 @@ export declare function validateRequest(method?: string, operation?: GraphqlMidd
 /**
  * Handle GraphQL server response.
  */
-export declare function onServerResponse(serverOptions: GraphqlMiddlewareServerOptions, event: H3Event, response: FetchResponse<any>, operation?: string, operationName?: string): any;
+export declare function onServerResponse(serverOptions: GraphqlMiddlewareServerOptions<any, any>, event: H3Event, response: FetchResponse<any>, operation: string, operationName: string, context: GraphqlMiddlewareRequestContext<any>): any;
 /**
  * Handle GraphQL server errors.
  */
-export declare function onServerError(serverOptions: GraphqlMiddlewareServerOptions, event: H3Event, error: FetchError, operation?: string, operationName?: string): any;
+export declare function onServerError(serverOptions: GraphqlMiddlewareServerOptions<any, any>, event: H3Event, error: FetchError, operation: string, operationName: string, context: GraphqlMiddlewareRequestContext<any>): any;

package/dist/runtime/serverHandler/helpers/index.js

@@ -1,5 +1,8 @@
 import { createError } from "h3";
-import { GraphqlMiddlewareOperation } from "./../../settings/index.js";
+import {
+  CLIENT_CONTEXT_PREFIX,
+  GraphqlMiddlewareOperation
+} from "./../../settings/index.js";
 export function queryParamToVariables(query) {
   try {
     if (query.__variables && typeof query.__variables === "string") {
@@ -9,12 +12,28 @@ export function queryParamToVariables(query) {
   }
   return query;
 }
-export function getEndpoint(config, serverOptions, event, operation, operationName) {
+export function extractRequestContext(query) {
+  const client = {};
+  for (const property in query) {
+    if (property.startsWith(CLIENT_CONTEXT_PREFIX)) {
+      const value = query[property];
+      if (typeof value === "string") {
+        const key = property.replace(CLIENT_CONTEXT_PREFIX, "");
+        client[key] = value;
+      }
+    }
+  }
+  return {
+    client
+  };
+}
+export function getEndpoint(config, serverOptions, event, operation, operationName, context) {
   if (serverOptions.graphqlEndpoint) {
     const result = serverOptions.graphqlEndpoint(
       event,
       operation,
-      operationName
+      operationName,
+      context
     );
     if (result) {
       return Promise.resolve(result);
@@ -25,9 +44,14 @@ export function getEndpoint(config, serverOptions, event, operation, operationNa
   }
   throw new Error("Failed to determine endpoint for GraphQL server.");
 }
-export function getFetchOptions(serverOptions, event, operation, operationName) {
+export function getFetchOptions(serverOptions, event, operation, operationName, context) {
   if (serverOptions.serverFetchOptions) {
-    return serverOptions.serverFetchOptions(event, operation, operationName) || {};
+    return serverOptions.serverFetchOptions(
+      event,
+      operation,
+      operationName,
+      context
+    ) || {};
   }
   return {};
 }
@@ -60,20 +84,27 @@ export function validateRequest(method, operation, name, documents) {
     throwError(`Operation "${operation}" with name "${name}" not found.`);
   }
 }
-export function onServerResponse(serverOptions, event, response, operation, operationName) {
+export function onServerResponse(serverOptions, event, response, operation, operationName, context) {
   if (serverOptions.onServerResponse) {
     return serverOptions.onServerResponse(
       event,
       response,
       operation,
-      operationName
+      operationName,
+      context
     );
   }
   return response._data;
 }
-export function onServerError(serverOptions, event, error, operation, operationName) {
+export function onServerError(serverOptions, event, error, operation, operationName, context) {
   if (serverOptions.onServerError) {
-    return serverOptions.onServerError(event, error, operation, operationName);
+    return serverOptions.onServerError(
+      event,
+      error,
+      operation,
+      operationName,
+      context
+    );
   }
   const message = error && "message" in error ? error.message : "";
   throw createError({

package/dist/runtime/serverHandler/index.js

@@ -5,7 +5,8 @@ import {
   getFetchOptions,
   validateRequest,
   onServerResponse,
-  onServerError
+  onServerError,
+  extractRequestContext
 } from "./helpers/index.js";
 import { GraphqlMiddlewareOperation } from "./../settings/index.js";
 import { documents } from "#graphql-documents";
@@ -17,14 +18,17 @@ export default defineEventHandler(async (event) => {
   const operationName = event.context?.params?.name;
   validateRequest(method, operation, operationName, documents);
   const operationDocument = documents[operation][operationName];
-  const variables = operation === GraphqlMiddlewareOperation.Query ? queryParamToVariables(getQuery(event)) : await readBody(event);
+  const queryParams = getQuery(event);
+  const context = extractRequestContext(queryParams);
+  const variables = operation === GraphqlMiddlewareOperation.Query ? queryParamToVariables(queryParams) : await readBody(event);
   if (serverOptions.doGraphqlRequest) {
     return serverOptions.doGraphqlRequest({
       event,
       operation,
       operationName,
       operationDocument,
-      variables
+      variables,
+      context
     });
   }
   const runtimeConfig = useRuntimeConfig().graphqlMiddleware;
@@ -33,13 +37,15 @@ export default defineEventHandler(async (event) => {
     serverOptions,
     event,
     operation,
-    operationName
+    operationName,
+    context
   );
   const fetchOptions = await getFetchOptions(
     serverOptions,
     event,
     operation,
-    operationName
+    operationName,
+    context
   );
   return $fetch.raw(endpoint, {
     // @todo: Remove any once https://github.com/unjs/nitro/pull/883 is released.
@@ -56,7 +62,8 @@ export default defineEventHandler(async (event) => {
       event,
       response,
       operation,
-      operationName
+      operationName,
+      context
     );
   }).catch((error) => {
     return onServerError(
@@ -64,7 +71,8 @@ export default defineEventHandler(async (event) => {
       event,
       error,
       operation,
-      operationName
+      operationName,
+      context
     );
   });
 });

package/dist/runtime/serverHandler/upload.js

@@ -1,6 +1,7 @@
 import {
   defineEventHandler,
-  readMultipartFormData
+  readMultipartFormData,
+  getQuery
 } from "h3";
 import {
   getEndpoint,
@@ -8,7 +9,8 @@ import {
   validateRequest,
   onServerResponse,
   onServerError,
-  throwError
+  throwError,
+  extractRequestContext
 } from "./helpers/index.js";
 import { GraphqlMiddlewareOperation } from "./../settings/index.js";
 import { documents } from "#graphql-documents";
@@ -52,6 +54,8 @@ export default defineEventHandler(async (event) => {
     const blob = new Blob([file.data]);
     formData.append(file.name, blob, file.filename);
   }
+  const queryParams = getQuery(event);
+  const context = extractRequestContext(queryParams);
   if (serverOptions.doGraphqlRequest) {
     return serverOptions.doGraphqlRequest({
       event,
@@ -59,7 +63,8 @@ export default defineEventHandler(async (event) => {
       operationName,
       operationDocument,
       variables,
-      formData
+      formData,
+      context
     });
   }
   const runtimeConfig = useRuntimeConfig().graphqlMiddleware;
@@ -68,13 +73,15 @@ export default defineEventHandler(async (event) => {
     serverOptions,
     event,
     operation,
-    operationName
+    operationName,
+    context
   );
   const fetchOptions = await getFetchOptions(
     serverOptions,
     event,
     operation,
-    operationName
+    operationName,
+    context
   );
   return $fetch.raw(endpoint, {
     ...fetchOptions,
@@ -86,7 +93,8 @@ export default defineEventHandler(async (event) => {
       event,
       response,
       operation,
-      operationName
+      operationName,
+      context
     );
   }).catch((error) => {
     return onServerError(
@@ -94,7 +102,8 @@ export default defineEventHandler(async (event) => {
       event,
       error,
       operation,
-      operationName
+      operationName,
+      context
     );
   });
 });

package/dist/runtime/serverOptions/defineGraphqlServerOptions.d.ts

@@ -1,2 +1,3 @@
+import type { GraphqlClientContext } from '#graphql-middleware-client-options';
 import { type GraphqlMiddlewareServerOptions } from './../../types.js';
-export declare function defineGraphqlServerOptions<T extends object>(options: GraphqlMiddlewareServerOptions<T>): GraphqlMiddlewareServerOptions<T>;
+export declare function defineGraphqlServerOptions<T extends object>(options: GraphqlMiddlewareServerOptions<T, GraphqlClientContext>): GraphqlMiddlewareServerOptions<T, GraphqlClientContext>;

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

@@ -6,7 +6,7 @@ export declare enum GraphqlMiddlewareTemplate {
     /**
      * Signature for the GraphQL composable arguments and return types.
      */
-    ComposableContext = "nuxt-graphql-middleware.d.ts",
+    ComposableContext = "nuxt-graphql-middleware/generated-types.d.ts",
     /**
      * Exports a single opject containing the compiled queries and mutations.
      */
@@ -16,3 +16,4 @@ export declare enum GraphqlMiddlewareOperation {
     Query = "query",
     Mutation = "mutation"
 }
+export declare const CLIENT_CONTEXT_PREFIX = "__gqlc_";

package/dist/runtime/settings/index.js

@@ -1,6 +1,6 @@
 export var GraphqlMiddlewareTemplate = /* @__PURE__ */ ((GraphqlMiddlewareTemplate2) => {
   GraphqlMiddlewareTemplate2["OperationTypes"] = "graphql-operations.d.ts";
-  GraphqlMiddlewareTemplate2["ComposableContext"] = "nuxt-graphql-middleware.d.ts";
+  GraphqlMiddlewareTemplate2["ComposableContext"] = "nuxt-graphql-middleware/generated-types.d.ts";
   GraphqlMiddlewareTemplate2["Documents"] = "graphql-documents.mjs";
   return GraphqlMiddlewareTemplate2;
 })(GraphqlMiddlewareTemplate || {});
@@ -9,3 +9,4 @@ export var GraphqlMiddlewareOperation = /* @__PURE__ */ ((GraphqlMiddlewareOpera
   GraphqlMiddlewareOperation2["Mutation"] = "mutation";
   return GraphqlMiddlewareOperation2;
 })(GraphqlMiddlewareOperation || {});
+export const CLIENT_CONTEXT_PREFIX = "__gqlc_";

package/dist/runtime/types.d.ts

@@ -1,6 +1,6 @@
 import type { FetchOptions, FetchContext } from 'ofetch';
 import type { GraphqlResponse } from '#graphql-middleware-server-options-build';
-import type { GraphqlMiddlewareResponseUnion } from '#build/nuxt-graphql-middleware';
+import type { GraphqlMiddlewareResponseUnion } from '#nuxt-graphql-middleware/generated-types';
 export type GraphqlResponseErrorLocation = {
     line: number;
     column: number;
@@ -22,3 +22,54 @@ export interface GraphqlMiddlewareState {
 export type RequestCacheOptions = {
     client?: boolean;
 };
+export type ContextType = {
+    [key: string]: string | null | undefined;
+};
+export type GraphqlClientOptions<T extends ContextType = ContextType> = {
+    /**
+     * Build the client context for this request.
+     *
+     * The method should return an object whose properties and values are strings.
+     * This object will be encoded as a query param when making the request to
+     * the GraphQL middleware. Each property name is prefixed when converted to a
+     * query param to prevent collisions.
+     *
+     * On the server, the context is reassembled and passed to methods in custom
+     * server options such as getEndpoint or serverFetchOptions.
+     *
+     * One use case would be to pass some state of the Nuxt app to your server
+     * options such as the current language.
+     *
+     * @example
+     * Define a context.
+     *
+     * ```typescript
+     * export default defineGraphqlClientOptions({
+     *   buildClientContext() {
+     *     // Pass the current language as context.
+     *     const language = useCurrentLanguage()
+     *     return {
+     *       language: language.value,
+     *     }
+     *   },
+     * })
+     * ```
+     *
+     * Now when a GraphQL query is made with useGraphqlQuery the request URL will
+     * look like this:
+     * `/api/graphql_middleware/myQuery?queryVariable=foo&__gqlc_language=en`
+     *                                                   ^ your context
+     *
+     * Then in your serverOptions file, you can then access the context:
+     *
+     * ```typescript
+     * export default defineGraphqlServerOptions({
+     *   graphqlEndpoint(event, operation, operationName, context) {
+     *     const language = context?.client?.language || 'en'
+     *     return `http://backend_server/${language}/graphql`
+     *    },
+     * })
+     * ```
+     */
+    buildClientContext?: () => T;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-graphql-middleware",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "description": "Module to perform GraphQL requests as a server middleware.",
   "repository": {
     "type": "git",
@@ -22,6 +22,10 @@
     "./dist/runtime/serverOptions": {
       "import": "./dist/runtime/serverOptions/index.js",
       "types": "./dist/runtime/serverOptions/index.d.ts"
+    },
+    "./dist/runtime/clientOptions": {
+      "import": "./dist/runtime/clientOptions/index.js",
+      "types": "./dist/runtime/clientOptions/index.d.ts"
     }
   },
   "main": "./dist/module.cjs",
@@ -90,7 +94,7 @@
     "strip-ansi": "^7.1.0",
     "typedoc": "^0.26.3",
     "typedoc-plugin-markdown": "^4.1.1",
-    "vitepress": "^1.2.3",
+    "vitepress": "^1.5.0",
     "vitest": "^1.6.0",
     "vue-tsc": "^2.1.6"
   }