@lewebsimple/nuxt-graphql 0.1.3 → 0.1.5

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)
@@ -25,8 +25,9 @@ Define your GraphQL schema in `server/graphql/schema.ts`:
 
 ```ts
 import { createSchema } from "graphql-yoga";
+import type { GraphQLContext } from "./context";
 
-export const schema = createSchema({
+export const schema = createSchema<GraphQLContext>({
   typeDefs: /* GraphQL */ `
       type Query {
         hello: String!
@@ -51,6 +52,7 @@ export async function createContext(_event: H3Event) {
   };
 }
 
+export type GraphQLContext = Awaited<ReturnType<typeof createContext>>;
 ```
 
 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.3",
+  "version": "0.1.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,5 +1,5 @@
-import { useLogger, defineNuxtModule, createResolver, getLayerDirectories, addTypeTemplate, 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");
@@ -33,67 +33,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");
-    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 {};";
+      nitroConfig.alias["#graphql/schema"] = findServerFile(layerDirs, "graphql/schema");
+      nitroConfig.alias["#graphql/context"] = findServerFile(layerDirs, "graphql/context");
     });
     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.ts"), "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,13 @@
+import { useNuxtApp, useRequestHeaders } from "#imports";
+export function useGraphQL() {
+  const { $graphql } = useNuxtApp();
+  if (import.meta.server) {
+    const headers = useRequestHeaders(["cookie"]);
+    if (headers.cookie) {
+      $graphql.setHeader("cookie", headers.cookie);
+    }
+  }
+  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/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.ts

@@ -0,0 +1,18 @@
+import { createYoga } from "graphql-yoga";
+import { defineEventHandler, toWebRequest, sendWebResponse } from "h3";
+/** @ts-expect-error - No type declarations in module context */
+import { schema } from "#graphql/schema";
+/** @ts-expect-error - No type declarations in module context */
+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);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lewebsimple/nuxt-graphql",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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");
-});