nuxt-graphql-middleware 5.0.0-alpha.9 → 5.1.0

package/dist/runtime/components/CodeFrame.vue

@@ -23,39 +23,30 @@
   </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
-
+<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)
-
-  // Take only the lines we care about
-  const sliced = fullLines.slice(indexStart, indexEnd)
-
-  // Remove trailing empty lines
+  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()
+    sliced.pop();
   }
-
-  // Map to your final structure
   return sliced.map((code, i) => {
-    const lineNumber = indexStart + i + 1
+    const lineNumber = indexStart + i + 1;
     return {
       lineNumber,
       code,
-      isHighlighted: lineNumber === props.line,
-    }
-  })
-})
+      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

@@ -21,40 +21,32 @@
   </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[]>(() => {
+<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<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 */
+    ...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 = []
+  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

@@ -5,19 +5,17 @@
   </tr>
 </template>
 
-<script setup lang="ts">
-import { computed } from '#imports'
-
-const props = defineProps<{
-  extensions?: Record<string, unknown>
-}>()
-
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  extensions: { type: Object, required: false }
+});
 const mapped = computed(() => {
   if (!props.extensions) {
-    return []
+    return [];
   }
   return Object.entries(props.extensions).map(([key, value]) => {
-    return { 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

@@ -23,7 +23,7 @@
       <template v-for="error in uniqueErrors" :key="error.key">
         <tr>
           <td>Path</td>
-          <td>{{ error.path.join(' - ') }}</td>
+          <td>{{ error.path.join(" - ") }}</td>
         </tr>
         <tr>
           <td colspan="2" class="ngm-large">{{ error.message }}</td>
@@ -46,44 +46,33 @@
   </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)
-
+<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]
-})
-
+  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()
-})
+  () => 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,8 +1,36 @@
 import type { FetchOptions } from 'ofetch';
-import { GraphqlMiddlewareCache } from '../helpers/ClientCache.js';
+import type { GraphqlMiddlewareCache } from '../helpers/ClientCache.js';
 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>>;
+export declare function performRequest<T>(
+/**
+ * The operation type.
+ */
+operation: 'query' | 'mutation', 
+/**
+ * The name of the operation.
+ */
+operationName: string, 
+/**
+ * The operation variables.
+ */
+variablesOrBody: Record<string, any>, 
+/**
+ * Fetch options set on the composable.
+ */
+overrideFetchOptions: FetchOptions, 
+/**
+ * The global client options determined in the composable.
+ */
+globalClientContext: Record<string, any>, 
+/**
+ * Client options overrides set on the composable.
+ */
+overrideClientContext: Record<string, any>, 
+/**
+ * The cache options set on the composable.
+ */
+cacheOptions: RequestCacheOptions): Promise<GraphqlResponse<T>>;
 declare module '#app' {
     interface NuxtApp {
         $graphqlCache?: GraphqlMiddlewareCache;

package/dist/runtime/composables/nuxtApp.js

@@ -1,26 +1,57 @@
 import { useGraphqlState } from "./useGraphqlState.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) {
+import { operationHashes } from "#nuxt-graphql-middleware/operation-hashes";
+import {
+  clientCacheEnabledAtBuild,
+  importMetaClient
+} from "#nuxt-graphql-middleware/config";
+import { encodeVariables } from "../helpers/queryEncoding.js";
+import {
+  encodeContext,
+  getOrCreateClientCache,
+  sortQueryParams
+} from "../helpers/composables.js";
+import { OPERATION_HASH_PREFIX } from "../settings/index.js";
+export function performRequest(operation, operationName, variablesOrBody, overrideFetchOptions, globalClientContext, overrideClientContext, cacheOptions) {
   const state = useGraphqlState();
   const app = useNuxtApp();
+  const config = useAppConfig();
+  const method = operation === "query" ? "get" : "post";
+  const isQuery = operation === "query";
   if (!state) {
     console.error(
       `A GraphQL composable for ${operation} "${operationName}" was called before the "nuxt-graphql-middleware-provide-state" plugin could provide the state, which might lead to unexpected behaviour. Make sure that custom plugins that perform GraphQL requests are executed after "nuxt-graphql-middleware-provide-state" by setting it as a dependency via "dependsOn".`
     );
   }
-  const key = `${operation}:${operationName}:${hash(options.params)}`;
-  if (cacheOptions) {
-    const config = useAppConfig();
-    if (import.meta.client && cacheOptions.client && config.graphqlMiddleware.clientCacheEnabled) {
-      if (!app.$graphqlCache) {
-        app.$graphqlCache = new GraphqlMiddlewareCache(
-          config.graphqlMiddleware.clientCacheMaxSize
-        );
-      }
-      const cached = app.$graphqlCache.get(key);
+  const clientContext = Object.assign(
+    {},
+    globalClientContext,
+    overrideClientContext
+  );
+  const fetchOptions = Object.assign(
+    {},
+    state?.fetchOptions,
+    overrideFetchOptions
+  );
+  const paramsRaw = Object.assign(
+    importMetaClient ? {
+      // The unique operation hash that changes whenever any operation source or
+      // fragment changes.
+      [OPERATION_HASH_PREFIX]: operationHashes[operationName]
+    } : {},
+    encodeContext(clientContext),
+    fetchOptions.params,
+    fetchOptions.query,
+    isQuery ? encodeVariables(variablesOrBody) : null
+  );
+  const params = importMetaClient && isQuery ? sortQueryParams(paramsRaw) : paramsRaw;
+  const cacheKey = importMetaClient && clientCacheEnabledAtBuild && isQuery && cacheOptions?.client && config.graphqlMiddleware.clientCacheEnabled ? `${operation}:${operationName}:${hash(params)}` : void 0;
+  if (importMetaClient && cacheKey) {
+    const cache = getOrCreateClientCache(app, config);
+    if (cache) {
+      const cached = cache.get(cacheKey);
       if (cached) {
         if (import.meta.dev) {
           cached.then((response) => {
@@ -40,11 +71,23 @@ export function performRequest(operation, operationName, method, options, cacheO
   }
   const promise = $fetch(
     getEndpoint(operation, operationName),
-    {
-      ...state && state.fetchOptions ? state.fetchOptions : {},
-      ...options,
-      method
-    }
+    Object.assign(
+      {},
+      // Use the merged fetch options.
+      fetchOptions,
+      // Remove params and query from the fetch options.
+      {
+        params: void 0,
+        query: void 0
+      },
+      // Set the previously merged params. That way we only ever pass "params"
+      // as the query params.
+      {
+        params,
+        method,
+        body: operation === "mutation" ? variablesOrBody : void 0
+      }
+    )
   ).then((v) => {
     if (import.meta.dev && v.errors?.length) {
       app.callHook("nuxt-graphql-middleware:errors", {
@@ -54,14 +97,13 @@ export function performRequest(operation, operationName, method, options, cacheO
         stack: Error().stack
       });
     }
-    return {
-      ...v,
-      data: v.data,
-      errors: v.errors || []
-    };
+    return Object.assign({}, v, {
+      data: v?.data,
+      errors: v?.errors || []
+    });
   });
-  if (import.meta.client && cacheOptions?.client && app.$graphqlCache) {
-    app.$graphqlCache.set(key, promise);
+  if (importMetaClient && cacheKey && app.$graphqlCache && clientCacheEnabledAtBuild) {
+    app.$graphqlCache.set(cacheKey, promise);
   }
   return promise;
 }

package/dist/runtime/composables/useAsyncGraphqlQuery.js

@@ -1,57 +1,60 @@
 import {
-  encodeContext
+  getOrCreateClientCache
 } from "./../helpers/composables.js";
 import { isRef, unref } from "vue";
-import { buildRequestParams } from "./../helpers/index.js";
 import { performRequest } from "./nuxtApp.js";
 import {
   clientOptions
 } from "#nuxt-graphql-middleware/client-options";
-import { useAsyncData, useAppConfig, useNuxtApp } from "#imports";
+import { useAsyncData, useAppConfig, useNuxtApp, computed } from "#imports";
 import { hash } from "ohash";
+import { importMetaClient } from "#nuxt-graphql-middleware/config";
 export function useAsyncGraphqlQuery(name, ...args) {
   const variables = args[0];
   const asyncDataOptions = args[1] || {};
-  const fetchOptions = asyncDataOptions.fetchOptions;
-  const key = `graphql:${name}:${hash(unref(variables))}`;
+  const asyncDataKey = computed(() => {
+    const vars = isRef(variables) ? variables.value : variables;
+    return `useAsyncGraphqlQuery:${name}:${hash(vars)}`;
+  });
   const config = useAppConfig();
   const app = useNuxtApp();
-  if (import.meta.client) {
+  if (importMetaClient) {
     if (variables && isRef(variables)) {
       if (!asyncDataOptions.watch) {
         asyncDataOptions.watch = [];
       }
       asyncDataOptions.watch.push(variables);
     }
+    if (asyncDataOptions.graphqlCaching?.client && app.isHydrating) {
+      const cache = getOrCreateClientCache(app, config);
+      if (cache) {
+        const key = asyncDataKey.value;
+        const payload = app.payload.data[asyncDataKey.value];
+        if (payload) {
+          cache.set(key, payload);
+        }
+      }
+    }
     if (asyncDataOptions.graphqlCaching?.client && !asyncDataOptions.getCachedData) {
-      asyncDataOptions.getCachedData = function(key2) {
-        if (!app.isHydrating && !config.graphqlMiddleware.clientCacheEnabled) {
-          return;
+      asyncDataOptions.getCachedData = function(key, app2, ctx) {
+        if (ctx.cause === "initial") {
+          return app2.payload.data[key] ?? app2.$graphqlCache?.get(key);
         }
-        return app.payload.data[key2];
       };
     }
   }
   const result = useAsyncData(
-    key,
+    asyncDataKey,
     () => {
-      const globalClientContext = clientOptions.buildClientContext ? clientOptions.buildClientContext() : {};
+      const globalClientContext = clientOptions && clientOptions.buildClientContext ? clientOptions.buildClientContext() : {};
       return performRequest(
         "query",
         name,
-        "get",
-        {
-          ...fetchOptions,
-          params: {
-            ...fetchOptions?.params || {},
-            ...buildRequestParams(unref(variables)),
-            ...encodeContext({
-              ...globalClientContext,
-              ...asyncDataOptions.clientContext || {}
-            })
-          }
-        },
-        asyncDataOptions.graphqlCaching
+        unref(variables) || {},
+        asyncDataOptions.fetchOptions || {},
+        globalClientContext,
+        asyncDataOptions.clientContext || {},
+        asyncDataOptions.graphqlCaching || {}
       );
     },
     asyncDataOptions

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

@@ -1,4 +1,4 @@
-import { type GetMutationArgs, type MutationObjectArgs, type GetMutationResult } from './../helpers/composables.js';
+import type { GetMutationArgs, MutationObjectArgs, GetMutationResult } from './../helpers/composables.js';
 import type { GraphqlResponse } from '#nuxt-graphql-middleware/response';
 import type { Mutation } from '#nuxt-graphql-middleware/operation-types';
 /**

package/dist/runtime/composables/useGraphqlMutation.js

@@ -1,25 +1,20 @@
-import {
-  encodeContext
-} from "./../helpers/composables.js";
 import { performRequest } from "./nuxtApp.js";
 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] : [
+  const [name, body, fetchOptions, overrideClientContext] = typeof args[0] === "string" ? [args[0], args[1], args[2]?.fetchOptions, args[2]?.clientContext] : [
     args[0].name,
     args[0].variables,
     args[0].fetchOptions,
     args[0].clientContext
   ];
-  const globalClientContext = clientOptions.buildClientContext ? clientOptions.buildClientContext() : {};
-  return performRequest("mutation", name, "post", {
-    ...fetchOptions,
-    body,
-    params: {
-      ...fetchOptions.params || {},
-      ...encodeContext({
-        ...globalClientContext,
-        ...overrideClientContext
-      })
-    }
-  });
+  const globalClientContext = clientOptions && clientOptions.buildClientContext ? clientOptions.buildClientContext() : {};
+  return performRequest(
+    "mutation",
+    name,
+    body || {},
+    fetchOptions || {},
+    globalClientContext,
+    overrideClientContext || {},
+    {}
+  );
 }

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

@@ -1,4 +1,4 @@
-import { type GetQueryArgs, type QueryObjectArgs, type GetQueryResult } from './../helpers/composables.js';
+import type { GetQueryArgs, QueryObjectArgs, GetQueryResult } from './../helpers/composables.js';
 import type { GraphqlResponse } from '#nuxt-graphql-middleware/response';
 import type { Query } from '#nuxt-graphql-middleware/operation-types';
 /**

package/dist/runtime/composables/useGraphqlQuery.js

@@ -1,17 +1,7 @@
-import {
-  encodeContext
-} from "./../helpers/composables.js";
-import { buildRequestParams } from "./../helpers/index.js";
 import { performRequest } from "./nuxtApp.js";
 import { clientOptions } from "#nuxt-graphql-middleware/client-options";
 export function useGraphqlQuery(...args) {
-  const [
-    name,
-    variables,
-    fetchOptions = {},
-    graphqlCaching = {},
-    overrideClientContext = {}
-  ] = typeof args[0] === "string" ? [
+  const [name, variables, fetchOptions, graphqlCaching, overrideClientContext] = typeof args[0] === "string" ? [
     args[0],
     args[1],
     args[2]?.fetchOptions,
@@ -24,22 +14,14 @@ export function useGraphqlQuery(...args) {
     args[0].graphqlCaching,
     args[0].clientContext
   ];
-  const globalClientContext = clientOptions.buildClientContext ? clientOptions.buildClientContext() : {};
+  const globalClientContext = clientOptions && clientOptions.buildClientContext ? clientOptions.buildClientContext() : {};
   return performRequest(
     "query",
     name,
-    "get",
-    {
-      ...fetchOptions,
-      params: {
-        ...fetchOptions.params || {},
-        ...buildRequestParams(variables),
-        ...encodeContext({
-          ...globalClientContext,
-          ...overrideClientContext
-        })
-      }
-    },
-    graphqlCaching
+    variables || {},
+    fetchOptions || {},
+    globalClientContext || {},
+    overrideClientContext || {},
+    graphqlCaching || {}
   );
 }

package/dist/runtime/composables/useGraphqlUploadMutation.js

@@ -49,7 +49,7 @@ export function useGraphqlUploadMutation(...args) {
   }
   const state = useGraphqlState();
   const formData = createFormData(variables);
-  const globalClientContext = clientOptions.buildClientContext ? clientOptions.buildClientContext() : {};
+  const globalClientContext = clientOptions && clientOptions.buildClientContext ? clientOptions.buildClientContext() : {};
   const clientContext = encodeContext({
     ...globalClientContext,
     ...overrideClientContext

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

@@ -12,4 +12,5 @@ export declare class GraphqlMiddlewareCache {
     set(key: string, value: unknown): void;
     get<T>(key: string): T | undefined;
     purge(): void;
+    remove(key: string): boolean;
 }

package/dist/runtime/helpers/ClientCache.js

@@ -36,5 +36,17 @@ export class GraphqlMiddlewareCache {
   }
   purge() {
     this.cache = {};
+    this.keys = [];
+  }
+  remove(key) {
+    if (Object.prototype.hasOwnProperty.call(this.cache, key)) {
+      delete this.cache[key];
+      const index = this.keys.indexOf(key);
+      if (index > -1) {
+        this.keys.splice(index, 1);
+      }
+      return true;
+    }
+    return false;
   }
 }