@lewebsimple/nuxt-graphql 0.1.9 → 0.1.10

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { useLogger, defineNuxtModule, createResolver, getLayerDirectories, addServerTemplate, addServerHandler, addImportsDir, addPlugin, addTypeTemplate } from '@nuxt/kit';
+import { useLogger, defineNuxtModule, createResolver, getLayerDirectories, addServerTemplate, addServerHandler, addImportsDir, addServerImportsDir, addPlugin, addTypeTemplate } from '@nuxt/kit';
 import { existsSync, readFileSync, mkdirSync, writeFileSync } from 'node:fs';
 import { join, dirname, relative } from 'node:path';
 import { glob } from 'tinyglobby';
@@ -238,7 +238,7 @@ const module$1 = defineNuxtModule({
     const layerServerDirs = layerDirs.map(({ server }) => server);
     const layerRootDirs = layerDirs.map(({ root }) => root);
     const schemaPath = await findSingleFile(layerServerDirs, "graphql/schema.{ts,mjs}", true);
-    const contextPath = await findSingleFile(layerServerDirs, "graphql/context.{ts,mjs}") || resolve("./runtime/server/default-context.ts");
+    const contextPath = await findSingleFile(layerServerDirs, "graphql/context.{ts,mjs}") || resolve("./runtime/server/graphql/default-context.ts");
     nuxt.hook("nitro:config", (config) => {
       config.alias ||= {};
       config.alias["#graphql/schema"] = schemaPath;
@@ -304,6 +304,7 @@ const module$1 = defineNuxtModule({
       });
     }
     addImportsDir(resolve("./runtime/composables"));
+    addServerImportsDir(resolve("./runtime/server/utils"));
     addPlugin(resolve("./runtime/plugins/graphql"));
     addTypeTemplate({
       filename: "types/graphql-client.d.ts",

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

@@ -1,7 +1,7 @@
 import { type MutationName, type MutationResult, type MutationVariables } from "#graphql/registry";
 import type { IsEmptyObject } from "../utils/helpers.js";
 export declare function useGraphQLMutation<N extends MutationName>(operationName: N): {
-    mutate: (...args: IsEmptyObject<MutationVariables<N>> extends true ? [variables?: MutationVariables<N>] : [variables: MutationVariables<N>]) => Promise<{
+    mutate: (...args: IsEmptyObject<MutationVariables<N>> extends true ? [variables?: MutationVariables<N>, headers?: HeadersInit] : [variables: MutationVariables<N>, headers?: HeadersInit]) => Promise<{
         data: MutationResult<N> | null;
         error: Error | null;
     }>;

package/dist/runtime/composables/useGraphQLMutation.js

@@ -1,14 +1,15 @@
 import { ref } from "vue";
-import { useGraphQL } from "./useGraphQL.js";
+import { useNuxtApp } from "#imports";
 import { mutations } from "#graphql/registry";
 export function useGraphQLMutation(operationName) {
   const document = mutations[operationName];
-  const { request } = useGraphQL();
+  const { $graphql } = useNuxtApp();
   const pending = ref(false);
   async function mutate(...args) {
     pending.value = true;
     try {
-      const result = await request(document, args[0]);
+      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));

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

@@ -1,4 +1,4 @@
 import type { AsyncData, AsyncDataOptions } from "#app";
 import { type QueryName, type QueryResult, type QueryVariables } from "#graphql/registry";
 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>, opts?: AsyncDataOptions<QueryResult<N>>] : [variables: QueryVariables<N>, opts?: AsyncDataOptions<QueryResult<N>>]): AsyncData<QueryResult<N>, Error | null>;
+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>;

package/dist/runtime/composables/useGraphQLQuery.js

@@ -1,11 +1,10 @@
-import { useAsyncData } from "#imports";
+import { useAsyncData, useNuxtApp } from "#imports";
 import { hash } from "ohash";
-import { useGraphQL } from "./useGraphQL.js";
 import { queries } from "#graphql/registry";
 export function useGraphQLQuery(operationName, ...args) {
+  const { $graphql } = useNuxtApp();
   const document = queries[operationName];
-  const [variables, opts] = args;
-  const { request } = useGraphQL();
+  const [variables, options, headers] = args;
   const key = `graphql:query:${operationName}:${hash(variables ?? {})}`;
-  return useAsyncData(key, () => request(document, variables), opts);
+  return useAsyncData(key, () => $graphql().request(document, variables, headers), options);
 }

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

@@ -0,0 +1,10 @@
+import { type MaybeRefOrGetter, type Ref } from "vue";
+import { type SubscriptionName, type SubscriptionResult, type SubscriptionVariables } from "#graphql/registry";
+import type { IsEmptyObject } from "../utils/helpers.js";
+export type UseGraphQLSubscriptionReturn<N extends SubscriptionName> = {
+    data: Ref<SubscriptionResult<N> | null>;
+    error: Ref<Error | null>;
+    start: () => void;
+    stop: () => void;
+};
+export declare function useGraphQLSubscription<N extends SubscriptionName>(operationName: N, ...args: IsEmptyObject<SubscriptionVariables<N>> extends true ? [variables?: MaybeRefOrGetter<SubscriptionVariables<N>>] : [variables: MaybeRefOrGetter<SubscriptionVariables<N>>]): UseGraphQLSubscriptionReturn<N>;

package/dist/runtime/composables/useGraphQLSubscription.js

@@ -0,0 +1,45 @@
+import { ref, onScopeDispose, toValue } from "vue";
+import { print } from "graphql";
+import { useNuxtApp } from "#imports";
+import { subscriptions } from "#graphql/registry";
+export function useGraphQLSubscription(operationName, ...args) {
+  const { $graphqlSSE } = useNuxtApp();
+  const [variables] = args;
+  const data = ref(null);
+  const error = ref(null);
+  let unsubscribe = null;
+  function start() {
+    stop();
+    error.value = null;
+    unsubscribe = $graphqlSSE().subscribe(
+      {
+        query: print(subscriptions[operationName]),
+        variables: toValue(variables)
+      },
+      {
+        next: (result) => {
+          if (result.errors?.length) {
+            error.value = new Error(result.errors.map((e) => e.message).join(", "));
+          } else if (result.data) {
+            data.value = result.data;
+          }
+        },
+        error: (e) => {
+          error.value = e instanceof Error ? e : new Error(String(e));
+        },
+        complete: () => {
+          unsubscribe = null;
+        }
+      }
+    );
+  }
+  function stop() {
+    unsubscribe?.();
+    unsubscribe = null;
+  }
+  if (import.meta.client) {
+    start();
+  }
+  onScopeDispose(stop);
+  return { data, error, start, stop };
+}

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

@@ -1,7 +1,10 @@
 import { GraphQLClient } from "graphql-request";
+import { type Client as SSEClient } from "graphql-sse";
 declare const _default: import("nuxt/app").Plugin<{
-    graphql: GraphQLClient;
+    graphql: () => GraphQLClient;
+    graphqlSSE: () => SSEClient;
 }> & import("nuxt/app").ObjectPlugin<{
-    graphql: GraphQLClient;
+    graphql: () => GraphQLClient;
+    graphqlSSE: () => SSEClient;
 }>;
 export default _default;

package/dist/runtime/plugins/graphql.js

@@ -1,12 +1,35 @@
 import { GraphQLClient } from "graphql-request";
-import { defineNuxtPlugin, useRequestURL, useRuntimeConfig } from "#imports";
+import { createClient } from "graphql-sse";
+import { defineNuxtPlugin, useRequestHeaders, useRequestURL, useRuntimeConfig } from "#imports";
 export default defineNuxtPlugin(() => {
-  const config = useRuntimeConfig();
+  const { public: { graphql: { endpoint } } } = useRuntimeConfig();
   const { origin } = useRequestURL();
-  const client = new GraphQLClient(`${origin}${config.public.graphql.endpoint}`);
+  const url = `${origin}${endpoint}`;
+  let client = null;
+  const getClient = () => {
+    if (!client) {
+      client = new GraphQLClient(url);
+    }
+    if (import.meta.server) {
+      const headers = useRequestHeaders(["cookie", "authorization"]);
+      client.setHeaders(headers);
+    }
+    return client;
+  };
+  let sseClient = null;
+  const getSSEClient = () => {
+    if (import.meta.server) {
+      throw new Error("SSE subscriptions are not available on the server");
+    }
+    if (!sseClient) {
+      sseClient = createClient({ url });
+    }
+    return sseClient;
+  };
   return {
     provide: {
-      graphql: client
+      graphql: getClient,
+      graphqlSSE: getSSEClient
     }
   };
 });

package/dist/runtime/server/utils/graphql-client.d.ts

@@ -0,0 +1,15 @@
+import type { H3Event } from "h3";
+import { GraphQLClient } from "graphql-request";
+/**
+ * Create server-side GraphQL client instance for the given H3 event.
+ *
+ * @param event H3 event
+ *
+ * @returns GraphQL client instance
+ */
+export declare function getGraphQLClient(event: H3Event): GraphQLClient;
+declare module "h3" {
+    interface H3EventContext {
+        __nuxtGraphQLClient?: GraphQLClient;
+    }
+}

package/dist/runtime/server/utils/graphql-client.js

@@ -0,0 +1,14 @@
+import { getRequestHeaders, getRequestURL } from "h3";
+import { GraphQLClient } from "graphql-request";
+import { useRuntimeConfig } from "#imports";
+export function getGraphQLClient(event) {
+  if (event.context.__nuxtGraphQLClient) {
+    return event.context.__nuxtGraphQLClient;
+  }
+  const { public: { graphql: { endpoint } } } = useRuntimeConfig();
+  const { origin } = getRequestURL(event);
+  const url = `${origin}${endpoint}`;
+  const headers = getRequestHeaders(event);
+  event.context.__nuxtGraphQLClient = new GraphQLClient(url, { headers });
+  return event.context.__nuxtGraphQLClient;
+}

package/dist/runtime/server/utils/useGraphQLMutation.d.ts

@@ -0,0 +1,9 @@
+import type { H3Event } from "h3";
+import { type MutationName, type MutationResult, type MutationVariables } from "#graphql/registry";
+import type { IsEmptyObject } from "../../utils/helpers.js";
+export declare function useGraphQLMutation<N extends MutationName>(event: H3Event, operationName: N): Promise<{
+    mutate: (...args: IsEmptyObject<MutationVariables<N>> extends true ? [variables?: MutationVariables<N>, headers?: HeadersInit] : [variables: MutationVariables<N>, headers?: HeadersInit]) => Promise<{
+        data: MutationResult<N> | null;
+        error: Error | null;
+    }>;
+}>;

package/dist/runtime/server/utils/useGraphQLMutation.js

@@ -0,0 +1,16 @@
+import { getGraphQLClient } from "./graphql-client.js";
+import { mutations } from "#graphql/registry";
+export async function useGraphQLMutation(event, operationName) {
+  const client = getGraphQLClient(event);
+  async function mutate(...args) {
+    try {
+      const [variables, headers] = args;
+      const result = await client.request(mutations[operationName], variables, headers);
+      return { data: result, error: null };
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      return { data: null, error };
+    }
+  }
+  return { mutate };
+}

package/dist/runtime/server/utils/useGraphQLQuery.d.ts

@@ -0,0 +1,4 @@
+import type { H3Event } from "h3";
+import { type QueryName, type QueryResult, type QueryVariables } from "#graphql/registry";
+import type { IsEmptyObject } from "../../utils/helpers.js";
+export declare function useGraphQLQuery<N extends QueryName>(event: H3Event, operationName: N, ...args: IsEmptyObject<QueryVariables<N>> extends true ? [variables?: QueryVariables<N>, headers?: HeadersInit] : [variables: QueryVariables<N>, headers?: HeadersInit]): Promise<QueryResult<N>>;

package/dist/runtime/server/utils/useGraphQLQuery.js

@@ -0,0 +1,7 @@
+import { getGraphQLClient } from "./graphql-client.js";
+import { queries } from "#graphql/registry";
+export async function useGraphQLQuery(event, operationName, ...args) {
+  const client = getGraphQLClient(event);
+  const [variables, headers] = args;
+  return client.request(queries[operationName], variables, headers);
+}

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

@@ -1,8 +1,10 @@
 import type { GraphQLClient } from "graphql-request";
+import type { Client as SSEClient } from "graphql-sse";
 
 declare module "#app" {
   interface NuxtApp {
-    $graphql: GraphQLClient;
+    $graphql: () => GraphQLClient;
+    $graphqlSSE: () => SSEClient;
   }
 }
 

package/dist/templates/yoga-handler.mjs

@@ -13,6 +13,7 @@ function getYoga() {
       graphqlEndpoint: "{{endpoint}}",
       fetchAPI: globalThis,
       graphiql: process.env.NODE_ENV !== "production",
+      subscriptions: { protocol: "SSE" },
     });
   }
   return yoga;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lewebsimple/nuxt-graphql",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Opinionated Nuxt module for using GraphQL",
   "repository": "lewebsimple/nuxt-graphql",
   "license": "MIT",
@@ -22,6 +22,17 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release --push && npm publish",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
   "dependencies": {
     "@graphql-codegen/cli": "^5.0.7",
     "@graphql-codegen/typed-document-node": "^5.1.2",
@@ -31,6 +42,7 @@
     "@nuxt/kit": "^4.2.2",
     "graphql": "^16.12.0",
     "graphql-request": "^7.4.0",
+    "graphql-sse": "^2.6.0",
     "graphql-yoga": "^5.18.0",
     "jiti": "^2.6.1",
     "ohash": "^2.0.11",
@@ -58,15 +70,5 @@
     "types": {
       "chore": false
     }
-  },
-  "scripts": {
-    "dev": "npm run dev:prepare && nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release --push && npm publish",
-    "lint": "eslint .",
-    "test": "vitest run",
-    "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   }
 }

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

@@ -1,4 +0,0 @@
-import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
-export declare function useGraphQL(): {
-    request: <TResult, TVariables extends Record<string, unknown> | undefined>(document: TypedDocumentNode<TResult, TVariables>, variables?: TVariables) => Promise<TResult>;
-};

package/dist/runtime/composables/useGraphQL.js

@@ -1,8 +0,0 @@
-import { useNuxtApp } from "#imports";
-export function useGraphQL() {
-  const { $graphql } = useNuxtApp();
-  async function request(document, variables) {
-    return $graphql.request({ document, variables });
-  }
-  return { request };
-}