@lewebsimple/nuxt-graphql 0.1.1 → 0.1.3

package/README.md

@@ -11,7 +11,7 @@ Opinionated Nuxt module for using GraphQL Yoga on the server and urql as a clien
 - 🏀 [Online playground](https://stackblitz.com/github/lewebsimple/nuxt-graphql?file=playground%2Fapp.vue)
 
 ## Features
-- 🧘‍♂️ GraphQL Yoga server handler with user-provided schema
+- 🧘‍♂️ GraphQL Yoga server handler with user-provided schema / context
 
 ## Quick Setup
 
@@ -40,6 +40,19 @@ export const schema = createSchema({
 });
 ```
 
+Define your GraphQL context in `server/graphql/context.ts`:
+
+```ts
+import type { H3Event } from "h3";
+
+export async function createContext(_event: H3Event) {
+  return {
+    foo: "bar",
+  };
+}
+
+```
+
 That's it! You can now use Nuxt GraphQL in your Nuxt app ✨
 
 

package/dist/module.json

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

package/dist/module.mjs

@@ -1,5 +1,5 @@
-import { useLogger, defineNuxtModule, createResolver, getLayerDirectories, addTemplate, addServerHandler, addPlugin } from '@nuxt/kit';
-import { existsSync, readFileSync } from 'node:fs';
+import { useLogger, defineNuxtModule, createResolver, getLayerDirectories, addTypeTemplate, addServerTemplate, addServerHandler, addPlugin } from '@nuxt/kit';
+import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 
 const logger = useLogger("@lewebsimple/nuxt-graphql");
@@ -30,25 +30,70 @@ const module$1 = defineNuxtModule({
     }
   },
   async setup(options, nuxt) {
-    const resolver = createResolver(import.meta.url);
+    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");
-    nuxt.options.alias["#graphql/schema"] = schemaPath.replace(/\.(ts|mjs)$/i, "");
-    logger.success(`GraphQL schema found at ${cyan}${schemaPath}${reset}`);
-    addTemplate({ filename: "types/graphql-schema.d.ts", src: resolver.resolve("./runtime/types/graphql-schema.d.ts") });
+    const contextPath = findServerFile(layerDirs, "graphql/context");
+    addTypeTemplate({
+      filename: "types/graphql-runtime.d.ts",
+      getContents: () => `
+import type { schema as userSchema } from "${schemaPath}";
+import type { createContext as userCreateContext } from "${contextPath}";
+
+type UserCreateContext = typeof userCreateContext;
+
+export type GraphQLContext = Awaited<ReturnType<UserCreateContext>>;
+
+declare module "#graphql/schema" {
+  export const schema: typeof userSchema;
+}
+
+declare module "#graphql/context" {
+  export const createContext: UserCreateContext;
+}
+
+declare module "#graphql/runtime" {
+  export type { GraphQLContext };
+}
+
+export {};
+`.trim()
+    });
+    nuxt.hook("nitro:config", (nitroConfig) => {
+      nitroConfig.alias ||= {};
+      nitroConfig.alias["#graphql/schema"] = schemaPath;
+      nitroConfig.alias["#graphql/context"] = contextPath;
+      nitroConfig.alias["#graphql/runtime"] = resolve(nuxt.options.buildDir, "types/graphql-runtime.d.ts");
+      nitroConfig.virtual ||= {};
+      nitroConfig.virtual["#graphql/runtime"] = "export {};";
+    });
     const endpoint = options.yoga?.endpoint ?? "/api/graphql";
-    addTemplate({
-      filename: "graphql/handler.ts",
-      write: true,
-      getContents: () => {
-        const template = readFileSync(resolver.resolve("./runtime/server/handler.ts"), "utf-8");
-        return template.replace("{{endpoint}}", endpoint);
-      }
+    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()
+    });
+    addServerHandler({ route: endpoint, handler: "graphql/yoga-handler" });
+    nuxt.hook("listen", (_server, { url }) => {
+      logger.success(`GraphQL Yoga available at ${cyan}${url.replace(/\/$/, "") + endpoint}${reset}`);
     });
-    addServerHandler({ route: endpoint, handler: "#build/graphql/handler.ts" });
-    logger.success(`GraphQL Yoga server handler added at ${cyan}${endpoint}${reset}`);
-    addPlugin(resolver.resolve("./runtime/plugin"));
+    addPlugin(resolve("./runtime/plugin"));
   }
 });
 

package/dist/runtime/server/tsconfig.json

@@ -1,3 +1,3 @@
 {
   "extends": "../../../.nuxt/tsconfig.server.json",
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lewebsimple/nuxt-graphql",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Opinionated Nuxt module for using GraphQL",
   "repository": "lewebsimple/nuxt-graphql",
   "license": "MIT",

package/dist/runtime/server/handler.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<void>>;
-export default _default;

package/dist/runtime/server/handler.js

@@ -1,10 +0,0 @@
-import { createYoga } from "graphql-yoga";
-import { defineEventHandler } from "h3";
-import { schema } from "#graphql/schema";
-const yoga = createYoga({
-  schema,
-  graphqlEndpoint: "{{endpoint}}"
-});
-export default defineEventHandler(async (event) => {
-  return yoga.handle(event.node.req, event.node.res);
-});

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

@@ -1,5 +0,0 @@
-declare module "#graphql/schema" {
-  import type { GraphQLSchema } from "graphql";
-
-  export const schema: GraphQLSchema;
-}