@lewebsimple/nuxt-graphql 0.1.1

package/README.md

@@ -0,0 +1,89 @@
+# Nuxt GraphQL
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![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.
+
+- ✨ [Release Notes](/CHANGELOG.md)
+- 🏀 [Online playground](https://stackblitz.com/github/lewebsimple/nuxt-graphql?file=playground%2Fapp.vue)
+
+## Features
+- 🧘‍♂️ GraphQL Yoga server handler with user-provided schema
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add @lewebsimple/nuxt-graphql
+```
+
+Define your GraphQL schema in `server/graphql/schema.ts`:
+
+```ts
+import { createSchema } from "graphql-yoga";
+
+export const schema = createSchema({
+  typeDefs: /* GraphQL */ `
+      type Query {
+        hello: String!
+      }
+    `,
+  resolvers: {
+    Query: {
+      hello: () => "Hello world!",
+    },
+  },
+});
+```
+
+That's it! You can now use Nuxt GraphQL in your Nuxt app ✨
+
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  pnpm install
+  
+  # Generate type stubs
+  pnpm run dev:prepare
+  
+  # Develop with the playground
+  pnpm run dev
+  
+  # Build the playground
+  pnpm run dev:build
+  
+  # Run ESLint
+  pnpm run lint
+  
+  # Run Vitest
+  pnpm run test
+  pnpm run test:watch
+  
+  # Release new version
+  pnpm run release
+  ```
+
+</details>
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@lewebsimple/nuxt-graphql/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/@lewebsimple/nuxt-graphql
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/@lewebsimple/nuxt-graphql.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/@lewebsimple/nuxt-graphql
+
+[license-src]: https://img.shields.io/npm/l/@lewebsimple/nuxt-graphql.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/@lewebsimple/nuxt-graphql
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,12 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface GraphQLYogaConfig {
+    endpoint?: string;
+}
+interface ModuleOptions {
+    yoga?: GraphQLYogaConfig;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { GraphQLYogaConfig, ModuleOptions };

package/dist/module.json

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

package/dist/module.mjs

@@ -0,0 +1,55 @@
+import { useLogger, defineNuxtModule, createResolver, getLayerDirectories, addTemplate, addServerHandler, addPlugin } 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) {
+  const extensions = ["ts", "mjs"];
+  for (const dir of layerDirs) {
+    const candidates = extensions.map((ext) => join(dir.server, `${relativePath}.${ext}`));
+    const fullPath = candidates.find(existsSync);
+    if (fullPath) {
+      return fullPath;
+    }
+  }
+  throw new Error(`Could not find required server file ${cyan}${relativePath}${reset} in layers:
+${layerDirs.map(({ server }) => server).join("\n")}`);
+}
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@lewebsimple/nuxt-graphql",
+    configKey: "graphql"
+  },
+  defaults: {
+    yoga: {
+      endpoint: "/api/graphql"
+    }
+  },
+  async setup(options, nuxt) {
+    const resolver = 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 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);
+      }
+    });
+    addServerHandler({ route: endpoint, handler: "#build/graphql/handler.ts" });
+    logger.success(`GraphQL Yoga server handler added at ${cyan}${endpoint}${reset}`);
+    addPlugin(resolver.resolve("./runtime/plugin"));
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+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

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

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

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

package/dist/runtime/server/handler.js

@@ -0,0 +1,10 @@
+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/server/tsconfig.json

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

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

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

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type GraphQLYogaConfig, type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@lewebsimple/nuxt-graphql",
+  "version": "0.1.1",
+  "description": "Opinionated Nuxt module for using GraphQL",
+  "repository": "lewebsimple/nuxt-graphql",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "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 && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.2.2",
+    "graphql": "^16.12.0",
+    "graphql-yoga": "^5.17.1"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^3.1.1",
+    "@nuxt/eslint": "1.12.1",
+    "@nuxt/eslint-config": "^1.12.1",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.2.2",
+    "@nuxt/test-utils": "^3.21.0",
+    "@types/node": "latest",
+    "changelogen": "^0.6.2",
+    "eslint": "^9.39.2",
+    "nuxt": "^4.2.2",
+    "typescript": "~5.9.3",
+    "vitest": "^4.0.15",
+    "vue-tsc": "^3.1.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}