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

package/dist/runtime/components/CodeFrame.vue

@@ -0,0 +1,52 @@
+<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>
+import { computed } from "#imports";
+const props = defineProps({
+  source: { type: String, required: true },
+  line: { type: Number, required: true },
+  column: { type: Number, required: true }
+});
+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);
+  const sliced = fullLines.slice(indexStart, indexEnd);
+  while (sliced.length && !sliced[sliced.length - 1]?.trim()) {
+    sliced.pop();
+  }
+  return sliced.map((code, i) => {
+    const lineNumber = indexStart + i + 1;
+    return {
+      lineNumber,
+      code,
+      isHighlighted: lineNumber === props.line
+    };
+  });
+});
+</script>

package/dist/runtime/components/CodeFrame.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    source: string;
+    line: number;
+    column: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/DevModeOverlay.vue

@@ -0,0 +1,52 @@
+<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>
+import "./../css/output.css";
+import { useState, computed } from "#imports";
+import ErrorGroup from "./ErrorGroup.vue";
+const errors = useState(
+  "nuxt-graphql-middleware-errors",
+  () => []
+);
+const groups = computed(() => {
+  return [
+    ...errors.value.reduce((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;
+    }, /* @__PURE__ */ new Map()).values()
+  ];
+});
+function clearErrors() {
+  errors.value = [];
+}
+</script>

package/dist/runtime/components/DevModeOverlay.vue.d.ts

@@ -0,0 +1,3 @@
+import './../css/output.css.js';
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/ErrorExtensions.vue

@@ -0,0 +1,21 @@
+<template>
+  <tr v-for="item in mapped" :key="item.key">
+    <td>{{ item.key }}</td>
+    <td>{{ item.value }}</td>
+  </tr>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  extensions: { type: Object, required: false }
+});
+const mapped = computed(() => {
+  if (!props.extensions) {
+    return [];
+  }
+  return Object.entries(props.extensions).map(([key, value]) => {
+    return { key, value };
+  });
+});
+</script>

package/dist/runtime/components/ErrorExtensions.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    extensions?: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/ErrorGroup.vue

@@ -0,0 +1,78 @@
+<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 setup>
+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";
+const props = defineProps({
+  operation: { type: String, required: true },
+  operationName: { type: String, required: true },
+  errors: { type: Array, required: true },
+  stack: { type: String, required: false }
+});
+const key = computed(() => props.operation + "_" + props.operationName);
+const filePath = computed(() => {
+  return operationSources[key.value];
+});
+const source = computed(
+  () => documents[props.operation]?.[props.operationName]
+);
+const uniqueErrors = computed(() => {
+  return props.errors.reduce((acc, v) => {
+    const key2 = v.message;
+    if (!acc.has(key2)) {
+      acc.set(key2, { ...v, key: key2, count: 0 });
+    }
+    acc.get(key2).count++;
+    return acc;
+  }, /* @__PURE__ */ new Map()).values().toArray();
+});
+</script>

package/dist/runtime/components/ErrorGroup.vue.d.ts

@@ -0,0 +1,9 @@
+import type { GraphqlResponseError } from '../types.js';
+type __VLS_Props = {
+    operation: string;
+    operationName: string;
+    errors: GraphqlResponseError[];
+    stack?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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>`;