nuxt-graphql-middleware 5.1.1 → 5.2.1

package/dist/module.mjs

@@ -20,7 +20,7 @@ import { existsSync as existsSync$1 } from 'fs';
 import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
 
 const name = "nuxt-graphql-middleware";
-const version = "5.1.1";
+const version = "5.2.1";
 
 const logger = useLogger("nuxt-graphql-middleware");
 const defaultOptions = {
@@ -820,7 +820,11 @@ ${color.cyan(S_BAR_END)}
 class ModuleHelper {
   constructor(nuxt, moduleUrl, options) {
     this.nuxt = nuxt;
-    const mergedOptions = defu({}, options, defaultOptions);
+    const mergedOptions = defu(
+      {},
+      options,
+      defaultOptions
+    );
     if (!mergedOptions.autoImportPatterns) {
       mergedOptions.autoImportPatterns = [
         "~~/**/*.{gql,graphql}",
@@ -828,6 +832,15 @@ class ModuleHelper {
         "!node_modules"
       ];
     }
+    if (!mergedOptions.graphqlEndpoint) {
+      const graphqlEndpoint = process.env.NUXT_GRAPHQL_MIDDLEWARE_GRAPHQL_ENDPOINT;
+      if (!graphqlEndpoint) {
+        throw new Error(
+          'Missing GraphQL endpoint in module build. Please either provide the endpoint via "graphqlMiddleware.graphqlEndpoint" in nuxt.config.ts or via "NUXT_GRAPHQL_MIDDLEWARE_GRAPHQL_ENDPOINT" environment variable.'
+        );
+      }
+      mergedOptions.graphqlEndpoint = graphqlEndpoint;
+    }
     const layerAliases = nuxt.options._layers.map((layer) => {
       return {
         "~~": layer.config.rootDir,
@@ -1347,9 +1360,7 @@ const OperationVariables = defineGeneratorTemplate(
     const operations = output.getCollectedOperations().reduce((acc, collectedOperation) => {
       const node = collectedOperation.node;
       const operationName = collectedOperation.graphqlName;
-      const variables = (node.variableDefinitions || []).map(
-        (v) => v.variable.name.value
-      );
+      const variables = (node.variableDefinitions || []).map((v) => v.variable.name.value).sort();
       acc[operationName] = variables;
       return acc;
     }, {});
@@ -1403,8 +1414,9 @@ export { serverOptions }
 import type { GraphqlMiddlewareServerOptions } from '${helper.paths.runtimeTypes}'
 import serverOptionsImport from '${resolvedPathRelative}'
 
-export type GraphqlResponseAdditions =
-  typeof serverOptionsImport extends GraphqlMiddlewareServerOptions<infer R, any, any> ? R : {}
+type AdditionsFromServerOptions = typeof serverOptionsImport extends GraphqlMiddlewareServerOptions<infer R, any, any> ? R : {}
+
+export type GraphqlResponseAdditions = Omit<AdditionsFromServerOptions, 'data' | 'errors'>
 
 declare export const serverOptions: GraphqlMiddlewareServerOptions
 `;
@@ -1732,7 +1744,7 @@ const module = defineNuxtModule({
       clientCacheMaxSize: helper.options.clientCache?.maxSize ?? 100
     };
     nuxt.options.runtimeConfig.graphqlMiddleware = {
-      graphqlEndpoint: helper.options.graphqlEndpoint || ""
+      graphqlEndpoint: helper.options.graphqlEndpoint
     };
     helper.transpile(fileURLToPath(new URL("./runtime", import.meta.url)));
     helper.inlineNitroExternals(helper.resolvers.module.resolve("./runtime"));

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

@@ -30,7 +30,11 @@ overrideClientContext: Record<string, any>,
 /**
  * The cache options set on the composable.
  */
-cacheOptions: RequestCacheOptions): Promise<GraphqlResponse<T>>;
+cacheOptions: RequestCacheOptions, 
+/**
+ * The async data key.
+ */
+asyncDataKey?: string): Promise<GraphqlResponse<T>>;
 declare module '#app' {
     interface NuxtApp {
         $graphqlCache?: GraphqlMiddlewareCache;

package/dist/runtime/composables/nuxtApp.js

@@ -7,14 +7,10 @@ import {
   clientCacheEnabledAtBuild,
   importMetaClient
 } from "#nuxt-graphql-middleware/config";
-import { encodeVariables } from "../helpers/queryEncoding.js";
-import {
-  encodeContext,
-  getOrCreateClientCache,
-  sortQueryParams
-} from "../helpers/composables.js";
+import { encodeVariables, sortQueryParams } from "../helpers/queryEncoding.js";
+import { encodeContext, getOrCreateClientCache } from "../helpers/composables.js";
 import { OPERATION_HASH_PREFIX } from "../settings/index.js";
-export function performRequest(operation, operationName, variablesOrBody, overrideFetchOptions, globalClientContext, overrideClientContext, cacheOptions) {
+export function performRequest(operation, operationName, variablesOrBody, overrideFetchOptions, globalClientContext, overrideClientContext, cacheOptions, asyncDataKey) {
   const state = useGraphqlState();
   const app = useNuxtApp();
   const config = useAppConfig();
@@ -89,7 +85,7 @@ export function performRequest(operation, operationName, variablesOrBody, overri
       }
     )
   ).then((v) => {
-    if (import.meta.dev && v.errors?.length) {
+    if (import.meta.dev && v?.errors?.length) {
       app.callHook("nuxt-graphql-middleware:errors", {
         operation,
         operationName,
@@ -103,7 +99,7 @@ export function performRequest(operation, operationName, variablesOrBody, overri
     });
   });
   if (importMetaClient && cacheKey && app.$graphqlCache && clientCacheEnabledAtBuild) {
-    app.$graphqlCache.set(cacheKey, promise);
+    app.$graphqlCache.set(cacheKey, promise, asyncDataKey);
   }
   return promise;
 }

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

@@ -5,9 +5,8 @@ import { type GraphqlClientContext } from '#nuxt-graphql-middleware/client-optio
 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> & {
+type AsyncGraphqlQueryOptions<FetchOptions, ResT, DataT = ResT, PickKeys extends KeysOf<DataT> = KeysOf<DataT>, DefaultT = undefined> = AsyncDataOptions<ResT, DataT, PickKeys, DefaultT> & {
     /**
      * Control how the GraphQL response can be cached.
      */

package/dist/runtime/composables/useAsyncGraphqlQuery.js

@@ -16,6 +16,7 @@ export function useAsyncGraphqlQuery(name, ...args) {
     const vars = isRef(variables) ? variables.value : variables;
     return `useAsyncGraphqlQuery:${name}:${hash(vars)}`;
   });
+  let prevKey = "";
   const config = useAppConfig();
   const app = useNuxtApp();
   if (importMetaClient) {
@@ -39,13 +40,19 @@ export function useAsyncGraphqlQuery(name, ...args) {
       asyncDataOptions.getCachedData = function(key, app2, ctx) {
         if (ctx.cause === "initial") {
           return app2.payload.data[key] ?? app2.$graphqlCache?.get(key);
+        } else if (ctx.cause === "refresh:manual" || ctx.cause === "refresh:hook") {
+          if (app2.$graphqlCache) {
+            app2.$graphqlCache.purgeAsyncDataKey(key);
+            app2.$graphqlCache.purgeAsyncDataKey(prevKey);
+          }
         }
       };
     }
   }
   const result = useAsyncData(
-    asyncDataKey,
+    asyncDataKey.value,
     () => {
+      prevKey = asyncDataKey.value;
       const globalClientContext = clientOptions && clientOptions.buildClientContext ? clientOptions.buildClientContext() : {};
       return performRequest(
         "query",
@@ -54,7 +61,8 @@ export function useAsyncGraphqlQuery(name, ...args) {
         asyncDataOptions.fetchOptions || {},
         globalClientContext,
         asyncDataOptions.clientContext || {},
-        asyncDataOptions.graphqlCaching || {}
+        asyncDataOptions.graphqlCaching || {},
+        asyncDataKey.value
       );
     },
     asyncDataOptions

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

@@ -6,11 +6,13 @@
  */
 export declare class GraphqlMiddlewareCache {
     cache: Record<string, unknown>;
+    asyncDataKeyMap: Record<string, string[]>;
     keys: string[];
     maxSize: number;
     constructor(maxSize?: number);
-    set(key: string, value: unknown): void;
+    set(key: string, value: unknown, asyncDataKey?: string): void;
     get<T>(key: string): T | undefined;
     purge(): void;
+    purgeAsyncDataKey(asyncDataKey: string): void;
     remove(key: string): boolean;
 }

package/dist/runtime/helpers/ClientCache.js

@@ -1,13 +1,12 @@
 export class GraphqlMiddlewareCache {
-  cache;
-  keys;
+  cache = {};
+  asyncDataKeyMap = {};
+  keys = [];
   maxSize;
   constructor(maxSize = 100) {
-    this.cache = {};
-    this.keys = [];
     this.maxSize = maxSize;
   }
-  set(key, value) {
+  set(key, value, asyncDataKey) {
     if (Object.prototype.hasOwnProperty.call(this.cache, key)) {
       const index = this.keys.indexOf(key);
       if (index > -1) {
@@ -17,10 +16,20 @@ export class GraphqlMiddlewareCache {
       const oldestKey = this.keys.shift();
       if (oldestKey !== void 0) {
         delete this.cache[oldestKey];
+        delete this.asyncDataKeyMap[oldestKey];
       }
     }
     this.cache[key] = value;
     this.keys.push(key);
+    if (asyncDataKey) {
+      if (!Object.prototype.hasOwnProperty.call(
+        this.asyncDataKeyMap,
+        asyncDataKey
+      )) {
+        this.asyncDataKeyMap[asyncDataKey] = [];
+      }
+      this.asyncDataKeyMap[asyncDataKey].push(key);
+    }
   }
   get(key) {
     const value = this.cache[key];
@@ -37,6 +46,15 @@ export class GraphqlMiddlewareCache {
   purge() {
     this.cache = {};
     this.keys = [];
+    this.asyncDataKeyMap = {};
+  }
+  purgeAsyncDataKey(asyncDataKey) {
+    const keys = this.asyncDataKeyMap[asyncDataKey];
+    if (keys && keys.length) {
+      keys.forEach((key) => {
+        this.remove(key);
+      });
+    }
   }
   remove(key) {
     if (Object.prototype.hasOwnProperty.call(this.cache, key)) {

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

@@ -41,8 +41,4 @@ export type MutationObjectArgs<K extends keyof Mutation, M extends Mutation[K] =
 export type PickFrom<T, K extends Array<string>> = T extends Array<any> ? T : T extends Record<string, any> ? keyof T extends K[number] ? T : K[number] extends never ? T : Pick<T, K[number]> : T;
 export type KeysOf<T> = Array<T extends T ? (keyof T extends string ? keyof T : never) : never>;
 export declare function encodeContext(context: Record<string, string | null | undefined>): Record<string, string>;
-/**
- * Sort an object defining query params alphabetically.
- */
-export declare function sortQueryParams(obj: Record<string, string>): Record<string, string>;
 export declare function getOrCreateClientCache(app: NuxtApp, config: AppConfig): GraphqlMiddlewareCache | undefined;

package/dist/runtime/helpers/composables.js

@@ -15,14 +15,6 @@ export function encodeContext(context) {
     {}
   );
 }
-export function sortQueryParams(obj) {
-  const sortedKeys = Object.keys(obj).sort();
-  const sortedObj = {};
-  for (const key of sortedKeys) {
-    sortedObj[key] = obj[key];
-  }
-  return sortedObj;
-}
 export function getOrCreateClientCache(app, config) {
   if (importMetaServer || !clientCacheEnabledAtBuild) {
     return;

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

@@ -8,4 +8,8 @@ export declare function encodeVariables(variables?: Record<string, any> | null):
  * In complex cases, the entire variables are sent as a JSON encoded string:
  * ?__variables=%7B%22foobar%22:%7B%22path%22:%22%22%7D%7D
  */
-export declare function decodeVariables(query: Record<string, any>, validKeys?: string[]): any;
+export declare function decodeVariables(query: Record<string, any>, validKeys?: string[]): Record<string, any>;
+/**
+ * Sort an object defining query params alphabetically.
+ */
+export declare function sortQueryParams(obj: Record<string, string>): Record<string, string>;

package/dist/runtime/helpers/queryEncoding.js

@@ -49,7 +49,7 @@ function filterValidKeys(validKeys, obj) {
 export function decodeVariables(query, validKeys) {
   try {
     if (query.__variables && typeof query.__variables === "string") {
-      return JSON.parse(query.__variables);
+      return sortQueryParams(JSON.parse(query.__variables));
     }
   } catch {
   }
@@ -85,5 +85,13 @@ export function decodeVariables(query, validKeys) {
       result[key] = query[key];
     }
   }
-  return result;
+  return sortQueryParams(result);
+}
+export function sortQueryParams(obj) {
+  const sortedKeys = Object.keys(obj).sort();
+  const sortedObj = {};
+  for (const key of sortedKeys) {
+    sortedObj[key] = obj[key];
+  }
+  return sortedObj;
 }

package/dist/shared/{nuxt-graphql-middleware.-BeiPV4H.d.mts → nuxt-graphql-middleware.ct2xvPoD.d.mts}

@@ -95,11 +95,14 @@ interface ModuleOptions {
     /**
      * The URL of the GraphQL server.
      *
+     * If not provided, the module will use the NUXT_GRAPHQL_MIDDLEWARE_GRAPHQL_ENDPOINT
+     * environment variable during dev mode.
+     *
      * For the runtime execution you can provide a method that determines the endpoint
      * during runtime. See the server/graphqlMiddleware.serverOptions.ts documentation
      * for more information.
      */
-    graphqlEndpoint: string;
+    graphqlEndpoint?: string;
     /**
      * Download the GraphQL schema and store it on disk.
      *

package/dist/utils.d.mts

@@ -1,4 +1,4 @@
-import { M as ModuleContext } from './shared/nuxt-graphql-middleware.-BeiPV4H.mjs';
+import { M as ModuleContext } from './shared/nuxt-graphql-middleware.ct2xvPoD.mjs';
 import 'graphql';
 import 'nuxt/schema';
 import '@nuxt/kit';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-graphql-middleware",
-  "version": "5.1.1",
+  "version": "5.2.1",
   "description": "Module to perform GraphQL requests as a server middleware.",
   "repository": {
     "type": "git",
@@ -72,26 +72,27 @@
     "@graphql-codegen/cli": "^5.0.5",
     "@graphql-codegen/schema-ast": "^4.1.0",
     "@graphql-tools/utils": "^10.8.6",
-    "@nuxt/devtools-kit": "^2.3.1",
-    "graphql-typescript-deluxe": "^0.0.14",
+    "@nuxt/devtools-kit": "^2.6.2",
+    "graphql-typescript-deluxe": "^0.0.15",
     "minisearch": "^7.1.2",
     "picocolors": "^1.1.1"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.8",
     "@nuxt/devtools": "^2.4.0",
-    "@nuxt/devtools-ui-kit": "^2.4.0",
+    "@nuxt/devtools-ui-kit": "^2.6.2",
     "@nuxt/eslint": "^1.2.0",
-    "@nuxt/kit": "^3.17.2",
+    "@nuxt/kit": "^4.0.3",
     "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/schema": "^3.17.2",
+    "@nuxt/schema": "^4.0.3",
     "@types/micromatch": "^4.0.9",
     "cypress": "^13.12.0",
+    "cypress-wait-until": "^3.0.2",
     "eslint": "^9.23.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-prettier": "^5.2.3",
     "mermaid": "^11.5.0",
-    "nuxt": "^3.17.2",
+    "nuxt": "^4.0.3",
     "postcss": "^8.5.3",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.0",
@@ -106,6 +107,7 @@
     "typedoc-vitepress-theme": "^1.1.2",
     "vitepress": "^1.6.3",
     "vitepress-plugin-mermaid": "^2.0.17",
-    "vitest": "^1.6.0"
+    "vitest": "^1.6.0",
+    "vue-tsc": "^2.2.12"
   }
 }