@lewebsimple/nuxt-graphql 0.1.4 → 0.1.6

package/README.md

@@ -5,7 +5,7 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-Opinionated Nuxt module for using GraphQL Yoga on the server and urql as a client.
+Opinionated Nuxt module for using GraphQL Yoga with graphql-request / graphql-sse.
 
 - ✨ [Release Notes](/CHANGELOG.md)
 - 🏀 [Online playground](https://stackblitz.com/github/lewebsimple/nuxt-graphql?file=playground%2Fapp.vue)

package/dist/module.json

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

package/dist/module.mjs

@@ -1,12 +1,12 @@
-import { useLogger, defineNuxtModule, createResolver, getLayerDirectories, addServerTemplate, addServerHandler, addPlugin } from '@nuxt/kit';
-import { existsSync } from 'node:fs';
+import { useLogger, defineNuxtModule, createResolver, getLayerDirectories, addServerTemplate, addServerHandler, addImportsDir, addPlugin, addTypeTemplate } from '@nuxt/kit';
+import { existsSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
 
 const logger = useLogger("@lewebsimple/nuxt-graphql");
 const cyan = "\x1B[36m";
 const reset = "\x1B[0m";
 
-function findServerFile(layerDirs, relativePath) {
+function findServerFile(layerDirs, relativePath, isRequired = false) {
   const extensions = ["ts", "mjs"];
   for (const dir of layerDirs) {
     const candidates = extensions.map((ext) => join(dir.server, `${relativePath}.${ext}`));
@@ -15,8 +15,10 @@ function findServerFile(layerDirs, relativePath) {
       return fullPath;
     }
   }
-  throw new Error(`Could not find required server file ${cyan}${relativePath}${reset} in layers:
+  if (isRequired) {
+    throw new Error(`Could not find required server file ${cyan}${relativePath}.{${extensions.join(",")}}${reset} in the following layers:
 ${layerDirs.map(({ server }) => server).join("\n")}`);
+  }
 }
 
 const module$1 = defineNuxtModule({
@@ -33,39 +35,30 @@ const module$1 = defineNuxtModule({
     const { resolve } = createResolver(import.meta.url);
     const { rootDir, serverDir } = nuxt.options;
     const layerDirs = [...getLayerDirectories(nuxt), { server: serverDir.replace(rootDir, `${rootDir}/playground`) }];
-    const schemaPath = findServerFile(layerDirs, "graphql/schema");
-    const contextPath = findServerFile(layerDirs, "graphql/context");
     nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.alias ||= {};
-      nitroConfig.alias["#graphql/schema"] = schemaPath;
-      nitroConfig.alias["#graphql/context"] = contextPath;
+      nitroConfig.alias["#graphql/schema"] = findServerFile(layerDirs, "graphql/schema", true);
+      nitroConfig.alias["#graphql/context"] = findServerFile(layerDirs, "graphql/context") || resolve("./runtime/server/default-context.ts");
     });
     const endpoint = options.yoga?.endpoint ?? "/api/graphql";
     addServerTemplate({
       filename: "graphql/yoga-handler",
-      getContents: () => `
-import { createYoga } from "graphql-yoga";
-import { defineEventHandler, toWebRequest, sendWebResponse } from "h3";
-import { schema } from "#graphql/schema";
-import { createContext } from "#graphql/context";
-
-const yoga = createYoga({
-  schema,
-  graphqlEndpoint: "${endpoint}",
-});
-
-export default defineEventHandler(async (event) => {
-  const context = await createContext(event);
-  const request = toWebRequest(event);
-  const response = await yoga.handleRequest(request, context);
-  return sendWebResponse(event, response);
-});`.trim()
+      getContents: () => readFileSync(resolve("./templates/yoga-handler.mjs"), "utf-8").replace("{{endpoint}}", endpoint)
     });
     addServerHandler({ route: endpoint, handler: "graphql/yoga-handler" });
     nuxt.hook("listen", (_server, { url }) => {
       logger.success(`GraphQL Yoga available at ${cyan}${url.replace(/\/$/, "") + endpoint}${reset}`);
     });
-    addPlugin(resolve("./runtime/plugin"));
+    nuxt.options.runtimeConfig.public.graphql = { endpoint };
+    addImportsDir(resolve("./runtime/composables"));
+    addPlugin(resolve("./runtime/plugins/graphql"));
+    addTypeTemplate({
+      filename: "types/graphql-client.d.ts",
+      getContents: () => readFileSync(resolve("./runtime/types/graphql-client.d.ts"), "utf-8")
+    });
+    nuxt.hook("prepare:types", ({ references }) => {
+      references.push({ path: "./types/graphql-client.d.ts" });
+    });
   }
 });
 

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

@@ -0,0 +1,4 @@
+import type { RequestDocument, Variables } from "graphql-request";
+export declare function useGraphQL(): {
+    request: <T>(document: RequestDocument, variables?: Variables) => any;
+};

package/dist/runtime/composables/useGraphQL.js

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

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

@@ -0,0 +1,7 @@
+import { GraphQLClient } from "graphql-request";
+declare const _default: import("nuxt/app").Plugin<{
+    graphql: GraphQLClient;
+}> & import("nuxt/app").ObjectPlugin<{
+    graphql: GraphQLClient;
+}>;
+export default _default;

package/dist/runtime/plugins/graphql.js

@@ -0,0 +1,12 @@
+import { GraphQLClient } from "graphql-request";
+import { defineNuxtPlugin, useRequestURL, useRuntimeConfig } from "#imports";
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig();
+  const { origin } = useRequestURL();
+  const client = new GraphQLClient(`${origin}${config.public.graphql.endpoint}`);
+  return {
+    provide: {
+      graphql: client
+    }
+  };
+});

package/dist/runtime/server/default-context.d.ts

@@ -0,0 +1,7 @@
+import type { H3Event } from "h3";
+export declare const createContext: (event: H3Event) => {
+    event: H3Event<import("h3").EventHandlerRequest>;
+};
+export type GraphQLContext = {
+    event: H3Event;
+};

package/dist/runtime/server/default-context.js

@@ -0,0 +1 @@
+export const createContext = (event) => ({ event });

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

@@ -0,0 +1,17 @@
+import type { GraphQLClient } from "graphql-request";
+
+declare module "#app" {
+  interface NuxtApp {
+    $graphql: GraphQLClient;
+  }
+}
+
+declare module "nuxt/schema" {
+  interface PublicRuntimeConfig {
+    graphql: {
+      endpoint: string;
+    };
+  }
+}
+
+export { };

package/dist/templates/yoga-handler.mjs

@@ -0,0 +1,24 @@
+import { createYoga } from "graphql-yoga";
+import { defineEventHandler, toWebRequest, sendWebResponse } from "h3";
+import { schema } from "#graphql/schema";
+import { createContext } from "#graphql/context";
+
+let yoga = null;
+
+function getYoga() {
+  if (!yoga) {
+    yoga = createYoga({
+      schema,
+      graphqlEndpoint: "{{endpoint}}",
+      fetchAPI: globalThis,
+    });
+  }
+  return yoga;
+}
+
+export default defineEventHandler(async (event) => {
+  const request = toWebRequest(event);
+  const context = await createContext(event);
+  const response = await getYoga().handleRequest(request, context);
+  return sendWebResponse(event, response);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lewebsimple/nuxt-graphql",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Opinionated Nuxt module for using GraphQL",
   "repository": "lewebsimple/nuxt-graphql",
   "license": "MIT",
@@ -36,6 +36,7 @@
   "dependencies": {
     "@nuxt/kit": "^4.2.2",
     "graphql": "^16.12.0",
+    "graphql-request": "^7.4.0",
     "graphql-yoga": "^5.17.1"
   },
   "devDependencies": {

package/dist/runtime/plugin.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugin.js

@@ -1,4 +0,0 @@
-import { defineNuxtPlugin } from "#app";
-export default defineNuxtPlugin((_nuxtApp) => {
-  console.log("\u2728 @lewebsimple/nuxt-graphql plugin loaded");
-});