@lewebsimple/nuxt-graphql 0.1.10 → 0.1.11

package/dist/module.d.mts

@@ -1,10 +1,17 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { GraphQLCacheConfig } from '../dist/runtime/utils/graphql-cache.js';
 
 interface ModuleOptions {
     endpoint?: string;
+    headers?: Record<string, string>;
+    cache?: Partial<GraphQLCacheConfig>;
     codegen?: {
         pattern?: string;
         schemaOutput?: string;
+        scalars?: Record<string, string | {
+            input: string;
+            output: string;
+        }>;
     };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@lewebsimple/nuxt-graphql",
   "configKey": "graphql",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -175,36 +175,65 @@ function formatDefinitions(defs) {
   return defs.map((def) => `${colorOf(def)}${def.name}${reset}`).join(`${dim} / ${reset}`);
 }
 async function runCodegen(options) {
-  const { sdl, documents, operationsFile } = options;
+  const { sdl, documents, operationsFile, schemasFile, scalars } = options;
   if (documents.length === 0) {
     logger.warn("No GraphQL documents found");
     return;
   }
+  const zodScalars = {};
+  if (scalars) {
+    for (const [name, config] of Object.entries(scalars)) {
+      const inputType = typeof config === "string" ? config : config.input;
+      switch (inputType) {
+        case "Date":
+          zodScalars[name] = "z.coerce.date()";
+          break;
+        case "number":
+          zodScalars[name] = "z.coerce.number()";
+          break;
+        case "boolean":
+          zodScalars[name] = "z.coerce.boolean()";
+          break;
+        default:
+          zodScalars[name] = "z.string()";
+      }
+    }
+  }
   try {
-    await generate(
-      {
-        schema: sdl,
-        documents,
-        generates: {
-          [operationsFile]: {
-            plugins: ["typescript", "typescript-operations", "typed-document-node"],
-            config: {
-              useTypeImports: true,
-              enumsAsTypes: true,
-              skipTypename: true,
-              documentVariableSuffix: "Document",
-              documentMode: "documentNode",
-              strictScalars: true,
-              defaultScalarType: "never"
-              // TODO: Make codegen config customizable, e.g. for custom scalars
+    const generates = {
+      [operationsFile]: {
+        plugins: ["typescript", "typescript-operations", "typed-document-node"],
+        config: {
+          useTypeImports: true,
+          enumsAsTypes: true,
+          skipTypename: true,
+          documentVariableSuffix: "Document",
+          documentMode: "documentNode",
+          strictScalars: true,
+          defaultScalarType: "never",
+          scalars
+        }
+      }
+    };
+    if (schemasFile) {
+      generates[schemasFile] = {
+        plugins: ["typescript-validation-schema"],
+        config: {
+          schema: "zodv4",
+          importFrom: "#graphql/operations",
+          useTypeImports: true,
+          directives: {
+            constraint: {
+              minLength: "min",
+              maxLength: "max",
+              pattern: "regex"
             }
-          }
-        },
-        silent: true,
-        errorsOnly: true
-      },
-      true
-    );
+          },
+          scalarSchemas: zodScalars
+        }
+      };
+    }
+    await generate({ schema: sdl, documents, generates, silent: true, errorsOnly: true }, true);
     logger.success(`Generated types for ${documents.length} document(s)`);
   } catch (error) {
     logger.error("GraphQL codegen failed:", error instanceof Error ? error.message : error);
@@ -253,13 +282,23 @@ const module$1 = defineNuxtModule({
     nuxt.hook("listen", (_, { url }) => {
       logger.success(`GraphQL Yoga ready at ${cyan}${url.replace(/\/$/, "")}${endpoint}${reset}`);
     });
-    nuxt.options.runtimeConfig.public.graphql = { endpoint };
+    nuxt.options.runtimeConfig.public.graphql = {
+      endpoint,
+      headers: options.headers || {},
+      cache: {
+        enabled: options.cache?.enabled ?? false,
+        ttl: options.cache?.ttl ?? 6e4,
+        storage: options.cache?.storage ?? "memory"
+      }
+    };
     const codegenPattern = options.codegen?.pattern ?? "**/*.gql";
     const graphqlrcFile = join(rootDir, ".graphqlrc");
     const operationsFile = join(nuxt.options.buildDir, "graphql/operations.ts");
     const registryFile = join(nuxt.options.buildDir, "graphql/registry.ts");
+    const schemasFile = join(nuxt.options.buildDir, "graphql/schemas.ts");
     nuxt.options.alias["#graphql/operations"] = operationsFile;
     nuxt.options.alias["#graphql/registry"] = registryFile;
+    nuxt.options.alias["#graphql/schemas"] = schemasFile;
     const schemaOutput = options.codegen?.schemaOutput ?? "server/graphql/schema.graphql";
     if (schemaOutput) {
       if (!schemaOutput.endsWith(".graphql")) {
@@ -279,12 +318,24 @@ const module$1 = defineNuxtModule({
         const defs = analysis.byFile.get(doc.path) ?? [];
         logger.info(`${cyan}${relativePath}${reset} [${formatDefinitions(defs)}]`);
       }
-      await runCodegen({ sdl, documents, operationsFile });
+      await runCodegen({
+        sdl,
+        documents,
+        operationsFile,
+        schemasFile,
+        scalars: options.codegen?.scalars
+      });
       if (writeFileIfChanged(schemaFile, sdl)) {
         logger.info(`GraphQL schema saved to ${cyan}${schemaOutput}${reset}`);
       }
-      const config = JSON.stringify({ schema: relative(rootDir, schemaFile), documents: codegenPattern }, null, 2);
-      if (writeFileIfChanged(graphqlrcFile, config)) {
+      const graphqlrc = {
+        schema: relative(rootDir, schemaFile),
+        documents: codegenPattern
+      };
+      if (options.codegen?.scalars) {
+        graphqlrc.scalars = options.codegen.scalars;
+      }
+      if (writeFileIfChanged(graphqlrcFile, JSON.stringify(graphqlrc, null, 2))) {
         logger.info(`GraphQL config saved to ${cyan}.graphqlrc${reset}`);
       }
       if (writeFileIfChanged(registryFile, generateRegistryByTypeSource(analysis.operationsByType))) {
@@ -295,6 +346,7 @@ const module$1 = defineNuxtModule({
       await generate();
       if (existsSync(operationsFile)) references.push({ path: operationsFile });
       if (existsSync(registryFile)) references.push({ path: registryFile });
+      if (existsSync(schemasFile)) references.push({ path: schemasFile });
     });
     if (nuxt.options.dev) {
       nuxt.hook("builder:watch", async (event, path) => {

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

@@ -0,0 +1,5 @@
+import type { QueryName, QueryVariables } from "#graphql/registry";
+export declare function useGraphQLCache(): {
+    enabled: any;
+    invalidate: <N extends QueryName>(operationName?: N, variables?: QueryVariables<N>) => Promise<void>;
+};

package/dist/runtime/composables/useGraphQLCache.js

@@ -0,0 +1,15 @@
+import { useRuntimeConfig } from "#imports";
+import { cacheInvalidate, initCache } from "../utils/graphql-cache.js";
+export function useGraphQLCache() {
+  const { public: { graphql: { cache: cacheConfig } } } = useRuntimeConfig();
+  if (import.meta.client && cacheConfig.enabled) {
+    initCache(cacheConfig.storage);
+  }
+  async function invalidate(operationName, variables) {
+    await cacheInvalidate(operationName, variables);
+  }
+  return {
+    enabled: cacheConfig.enabled,
+    invalidate
+  };
+}

package/dist/runtime/composables/useGraphQLMutation.js

@@ -1,6 +1,7 @@
 import { ref } from "vue";
 import { useNuxtApp } from "#imports";
 import { mutations } from "#graphql/registry";
+import { wrapError } from "../utils/graphql-error.js";
 export function useGraphQLMutation(operationName) {
   const document = mutations[operationName];
   const { $graphql } = useNuxtApp();
@@ -11,9 +12,8 @@ export function useGraphQLMutation(operationName) {
       const [variables, headers] = args;
       const result = await $graphql().request(document, variables, headers);
       return { data: result, error: null };
-    } catch (e) {
-      const error = e instanceof Error ? e : new Error(String(e));
-      return { data: null, error };
+    } catch (error) {
+      return { data: null, error: wrapError(error) };
     } finally {
       pending.value = false;
     }

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

@@ -1,4 +1,9 @@
 import type { AsyncData, AsyncDataOptions } from "#app";
 import { type QueryName, type QueryResult, type QueryVariables } from "#graphql/registry";
+import { type CacheOptions } from "../utils/graphql-cache.js";
 import type { IsEmptyObject } from "../utils/helpers.js";
-export declare function useGraphQLQuery<N extends QueryName>(operationName: N, ...args: IsEmptyObject<QueryVariables<N>> extends true ? [variables?: QueryVariables<N>, options?: AsyncDataOptions<QueryResult<N>>, headers?: HeadersInit] : [variables: QueryVariables<N>, options?: AsyncDataOptions<QueryResult<N>>, headers?: HeadersInit]): AsyncData<QueryResult<N>, Error | null>;
+export interface UseGraphQLQueryOptions<T> extends AsyncDataOptions<T> {
+    cache?: CacheOptions | false;
+    headers?: HeadersInit;
+}
+export declare function useGraphQLQuery<N extends QueryName>(operationName: N, ...args: IsEmptyObject<QueryVariables<N>> extends true ? [variables?: QueryVariables<N>, options?: UseGraphQLQueryOptions<QueryResult<N>>] : [variables: QueryVariables<N>, options?: UseGraphQLQueryOptions<QueryResult<N>>]): AsyncData<QueryResult<N>, Error | null>;

package/dist/runtime/composables/useGraphQLQuery.js

@@ -1,10 +1,37 @@
-import { useAsyncData, useNuxtApp } from "#imports";
-import { hash } from "ohash";
+import { useAsyncData, useNuxtApp, useRuntimeConfig, onScopeDispose } from "#imports";
 import { queries } from "#graphql/registry";
+import { cacheGet, cacheSet, dedupeGet, dedupeSet, registerRefresh, initCache, getCacheKey } from "../utils/graphql-cache.js";
 export function useGraphQLQuery(operationName, ...args) {
   const { $graphql } = useNuxtApp();
+  const { public: { graphql: { cache: globalCache } } } = useRuntimeConfig();
   const document = queries[operationName];
-  const [variables, options, headers] = args;
-  const key = `graphql:query:${operationName}:${hash(variables ?? {})}`;
-  return useAsyncData(key, () => $graphql().request(document, variables, headers), options);
+  const [variables, options] = args;
+  const cacheEnabled = options?.cache !== false && globalCache.enabled;
+  const cacheTtl = options?.cache === false ? 0 : options?.cache?.ttl ?? globalCache.ttl;
+  if (import.meta.client && cacheEnabled) {
+    initCache(globalCache.storage);
+  }
+  const key = getCacheKey(operationName, variables);
+  const fetcher = async () => {
+    if (import.meta.client && cacheEnabled) {
+      const cached = await cacheGet(operationName, variables);
+      if (cached) return cached;
+    }
+    const inFlight = dedupeGet(operationName, variables);
+    if (inFlight) return inFlight;
+    const promise = $graphql().request(document, variables, options?.headers);
+    dedupeSet(operationName, variables, promise);
+    const result = await promise;
+    if (import.meta.client && cacheEnabled && cacheTtl) {
+      await cacheSet(operationName, variables, result, cacheTtl);
+    }
+    return result;
+  };
+  const { cache: _cache, headers: _headers, ...asyncDataOptions } = options ?? {};
+  const asyncData = useAsyncData(key, fetcher, asyncDataOptions);
+  if (import.meta.client) {
+    const unregister = registerRefresh(operationName, variables, () => asyncData.refresh());
+    onScopeDispose(unregister);
+  }
+  return asyncData;
 }

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

@@ -1,9 +1,10 @@
 import { type MaybeRefOrGetter, type Ref } from "vue";
 import { type SubscriptionName, type SubscriptionResult, type SubscriptionVariables } from "#graphql/registry";
+import { type GraphQLClientError } from "../utils/graphql-error.js";
 import type { IsEmptyObject } from "../utils/helpers.js";
 export type UseGraphQLSubscriptionReturn<N extends SubscriptionName> = {
     data: Ref<SubscriptionResult<N> | null>;
-    error: Ref<Error | null>;
+    error: Ref<GraphQLClientError | null>;
     start: () => void;
     stop: () => void;
 };

package/dist/runtime/composables/useGraphQLSubscription.js

@@ -2,6 +2,7 @@ import { ref, onScopeDispose, toValue } from "vue";
 import { print } from "graphql";
 import { useNuxtApp } from "#imports";
 import { subscriptions } from "#graphql/registry";
+import { wrapError } from "../utils/graphql-error.js";
 export function useGraphQLSubscription(operationName, ...args) {
   const { $graphqlSSE } = useNuxtApp();
   const [variables] = args;
@@ -19,13 +20,13 @@ export function useGraphQLSubscription(operationName, ...args) {
       {
         next: (result) => {
           if (result.errors?.length) {
-            error.value = new Error(result.errors.map((e) => e.message).join(", "));
+            error.value = wrapError({ errors: result.errors });
           } else if (result.data) {
             data.value = result.data;
           }
         },
         error: (e) => {
-          error.value = e instanceof Error ? e : new Error(String(e));
+          error.value = wrapError(e);
         },
         complete: () => {
           unsubscribe = null;

package/dist/runtime/plugins/graphql.js

@@ -1,19 +1,25 @@
 import { GraphQLClient } from "graphql-request";
 import { createClient } from "graphql-sse";
 import { defineNuxtPlugin, useRequestHeaders, useRequestURL, useRuntimeConfig } from "#imports";
-export default defineNuxtPlugin(() => {
-  const { public: { graphql: { endpoint } } } = useRuntimeConfig();
+import { wrapError } from "../utils/graphql-error.js";
+export default defineNuxtPlugin((nuxtApp) => {
+  const { public: { graphql: { endpoint, headers: staticHeaders } } } = useRuntimeConfig();
   const { origin } = useRequestURL();
   const url = `${origin}${endpoint}`;
-  let client = null;
   const getClient = () => {
-    if (!client) {
-      client = new GraphQLClient(url);
-    }
+    const headers = { ...staticHeaders };
     if (import.meta.server) {
-      const headers = useRequestHeaders(["cookie", "authorization"]);
-      client.setHeaders(headers);
+      const ssrHeaders = useRequestHeaders(["cookie", "authorization"]);
+      Object.assign(headers, ssrHeaders);
     }
+    const client = new GraphQLClient(url, {
+      headers,
+      responseMiddleware: (response) => {
+        if (response instanceof Error) {
+          nuxtApp.callHook("graphql:error", wrapError(response));
+        }
+      }
+    });
     return client;
   };
   let sseClient = null;
@@ -22,7 +28,7 @@ export default defineNuxtPlugin(() => {
       throw new Error("SSE subscriptions are not available on the server");
     }
     if (!sseClient) {
-      sseClient = createClient({ url });
+      sseClient = createClient({ url, headers: staticHeaders });
     }
     return sseClient;
   };

package/dist/runtime/types/graphql-client.d.ts

@@ -1,17 +1,24 @@
 import type { GraphQLClient } from "graphql-request";
 import type { Client as SSEClient } from "graphql-sse";
+import type { GraphQLClientError } from "../utils/graphql-error";
 
 declare module "#app" {
   interface NuxtApp {
     $graphql: () => GraphQLClient;
     $graphqlSSE: () => SSEClient;
   }
+  interface RuntimeNuxtHooks {
+    "graphql:headers": (headers: Record<string, string>) => void | Promise<void>;
+    "graphql:error": (error: GraphQLClientError) => void;
+  }
 }
 
 declare module "nuxt/schema" {
   interface PublicRuntimeConfig {
     graphql: {
       endpoint: string;
+      headers: Record<string, string>;
+      cache: GraphQLCacheConfig;
     };
   }
 }

package/dist/runtime/utils/graphql-cache.d.ts

@@ -0,0 +1,26 @@
+export interface GraphQLCacheConfig {
+    enabled: boolean;
+    ttl: number;
+    storage: "memory" | "localStorage";
+}
+export interface CacheOptions {
+    enabled?: boolean;
+    ttl?: number;
+}
+export declare function initCache(type: "memory" | "localStorage"): void;
+export declare function getCacheKey(operationName: string, variables: unknown): string;
+export declare function cacheGet<T>(operationName: string, variables: unknown): Promise<T | null>;
+export declare function cacheSet<T>(operationName: string, variables: unknown, data: T, ttl: number): Promise<void>;
+export declare function dedupeGet(operationName: string, variables: unknown): Promise<unknown> | null;
+export declare function dedupeSet(operationName: string, variables: unknown, promise: Promise<unknown>): void;
+/**
+ * Register a refresh callback for a query
+ */
+export declare function registerRefresh(operationName: string, variables: unknown, refresh: () => void): () => void;
+/**
+ * Invalidate cached queries and trigger refreshes
+ * - No args: invalidate all
+ * - operationName only: invalidate all queries with that name
+ * - operationName + variables: invalidate specific query
+ */
+export declare function cacheInvalidate(operationName?: string, variables?: unknown): Promise<void>;

package/dist/runtime/utils/graphql-cache.js

@@ -0,0 +1,65 @@
+import { createStorage } from "unstorage";
+import memoryDriver from "unstorage/drivers/memory";
+import localStorageDriver from "unstorage/drivers/localstorage";
+import { hash } from "ohash";
+const inFlight = /* @__PURE__ */ new Map();
+const refreshCallbacks = /* @__PURE__ */ new Map();
+let storage = null;
+export function initCache(type) {
+  if (storage) return;
+  storage = createStorage({
+    driver: type === "localStorage" ? localStorageDriver({ base: "graphql:" }) : memoryDriver()
+  });
+}
+export function getCacheKey(operationName, variables) {
+  return `${operationName}:${hash(variables ?? {})}`;
+}
+export async function cacheGet(operationName, variables) {
+  if (!storage) return null;
+  const key = getCacheKey(operationName, variables);
+  const entry = await storage.getItem(key);
+  if (!entry) return null;
+  if (Date.now() > entry.expires) {
+    await storage.removeItem(key);
+    return null;
+  }
+  return entry.data;
+}
+export async function cacheSet(operationName, variables, data, ttl) {
+  if (!storage) return;
+  const key = getCacheKey(operationName, variables);
+  const entry = { data, expires: Date.now() + ttl };
+  await storage.setItem(key, entry);
+}
+export function dedupeGet(operationName, variables) {
+  const key = getCacheKey(operationName, variables);
+  return inFlight.get(key) ?? null;
+}
+export function dedupeSet(operationName, variables, promise) {
+  const key = getCacheKey(operationName, variables);
+  inFlight.set(key, promise);
+  promise.finally(() => inFlight.delete(key));
+}
+export function registerRefresh(operationName, variables, refresh) {
+  const key = getCacheKey(operationName, variables);
+  if (!refreshCallbacks.has(key)) {
+    refreshCallbacks.set(key, /* @__PURE__ */ new Set());
+  }
+  refreshCallbacks.get(key).add(refresh);
+  return () => refreshCallbacks.get(key)?.delete(refresh);
+}
+export async function cacheInvalidate(operationName, variables) {
+  if (!storage) return;
+  if (operationName && variables !== void 0) {
+    const key = getCacheKey(operationName, variables);
+    await storage.removeItem(key);
+    refreshCallbacks.get(key)?.forEach((cb) => cb());
+  } else {
+    const keys = await storage.getKeys();
+    const toRemove = operationName ? keys.filter((k) => k.startsWith(`${operationName}:`)) : keys;
+    await Promise.all(toRemove.map((k) => storage.removeItem(k)));
+    for (const key of toRemove) {
+      refreshCallbacks.get(key)?.forEach((cb) => cb());
+    }
+  }
+}

package/dist/runtime/utils/graphql-error.d.ts

@@ -0,0 +1,13 @@
+import type { GraphQLError } from "graphql";
+export declare class GraphQLClientError extends Error {
+    readonly errors: GraphQLError[];
+    constructor(message: string, errors?: GraphQLError[]);
+}
+/**
+ * Wrap a generic error into a GraphQLClientError
+ *
+ * @param error Generic error
+ *
+ * @returns Wrapped GraphQLClientError
+ */
+export declare function wrapError(error: unknown): GraphQLClientError;

package/dist/runtime/utils/graphql-error.js

@@ -0,0 +1,24 @@
+export class GraphQLClientError extends Error {
+  errors;
+  constructor(message, errors = []) {
+    super(message);
+    this.name = "GraphQLClientError";
+    this.errors = errors;
+  }
+}
+export function wrapError(error) {
+  if (error instanceof GraphQLClientError) {
+    return error;
+  }
+  if (error && typeof error === "object" && "response" in error) {
+    const clientError = error;
+    return new GraphQLClientError(clientError.message, clientError.response?.errors);
+  }
+  if (error && typeof error === "object" && "errors" in error) {
+    const { errors } = error;
+    const message2 = errors.map((e) => e.message).join(", ");
+    return new GraphQLClientError(message2, errors);
+  }
+  const message = error instanceof Error ? error.message : String(error);
+  return new GraphQLClientError(message);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lewebsimple/nuxt-graphql",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Opinionated Nuxt module for using GraphQL",
   "repository": "lewebsimple/nuxt-graphql",
   "license": "MIT",
@@ -41,12 +41,14 @@
     "@graphql-typed-document-node/core": "^3.2.0",
     "@nuxt/kit": "^4.2.2",
     "graphql": "^16.12.0",
+    "graphql-codegen-typescript-validation-schema": "^0.18.1",
     "graphql-request": "^7.4.0",
     "graphql-sse": "^2.6.0",
     "graphql-yoga": "^5.18.0",
     "jiti": "^2.6.1",
     "ohash": "^2.0.11",
-    "tinyglobby": "^0.2.15"
+    "tinyglobby": "^0.2.15",
+    "unstorage": "^1.17.3"
   },
   "devDependencies": {
     "@nuxt/devtools": "^3.1.1",