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

package/dist/runtime/components/CodeFrame.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="nuxt-graphql-middleware-errors-code">
+    <div>
+      <div
+        v-for="(l, i) in lines"
+        :key="'lineNumber' + i"
+        class="nuxt-graphql-middleware-errors-code-line-number"
+        :class="{ 'ngm-is-highlighted': l.isHighlighted }"
+      >
+        <div v-html="l.lineNumber" />
+      </div>
+    </div>
+    <div>
+      <div
+        v-for="(l, i) in lines"
+        :key="'code' + i"
+        class="nuxt-graphql-middleware-errors-code-code"
+        :class="{ 'ngm-is-highlighted': l.isHighlighted }"
+      >
+        <div v-html="l.code" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from '#imports'
+
+const props = defineProps<{
+  source: string
+  line: number
+  column: number
+}>()
+
+const before = 20
+const after = 20
+
+const lines = computed(() => {
+  const fullLines = props.source.split('\n')
+  const indexStart = Math.max(props.line - before - 1, 0)
+  const indexEnd = Math.min(props.line + after, fullLines.length)
+
+  // Take only the lines we care about
+  const sliced = fullLines.slice(indexStart, indexEnd)
+
+  // Remove trailing empty lines
+  while (sliced.length && !sliced[sliced.length - 1]?.trim()) {
+    sliced.pop()
+  }
+
+  // Map to your final structure
+  return sliced.map((code, i) => {
+    const lineNumber = indexStart + i + 1
+    return {
+      lineNumber,
+      code,
+      isHighlighted: lineNumber === props.line,
+    }
+  })
+})
+</script>

package/dist/runtime/components/DevModeOverlay.vue

@@ -0,0 +1,60 @@
+<template>
+  <div v-if="groups.length" id="nuxt-graphql-middleware">
+    <div id="nuxt-graphql-middleware-errors">
+      <div
+        id="nuxt-graphql-middleware-errors-background"
+        @click="clearErrors"
+      />
+      <div id="nuxt-graphql-middleware-errors-content">
+        <header>
+          <h1>nuxt-graphql-middleware</h1>
+          <button @click="clearErrors">Close</button>
+        </header>
+
+        <ErrorGroup
+          v-for="group in groups"
+          v-bind="group"
+          :key="group.operation + group.operationName"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import './../css/output.css'
+import { useState, computed } from '#imports'
+
+import type { OperationResponseError } from '../types'
+import ErrorGroup from './ErrorGroup.vue'
+
+const errors = useState<OperationResponseError[]>(
+  'nuxt-graphql-middleware-errors',
+  () => [],
+)
+
+const groups = computed<OperationResponseError[]>(() => {
+  return [
+    ...errors.value
+      .reduce<Map<string, OperationResponseError>>((acc, v) => {
+        const key = `${v.operation}_${v.operationName}`
+        if (!acc.has(key)) {
+          acc.set(key, {
+            operation: v.operation,
+            operationName: v.operationName,
+            errors: [],
+            stack: v.stack,
+          })
+        }
+        acc.get(key)!.errors.push(...v.errors)
+        return acc
+      }, new Map())
+      .values(),
+  ]
+})
+
+/** Clear the error state => close/hide the overlay */
+function clearErrors() {
+  errors.value = []
+}
+</script>

package/dist/runtime/components/ErrorExtensions.vue

@@ -0,0 +1,23 @@
+<template>
+  <tr v-for="item in mapped" :key="item.key">
+    <td>{{ item.key }}</td>
+    <td>{{ item.value }}</td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import { computed } from '#imports'
+
+const props = defineProps<{
+  extensions?: Record<string, unknown>
+}>()
+
+const mapped = computed(() => {
+  if (!props.extensions) {
+    return []
+  }
+  return Object.entries(props.extensions).map(([key, value]) => {
+    return { key, value }
+  })
+})
+</script>

package/dist/runtime/components/ErrorGroup.vue

@@ -0,0 +1,89 @@
+<template>
+  <table class="nuxt-graphql-middleware-error-group">
+    <tbody>
+      <tr>
+        <td>Operation</td>
+        <td>{{ operation }}</td>
+      </tr>
+
+      <tr></tr>
+      <tr>
+        <td>Name</td>
+        <td>{{ operationName }}</td>
+      </tr>
+
+      <tr>
+        <td>File</td>
+        <td>{{ filePath }}</td>
+      </tr>
+      <tr v-if="stack">
+        <td>Stack</td>
+        <td v-text="stack" />
+      </tr>
+      <template v-for="error in uniqueErrors" :key="error.key">
+        <tr>
+          <td>Path</td>
+          <td>{{ error.path.join(' - ') }}</td>
+        </tr>
+        <tr>
+          <td colspan="2" class="ngm-large">{{ error.message }}</td>
+        </tr>
+
+        <template v-if="source">
+          <tr
+            v-for="(location, i) in error.locations"
+            :key="error.key + 'code' + i"
+          >
+            <td colspan="2">
+              <CodeFrame v-bind="location" :source />
+            </td>
+          </tr>
+        </template>
+
+        <ErrorExtensions :extensions="error.extensions" />
+      </template>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts" setup>
+import type { GraphqlResponseError } from '../types'
+import { documents } from '#nuxt-graphql-middleware/documents'
+import { operationSources } from '#nuxt-graphql-middleware/sources'
+import { computed } from '#imports'
+import CodeFrame from './CodeFrame.vue'
+import ErrorExtensions from './ErrorExtensions.vue'
+
+type MappedError = GraphqlResponseError & { count: number; key: string }
+
+const props = defineProps<{
+  operation: string
+  operationName: string
+  errors: GraphqlResponseError[]
+  stack?: string
+}>()
+
+const key = computed(() => props.operation + '_' + props.operationName)
+
+const filePath = computed(() => {
+  return operationSources[key.value]
+})
+
+const source = computed(
+  () => (documents as any)[props.operation]?.[props.operationName],
+)
+
+const uniqueErrors = computed<MappedError[]>(() => {
+  return props.errors
+    .reduce<Map<string, MappedError>>((acc, v) => {
+      const key = v.message
+      if (!acc.has(key)) {
+        acc.set(key, { ...v, key, count: 0 })
+      }
+      acc.get(key)!.count++
+      return acc
+    }, new Map())
+    .values()
+    .toArray()
+})
+</script>

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

@@ -1,7 +1,7 @@
 import type { FetchOptions } from 'ofetch';
 import { GraphqlMiddlewareCache } from '../helpers/ClientCache.js';
-import type { GraphqlResponse } from '#graphql-middleware-server-options-build';
-import type { RequestCacheOptions } from '#graphql-middleware/types';
+import type { GraphqlResponse } from '#nuxt-graphql-middleware/response';
+import type { RequestCacheOptions } from './../types.js';
 export declare function performRequest<T>(operation: string, operationName: string, method: 'get' | 'post', options: FetchOptions, cacheOptions?: RequestCacheOptions): Promise<GraphqlResponse<T>>;
 declare module '#app' {
     interface NuxtApp {

package/dist/runtime/composables/nuxtApp.js

@@ -1,7 +1,7 @@
 import { useGraphqlState } from "./useGraphqlState.js";
-import { getEndpoint } from "./../helpers/composables.js";
 import { hash } from "ohash";
 import { GraphqlMiddlewareCache } from "../helpers/ClientCache.js";
+import { getEndpoint } from "#nuxt-graphql-middleware/helpers";
 import { useNuxtApp, useAppConfig } from "#imports";
 export function performRequest(operation, operationName, method, options, cacheOptions) {
   const state = useGraphqlState();
@@ -22,6 +22,18 @@ export function performRequest(operation, operationName, method, options, cacheO
       }
       const cached = app.$graphqlCache.get(key);
       if (cached) {
+        if (import.meta.dev) {
+          cached.then((response) => {
+            if (response.errors.length) {
+              app.callHook("nuxt-graphql-middleware:errors", {
+                operation,
+                operationName,
+                errors: response.errors,
+                stack: Error().stack
+              });
+            }
+          });
+        }
         return cached;
       }
     }
@@ -34,6 +46,14 @@ export function performRequest(operation, operationName, method, options, cacheO
       method
     }
   ).then((v) => {
+    if (import.meta.dev && v.errors?.length) {
+      app.callHook("nuxt-graphql-middleware:errors", {
+        operation,
+        operationName,
+        errors: v.errors,
+        stack: Error().stack
+      });
+    }
     return {
       ...v,
       data: v.data,

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

@@ -1,12 +1,12 @@
-import { type GraphqlMiddlewareQueryName, type KeysOf, type PickFrom } from './../helpers/composables.js';
+import { type KeysOf, type PickFrom } from './../helpers/composables.js';
 import type { FetchOptions } from 'ofetch';
 import { type Ref } from 'vue';
-import { type GraphqlClientContext } from '#graphql-middleware-client-options';
-import type { GraphqlMiddlewareQuery } from '#nuxt-graphql-middleware/generated-types';
-import type { GraphqlResponse } from '#graphql-middleware-server-options-build';
-import type { RequestCacheOptions } from '#graphql-middleware/types';
+import { type GraphqlClientContext } from '#nuxt-graphql-middleware/client-options';
+import type { GraphqlResponse } from '#nuxt-graphql-middleware/response';
+import type { RequestCacheOptions } from './../types.js';
 import type { AsyncData, AsyncDataOptions, NuxtError } from '#app';
 import type { DefaultAsyncDataValue } from 'nuxt/app/defaults';
+import type { Query } from '#nuxt-graphql-middleware/operation-types';
 type AsyncGraphqlQueryOptions<FetchOptions, ResT, DataT = ResT, PickKeys extends KeysOf<DataT> = KeysOf<DataT>, DefaultT = DefaultAsyncDataValue> = AsyncDataOptions<ResT, DataT, PickKeys, DefaultT> & {
     /**
      * Control how the GraphQL response can be cached.
@@ -23,14 +23,14 @@ type AsyncGraphqlQueryOptions<FetchOptions, ResT, DataT = ResT, PickKeys extends
      */
     clientContext?: Partial<GraphqlClientContext>;
 };
-export declare function useAsyncGraphqlQuery<Name extends GraphqlMiddlewareQueryName, VarType extends GraphqlMiddlewareQuery[Name][0], VarsOptional extends GraphqlMiddlewareQuery[Name][1], ResT extends GraphqlResponse<GraphqlMiddlewareQuery[Name][2]>, FetchO extends FetchOptions<'json'>, NuxtErrorDataT = unknown, DataT = ResT, DefaultT = undefined, PickKeys extends KeysOf<DataT> = KeysOf<DataT>>(name: Name, ...args: VarsOptional extends true ? [
+export declare function useAsyncGraphqlQuery<Name extends keyof Query, Operation extends Query[Name] = Query[Name], ResT extends GraphqlResponse<Operation['response']> = GraphqlResponse<Operation['response']>, FetchO extends FetchOptions<'json'> = FetchOptions<'json'>, VarType extends Operation['variables'] = Operation['variables'], NuxtErrorDataT = unknown, DataT = ResT, DefaultT = undefined, PickKeys extends KeysOf<DataT> = KeysOf<DataT>>(name: Name, ...args: Operation['needsVariables'] extends false ? [
     (undefined | null | Record<string, never> | VarType | Ref<VarType>)?,
     AsyncGraphqlQueryOptions<FetchO, ResT, DataT, PickKeys, DefaultT>?
 ] : [
     VarType | Ref<VarType>,
     (undefined | null | AsyncGraphqlQueryOptions<FetchO, ResT, DataT, PickKeys, DefaultT>)?
 ]): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | undefined>;
-export declare function useAsyncGraphqlQuery<Name extends GraphqlMiddlewareQueryName, VarType extends GraphqlMiddlewareQuery[Name][0], VarsOptional extends GraphqlMiddlewareQuery[Name][1], ResT extends GraphqlResponse<GraphqlMiddlewareQuery[Name][2]>, FetchO extends FetchOptions<'json'>, NuxtErrorDataT = unknown, DataT = ResT, DefaultT = DataT, PickKeys extends KeysOf<DataT> = KeysOf<DataT>>(name: Name, ...args: VarsOptional extends true ? [
+export declare function useAsyncGraphqlQuery<Name extends keyof Query, Operation extends Query[Name] = Query[Name], ResT extends GraphqlResponse<Operation['response']> = GraphqlResponse<Operation['response']>, FetchO extends FetchOptions<'json'> = FetchOptions<'json'>, VarType extends Operation['variables'] = Operation['variables'], NuxtErrorDataT = unknown, DataT = ResT, DefaultT = DataT, PickKeys extends KeysOf<DataT> = KeysOf<DataT>>(name: Name, ...args: Operation['needsVariables'] extends false ? [
     (undefined | null | Record<string, never> | VarType | Ref<VarType>)?,
     AsyncGraphqlQueryOptions<FetchO, ResT, DataT, PickKeys, DefaultT>?
 ] : [

package/dist/runtime/composables/useAsyncGraphqlQuery.js

@@ -6,7 +6,7 @@ import { buildRequestParams } from "./../helpers/index.js";
 import { performRequest } from "./nuxtApp.js";
 import {
   clientOptions
-} from "#graphql-middleware-client-options";
+} from "#nuxt-graphql-middleware/client-options";
 import { useAsyncData, useAppConfig, useNuxtApp } from "#imports";
 import { hash } from "ohash";
 export function useAsyncGraphqlQuery(name, ...args) {
@@ -32,7 +32,7 @@ export function useAsyncGraphqlQuery(name, ...args) {
       };
     }
   }
-  return useAsyncData(
+  const result = useAsyncData(
     key,
     () => {
       const globalClientContext = clientOptions.buildClientContext ? clientOptions.buildClientContext() : {};
@@ -56,4 +56,12 @@ export function useAsyncGraphqlQuery(name, ...args) {
     },
     asyncDataOptions
   );
+  if (import.meta.hot) {
+    import.meta.hot.on("nuxt-graphql-middleware:reload", (data) => {
+      if (data.operations.includes(name)) {
+        result.refresh();
+      }
+    });
+  }
+  return result;
 }

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

@@ -1,7 +1,7 @@
-import { type GraphqlMiddlewareMutationName, type GetMutationArgs, type MutationObjectArgs, type GetMutationResult } from './../helpers/composables.js';
-import type { GraphqlMiddlewareMutation } from '#nuxt-graphql-middleware/generated-types';
-import type { GraphqlResponse } from '#graphql-middleware-server-options-build';
+import { type GetMutationArgs, type MutationObjectArgs, type GetMutationResult } from './../helpers/composables.js';
+import type { GraphqlResponse } from '#nuxt-graphql-middleware/response';
+import type { Mutation } from '#nuxt-graphql-middleware/operation-types';
 /**
  * Performs a GraphQL mutation.
  */
-export declare function useGraphqlMutation<T extends GraphqlMiddlewareMutationName, R extends GetMutationResult<T, GraphqlMiddlewareMutation>>(...args: GetMutationArgs<T, GraphqlMiddlewareMutation> | [MutationObjectArgs<T, GraphqlMiddlewareMutation>]): Promise<GraphqlResponse<R>>;
+export declare function useGraphqlMutation<K extends keyof Mutation, R extends GetMutationResult<K>>(...args: GetMutationArgs<K> | [MutationObjectArgs<K>]): Promise<GraphqlResponse<R>>;

package/dist/runtime/composables/useGraphqlMutation.js

@@ -2,7 +2,7 @@ import {
   encodeContext
 } from "./../helpers/composables.js";
 import { performRequest } from "./nuxtApp.js";
-import { clientOptions } from "#graphql-middleware-client-options";
+import { clientOptions } from "#nuxt-graphql-middleware/client-options";
 export function useGraphqlMutation(...args) {
   const [name, body, fetchOptions = {}, overrideClientContext = {}] = typeof args[0] === "string" ? [args[0], args[1], args[2]?.fetchOptions, args[2]?.clientContext] : [
     args[0].name,

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

@@ -1,7 +1,7 @@
-import { type GraphqlMiddlewareQueryName, type GetQueryArgs, type QueryObjectArgs, type GetQueryResult } from './../helpers/composables.js';
-import type { GraphqlMiddlewareQuery } from '#nuxt-graphql-middleware/generated-types';
-import type { GraphqlResponse } from '#graphql-middleware-server-options-build';
+import { type GetQueryArgs, type QueryObjectArgs, type GetQueryResult } from './../helpers/composables.js';
+import type { GraphqlResponse } from '#nuxt-graphql-middleware/response';
+import type { Query } from '#nuxt-graphql-middleware/operation-types';
 /**
  * Performs a GraphQL query.
  */
-export declare function useGraphqlQuery<T extends GraphqlMiddlewareQueryName, R extends GetQueryResult<T, GraphqlMiddlewareQuery>>(...args: GetQueryArgs<T, GraphqlMiddlewareQuery> | [QueryObjectArgs<T, GraphqlMiddlewareQuery>]): Promise<GraphqlResponse<R>>;
+export declare function useGraphqlQuery<K extends keyof Query, R extends GetQueryResult<K>>(...args: GetQueryArgs<K> | [QueryObjectArgs<K>]): Promise<GraphqlResponse<R>>;

package/dist/runtime/composables/useGraphqlQuery.js

@@ -3,7 +3,7 @@ import {
 } from "./../helpers/composables.js";
 import { buildRequestParams } from "./../helpers/index.js";
 import { performRequest } from "./nuxtApp.js";
-import { clientOptions } from "#graphql-middleware-client-options";
+import { clientOptions } from "#nuxt-graphql-middleware/client-options";
 export function useGraphqlQuery(...args) {
   const [
     name,

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

@@ -1,3 +1,3 @@
 import type { NuxtApp } from '#app';
-import type { GraphqlMiddlewareState } from '#graphql-middleware/types';
+import type { GraphqlMiddlewareState } from './../types.js';
 export declare const useGraphqlState: (providedApp?: NuxtApp) => GraphqlMiddlewareState | null;

package/dist/runtime/composables/useGraphqlState.js

@@ -5,7 +5,7 @@ export const useGraphqlState = function(providedApp) {
     if (app.$graphqlState) {
       return app.$graphqlState;
     }
-  } catch (_e) {
+  } catch {
   }
   return null;
 };

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

@@ -1,7 +1,7 @@
-import { type GraphqlMiddlewareMutationName, type GetMutationArgs, type MutationObjectArgs, type GetMutationResult } from './../helpers/composables.js';
-import type { GraphqlMiddlewareMutation } from '#nuxt-graphql-middleware/generated-types';
-import type { GraphqlResponse } from '#graphql-middleware-server-options-build';
+import { type GetMutationArgs, type MutationObjectArgs, type GetMutationResult } from './../helpers/composables.js';
+import type { GraphqlResponse } from '#nuxt-graphql-middleware/response';
+import type { Mutation } from '#nuxt-graphql-middleware/operation-types';
 /**
  * Performs a GraphQL upload mutation.
  */
-export declare function useGraphqlUploadMutation<T extends GraphqlMiddlewareMutationName, R extends GetMutationResult<T, GraphqlMiddlewareMutation>>(...args: GetMutationArgs<T, GraphqlMiddlewareMutation> | [MutationObjectArgs<T, GraphqlMiddlewareMutation>]): Promise<GraphqlResponse<R>>;
+export declare function useGraphqlUploadMutation<K extends keyof Mutation, R extends GetMutationResult<K>>(...args: GetMutationArgs<K> | [MutationObjectArgs<K>]): Promise<GraphqlResponse<R>>;

package/dist/runtime/composables/useGraphqlUploadMutation.js

@@ -1,9 +1,9 @@
 import {
-  getEndpoint,
   encodeContext
 } from "./../helpers/composables.js";
-import { clientOptions } from "#graphql-middleware-client-options";
+import { clientOptions } from "#nuxt-graphql-middleware/client-options";
 import { useGraphqlState } from "#imports";
+import { getEndpoint } from "#nuxt-graphql-middleware/helpers";
 function createFormData(variables) {
   const formData = new FormData();
   formData.append("operations", "{}");

package/dist/runtime/css/output.css

@@ -0,0 +1 @@
+:root{--ngm-tw-border-spacing-x:0;--ngm-tw-border-spacing-y:0;--ngm-tw-translate-x:0;--ngm-tw-translate-y:0;--ngm-tw-rotate:0;--ngm-tw-skew-x:0;--ngm-tw-skew-y:0;--ngm-tw-scale-x:1;--ngm-tw-scale-y:1;--ngm-tw-pan-x: ;--ngm-tw-pan-y: ;--ngm-tw-pinch-zoom: ;--ngm-tw-scroll-snap-strictness:proximity;--ngm-tw-gradient-from-position: ;--ngm-tw-gradient-via-position: ;--ngm-tw-gradient-to-position: ;--ngm-tw-ordinal: ;--ngm-tw-slashed-zero: ;--ngm-tw-numeric-figure: ;--ngm-tw-numeric-spacing: ;--ngm-tw-numeric-fraction: ;--ngm-tw-ring-inset: ;--ngm-tw-ring-offset-width:0px;--ngm-tw-ring-offset-color:#fff;--ngm-tw-ring-color:rgba(59,130,246,.5);--ngm-tw-ring-offset-shadow:0 0 #0000;--ngm-tw-ring-shadow:0 0 #0000;--ngm-tw-shadow:0 0 #0000;--ngm-tw-shadow-colored:0 0 #0000;--ngm-tw-blur: ;--ngm-tw-brightness: ;--ngm-tw-contrast: ;--ngm-tw-grayscale: ;--ngm-tw-hue-rotate: ;--ngm-tw-invert: ;--ngm-tw-saturate: ;--ngm-tw-sepia: ;--ngm-tw-drop-shadow: ;--ngm-tw-backdrop-blur: ;--ngm-tw-backdrop-brightness: ;--ngm-tw-backdrop-contrast: ;--ngm-tw-backdrop-grayscale: ;--ngm-tw-backdrop-hue-rotate: ;--ngm-tw-backdrop-invert: ;--ngm-tw-backdrop-opacity: ;--ngm-tw-backdrop-saturate: ;--ngm-tw-backdrop-sepia: ;--ngm-tw-contain-size: ;--ngm-tw-contain-layout: ;--ngm-tw-contain-paint: ;--ngm-tw-contain-style: }::backdrop{--ngm-tw-border-spacing-x:0;--ngm-tw-border-spacing-y:0;--ngm-tw-translate-x:0;--ngm-tw-translate-y:0;--ngm-tw-rotate:0;--ngm-tw-skew-x:0;--ngm-tw-skew-y:0;--ngm-tw-scale-x:1;--ngm-tw-scale-y:1;--ngm-tw-pan-x: ;--ngm-tw-pan-y: ;--ngm-tw-pinch-zoom: ;--ngm-tw-scroll-snap-strictness:proximity;--ngm-tw-gradient-from-position: ;--ngm-tw-gradient-via-position: ;--ngm-tw-gradient-to-position: ;--ngm-tw-ordinal: ;--ngm-tw-slashed-zero: ;--ngm-tw-numeric-figure: ;--ngm-tw-numeric-spacing: ;--ngm-tw-numeric-fraction: ;--ngm-tw-ring-inset: ;--ngm-tw-ring-offset-width:0px;--ngm-tw-ring-offset-color:#fff;--ngm-tw-ring-color:rgba(59,130,246,.5);--ngm-tw-ring-offset-shadow:0 0 #0000;--ngm-tw-ring-shadow:0 0 #0000;--ngm-tw-shadow:0 0 #0000;--ngm-tw-shadow-colored:0 0 #0000;--ngm-tw-blur: ;--ngm-tw-brightness: ;--ngm-tw-contrast: ;--ngm-tw-grayscale: ;--ngm-tw-hue-rotate: ;--ngm-tw-invert: ;--ngm-tw-saturate: ;--ngm-tw-sepia: ;--ngm-tw-drop-shadow: ;--ngm-tw-backdrop-blur: ;--ngm-tw-backdrop-brightness: ;--ngm-tw-backdrop-contrast: ;--ngm-tw-backdrop-grayscale: ;--ngm-tw-backdrop-hue-rotate: ;--ngm-tw-backdrop-invert: ;--ngm-tw-backdrop-opacity: ;--ngm-tw-backdrop-saturate: ;--ngm-tw-backdrop-sepia: ;--ngm-tw-contain-size: ;--ngm-tw-contain-layout: ;--ngm-tw-contain-paint: ;--ngm-tw-contain-style: }:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *):after,:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *):before{border:0 solid #e5e7eb;box-sizing:border-box}:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *):after,:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *):before{--ngm-tw-content:""}#nuxt-graphql-middleware{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;line-height:inherit;margin:0}hr:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){border-top-width:1px;color:inherit;height:0}abbr:where([title]):where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),h2:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),h3:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),h4:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),h5:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),h6:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){font-size:inherit;font-weight:inherit}a:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){color:inherit;text-decoration:inherit}b:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),strong:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){font-weight:bolder}code:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),kbd:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),pre:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),samp:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){font-size:80%}sub:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),sup:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){bottom:-.25em}sup:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){top:-.5em}table:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){border-collapse:collapse;border-color:inherit;text-indent:0}button:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),input:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),optgroup:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),select:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),textarea:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),select:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){text-transform:none}button:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),input:where([type=button]):where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),input:where([type=reset]):where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),input:where([type=submit]):where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){outline:auto}:-moz-ui-invalid:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){box-shadow:none}progress:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){vertical-align:baseline}:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *) ::-webkit-inner-spin-button,:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *) ::-webkit-outer-spin-button{height:auto}[type=search]:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){-webkit-appearance:textfield;outline-offset:-2px}:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *) ::-webkit-search-decoration{-webkit-appearance:none}:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *) ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){display:list-item}blockquote:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),dd:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),dl:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),figure:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),h1:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),h2:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),h3:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),h4:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),h5:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),h6:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),hr:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),p:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),pre:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){margin:0}fieldset:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){margin:0;padding:0}legend:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){padding:0}menu:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),ol:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),ul:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){list-style:none;margin:0;padding:0}dialog:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){padding:0}textarea:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){resize:vertical}:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *) input::-moz-placeholder,:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *) textarea::-moz-placeholder{color:#9ca3af;opacity:1}:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *) input::placeholder,:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *) textarea::placeholder{color:#9ca3af;opacity:1}[role=button]:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),button:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){cursor:pointer}:disabled:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){cursor:default}audio:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),canvas:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),embed:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),iframe:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),img:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),object:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),svg:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),video:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){display:block;vertical-align:middle}img:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *),video:where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])):where(#nuxt-graphql-middleware,#nuxt-graphql-middleware *){display:none}#nuxt-graphql-middleware-errors{align-items:flex-start;display:flex;height:100%;justify-content:center;left:0;padding:1.25rem;position:fixed;top:0;width:100%;z-index:999999999999}#nuxt-graphql-middleware-errors-background{background-color:rgba(68,64,60,.95);height:100%;left:0;position:absolute;top:0;width:100%}#nuxt-graphql-middleware-errors-content{border-radius:.25rem;max-width:1200px;overflow:auto;position:relative;width:100%;z-index:50;--ngm-tw-bg-opacity:1;background-color:rgb(28 25 23/var(--ngm-tw-bg-opacity,1));padding:1.75rem;--ngm-tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--ngm-tw-shadow-colored:0 25px 50px -12px var(--ngm-tw-shadow-color);box-shadow:var(--ngm-tw-ring-offset-shadow,0 0 #0000),var(--ngm-tw-ring-shadow,0 0 #0000),var(--ngm-tw-shadow);max-height:calc(100vh - 40px)}#nuxt-graphql-middleware-errors-content header{border-bottom-width:1px;display:flex;justify-content:space-between;margin-bottom:.75rem;--ngm-tw-border-opacity:1;border-bottom-color:rgb(68 64 60/var(--ngm-tw-border-opacity,1));padding-bottom:1.25rem}#nuxt-graphql-middleware-errors-content header h1{font-size:1.25rem;font-weight:700;line-height:1.75rem;--ngm-tw-text-opacity:1;color:rgb(255 255 255/var(--ngm-tw-text-opacity,1))}#nuxt-graphql-middleware-errors-content header button{border-radius:.25rem;--ngm-tw-bg-opacity:1;background-color:rgb(87 83 78/var(--ngm-tw-bg-opacity,1));font-size:.875rem;font-weight:700;letter-spacing:.1em;line-height:1.25rem;padding:.5rem .625rem;text-transform:uppercase;--ngm-tw-text-opacity:1;color:rgb(245 245 244/var(--ngm-tw-text-opacity,1))}#nuxt-graphql-middleware-errors-content header button:hover{--ngm-tw-bg-opacity:1;background-color:rgb(231 229 228/var(--ngm-tw-bg-opacity,1));--ngm-tw-text-opacity:1;color:rgb(28 25 23/var(--ngm-tw-text-opacity,1))}.nuxt-graphql-middleware-error-group{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--ngm-tw-text-opacity:1;color:rgb(245 245 244/var(--ngm-tw-text-opacity,1))}.nuxt-graphql-middleware-error-group td{padding-bottom:.375rem;padding-top:.375rem}.nuxt-graphql-middleware-error-group td:first-child{padding-right:2.5rem}.nuxt-graphql-middleware-error-group td:nth-child(2){overflow:auto;white-space:pre-wrap}.nuxt-graphql-middleware-error-group td.ngm-large{font-size:1.5rem;font-weight:700;line-height:2rem;padding-bottom:.75rem;padding-top:.75rem}.nuxt-graphql-middleware-error-group code{--ngm-tw-bg-opacity:1;background-color:rgb(28 25 23/var(--ngm-tw-bg-opacity,1))}.nuxt-graphql-middleware-errors-code{border-radius:.25rem;border-width:1px;display:block;margin-bottom:1rem;margin-top:1rem;white-space:pre;--ngm-tw-border-opacity:1;border-color:rgb(87 83 78/var(--ngm-tw-border-opacity,1));--ngm-tw-bg-opacity:1;background-color:rgb(41 37 36/var(--ngm-tw-bg-opacity,1));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;padding:.75rem;--ngm-tw-text-opacity:1;color:rgb(255 255 255/var(--ngm-tw-text-opacity,1));display:flex;gap:2rem}.nuxt-graphql-middleware-errors-code-code.ngm-is-highlighted{border-radius:.25rem;border-width:1px;--ngm-tw-border-opacity:1;border-color:rgb(185 28 28/var(--ngm-tw-border-opacity,1));--ngm-tw-bg-opacity:1;background-color:rgb(127 29 29/var(--ngm-tw-bg-opacity,1))}.nuxt-graphql-middleware-errors-code-line-number{text-align:right}.table{display:table}

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

@@ -1,40 +1,37 @@
 import type { FetchOptions } from 'ofetch';
-import type { GraphqlMiddlewareQuery, GraphqlMiddlewareMutation } from '#nuxt-graphql-middleware/generated-types';
-import type { RequestCacheOptions } from '#graphql-middleware/types';
-import type { GraphqlClientContext } from '#graphql-middleware-client-options';
-export type GraphqlMiddlewareQueryName = keyof GraphqlMiddlewareQuery;
-export type GraphqlMiddlewareMutationName = keyof GraphqlMiddlewareMutation;
+import type { RequestCacheOptions } from './../types.js';
+import type { GraphqlClientContext } from '#nuxt-graphql-middleware/client-options';
+import type { Query, Mutation } from '#nuxt-graphql-middleware/operation-types';
 export type GraphqlComposableOptions = {
     fetchOptions?: FetchOptions;
     graphqlCaching?: RequestCacheOptions;
     clientContext?: Partial<GraphqlClientContext>;
 };
-export type GetQueryArgs<T extends GraphqlMiddlewareQueryName, M extends GraphqlMiddlewareQuery> = M[T][0] extends null ? [T, (null | undefined)?, GraphqlComposableOptions?] : M[T][1] extends false ? [T, M[T][0], GraphqlComposableOptions?] : [T, M[T][0]?, GraphqlComposableOptions?];
-export type GetMutationArgs<T extends GraphqlMiddlewareMutationName, M extends GraphqlMiddlewareMutation> = M[T][0] extends null ? [T, (null | undefined)?, GraphqlComposableOptions?] : M[T][1] extends false ? [T, M[T][0], GraphqlComposableOptions?] : [T, M[T][0]?, GraphqlComposableOptions?];
-export type GetQueryResult<T extends GraphqlMiddlewareQueryName, M extends GraphqlMiddlewareQuery> = M[T] extends undefined ? undefined : M[T][2];
-export type GetMutationResult<T extends GraphqlMiddlewareMutationName, M extends GraphqlMiddlewareMutation> = M[T] extends undefined ? undefined : M[T][2];
-export declare function getEndpoint(operation: string, operationName: string): string;
-export type QueryObjectArgs<T extends GraphqlMiddlewareQueryName, M extends GraphqlMiddlewareQuery> = M[T][0] extends null ? {
-    name: T;
+export type GetQueryArgs<K extends keyof Query, Q extends Query[K] = Query[K]> = Q['variables'] extends null ? [K, (null | undefined)?, GraphqlComposableOptions?] : Q['needsVariables'] extends true ? [K, Q['variables'], GraphqlComposableOptions?] : [K, (Q['variables'] | null)?, GraphqlComposableOptions?];
+export type GetMutationArgs<K extends keyof Mutation, M extends Mutation[K] = Mutation[K]> = M['needsVariables'] extends true ? [K, M['variables'], GraphqlComposableOptions?] : [K, (M['variables'] | null)?, GraphqlComposableOptions?];
+export type GetQueryResult<K extends keyof Query, Q extends Query[K] = Query[K]> = Q['response'];
+export type GetMutationResult<K extends keyof Mutation, M extends Mutation[K] = Mutation[K]> = M['response'];
+export type QueryObjectArgs<K extends keyof Query, Q extends Query[K] = Query[K]> = Q['needsVariables'] extends true ? {
+    name: K;
     fetchOptions?: FetchOptions;
     graphqlCaching?: RequestCacheOptions;
     clientContext?: Partial<GraphqlClientContext>;
-    variables?: null;
+    variables: Q['variables'];
 } : {
-    name: T;
-    variables: M[T][0];
+    name: K;
+    variables?: Q['variables'] | null;
     fetchOptions?: FetchOptions;
     graphqlCaching?: RequestCacheOptions;
     clientContext?: Partial<GraphqlClientContext>;
 };
-export type MutationObjectArgs<T extends GraphqlMiddlewareMutationName, M extends GraphqlMiddlewareMutation> = M[T][0] extends null ? {
-    name: T;
-    variables?: null;
+export type MutationObjectArgs<K extends keyof Mutation, M extends Mutation[K] = Mutation[K]> = M['needsVariables'] extends true ? {
+    name: K;
+    variables: M['variables'];
     fetchOptions?: FetchOptions;
     clientContext?: Partial<GraphqlClientContext>;
 } : {
-    name: T;
-    variables: M[T][0];
+    name: K;
+    variables?: M['variables'] | null;
     fetchOptions?: FetchOptions;
     clientContext?: Partial<GraphqlClientContext>;
 };

package/dist/runtime/helpers/composables.js

@@ -1,9 +1,4 @@
-import { useRuntimeConfig } from "#imports";
 import { CLIENT_CONTEXT_PREFIX } from "../settings/index.js";
-export function getEndpoint(operation, operationName) {
-  const config = useRuntimeConfig();
-  return `${config?.public?.["nuxt-graphql-middleware"]?.serverApiPrefix}/${operation}/${operationName}`;
-}
 export function encodeContext(context) {
   return Object.entries(context).reduce(
     (acc, [key, value]) => {

package/dist/runtime/plugins/devMode.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/devMode.js

@@ -0,0 +1,23 @@
+import { defineNuxtPlugin, useState } from "#imports";
+import { createApp } from "vue";
+import DevModeOverlay from "../components/DevModeOverlay.vue";
+export default defineNuxtPlugin({
+  name: "nuxt-graphql-middleware:dev-mode",
+  setup(nuxtApp) {
+    const errors = useState(
+      "nuxt-graphql-middleware-errors",
+      () => []
+    );
+    nuxtApp.hook("nuxt-graphql-middleware:errors", (value) => {
+      errors.value.push(value);
+    });
+    if (import.meta.client) {
+      nuxtApp.hook("app:mounted", () => {
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const instance = createApp(DevModeOverlay);
+        instance.mount(container);
+      });
+    }
+  }
+});

package/dist/runtime/plugins/provideState.d.ts

@@ -1,4 +1,4 @@
-import { type GraphqlMiddlewareState } from '#graphql-middleware/types';
+import type { GraphqlMiddlewareState } from './../types.js';
 /**
  * Create and provide the state singleton for the composables.
  */

package/dist/runtime/{serverHandler → server/api}/debug.js

@@ -1,14 +1,10 @@
 import { defineEventHandler } from "h3";
-import { operations } from "#graphql-documents";
-import { useRuntimeConfig } from "#imports";
+import { documents } from "#nuxt-graphql-middleware/documents";
+import { getEndpoint } from "#nuxt-graphql-middleware/helpers";
 export default defineEventHandler(() => {
-  function getEndpoint(operation, operationName) {
-    const config = useRuntimeConfig();
-    return `${config?.public?.["nuxt-graphql-middleware"]?.serverApiPrefix}/${operation}/${operationName}`;
-  }
   let body = "<h1>nuxt-graphql-middleware debug</h1>";
   body += "<table><tbody>";
-  Object.entries(operations).forEach(([operationType, items]) => {
+  Object.entries(documents).forEach(([operationType, items]) => {
     Object.entries(items).forEach(([operationName, operation]) => {
       body += "<tr>";
       body += `<td style="font-size: 1.5rem">${operationType}</td>`;

package/dist/runtime/server/api/mutation.js

@@ -0,0 +1,28 @@
+import { defineEventHandler, getQuery, getRouterParam, readBody } from "h3";
+import {
+  extractRequestContext,
+  isValidMutation,
+  throwError
+} from "./../helpers/index.js";
+import { GraphqlMiddlewareOperation } from "./../../settings/index.js";
+import { documents } from "#nuxt-graphql-middleware/documents";
+import { doGraphqlRequest } from "../utils/doGraphqlRequest.js";
+export default defineEventHandler(async (event) => {
+  const operationName = getRouterParam(event, "name");
+  if (!isValidMutation(operationName)) {
+    return throwError("Invalid mutation name.");
+  }
+  const operationDocument = documents.mutation[operationName];
+  const queryParams = getQuery(event);
+  const context = extractRequestContext(queryParams);
+  const variables = await readBody(event);
+  return doGraphqlRequest(
+    {
+      query: operationDocument,
+      variables,
+      operation: GraphqlMiddlewareOperation.Mutation
+    },
+    context,
+    event
+  );
+});