nuxt-graphql-middleware 1.2.1 → 2.0.3

package/dist/module.mjs

@@ -0,0 +1,324 @@
+import path from 'path';
+import fs from 'fs';
+import mkdirp from 'mkdirp';
+import chokidar from 'chokidar';
+import consola from 'consola';
+import express from 'express';
+import { GraphQLClient } from 'graphql-request';
+import { generate } from '@graphql-codegen/cli';
+import * as PluginTypescript from '@graphql-codegen/typescript';
+import * as PluginTypescriptOperations from '@graphql-codegen/typescript-operations';
+import * as PluginSchemaAst from '@graphql-codegen/schema-ast';
+
+// -- Unbuild CommonJS Shims --
+import __cjs_url__ from 'url';
+import __cjs_path__ from 'path';
+import __cjs_mod__ from 'module';
+const __filename = __cjs_url__.fileURLToPath(import.meta.url);
+const __dirname = __cjs_path__.dirname(__filename);
+const require = __cjs_mod__.createRequire(import.meta.url);
+
+
+function getVariables(vars) {
+  try {
+    return JSON.parse(vars);
+  } catch (error) {
+    return {};
+  }
+}
+function buildHeaders(req, name, type, config) {
+  if (config?.buildHeaders) {
+    return config.buildHeaders(req, name, type);
+  }
+  if (config?.fetchOptions?.headers) {
+    return config.fetchOptions.headers;
+  }
+  return {};
+}
+function createServerMiddleware(graphqlServer, queries, mutations, config) {
+  const app = express();
+  app.use(express.json());
+  const clients = new Map();
+  function getClient(endpoint) {
+    if (!clients.has(endpoint)) {
+      const client = new GraphQLClient(endpoint);
+      clients.set(endpoint, client);
+    }
+    return clients.get(endpoint);
+  }
+  function getEndpoint(req) {
+    if (config?.buildEndpoint) {
+      return config.buildEndpoint(req);
+    }
+    return graphqlServer;
+  }
+  if (config?.middleware) {
+    app.use(config.middleware);
+  }
+  async function query(req, res) {
+    const name = req.query.name;
+    if (!name || !queries.has(name)) {
+      res.status(404).send();
+      return;
+    }
+    try {
+      const headers = buildHeaders(req, name, "query", config);
+      const variables = getVariables(req.query.variables);
+      const query2 = queries.get(name);
+      const endpoint = getEndpoint(req);
+      const client = getClient(endpoint);
+      const response = await client.rawRequest(query2, variables, headers);
+      if (config?.onQueryResponse) {
+        return config.onQueryResponse(response, req, res);
+      }
+      return res.json(response.data);
+    } catch (e) {
+      if (config?.onQueryError) {
+        return config.onQueryError(e, req, res);
+      }
+      return res.status(500).send();
+    }
+  }
+  async function mutate(req, res) {
+    const name = req.query.name;
+    if (!name || !mutations.has(name)) {
+      res.status(404).send();
+      return;
+    }
+    const mutation = mutations.get(name);
+    try {
+      const headers = buildHeaders(req, name, "mutation", config);
+      const endpoint = getEndpoint(req);
+      const client = getClient(endpoint);
+      const response = await client.request(mutation, req.body, headers);
+      if (config?.onMutationResponse) {
+        return config.onMutationResponse(response, req, res);
+      }
+      return res.json(response);
+    } catch (error) {
+      if (config?.onMutationError) {
+        return config.onMutationError(error, req, res);
+      }
+      return res.status(500).send();
+    }
+  }
+  app.get("/query", query);
+  app.post("/mutate", mutate);
+  return app;
+}
+
+const fragmentImport = require("@graphql-fragment-import/lib/inline-imports");
+function graphqlImport(path, resolver) {
+  return fragmentImport(path, {
+    resolveImport(identifier) {
+      return resolver(identifier);
+    },
+    resolveOptions: {
+      basedir: "./"
+    }
+  });
+}
+
+const typescriptConfig = {
+  exportFragmentSpreadSubTypes: true,
+  preResolveTypes: true,
+  skipTypeNameForRoot: true
+};
+function pluginLoader(name) {
+  if (name === "@graphql-codegen/typescript") {
+    return Promise.resolve(PluginTypescript);
+  } else if (name === "@graphql-codegen/typescript-operations") {
+    return Promise.resolve(PluginTypescriptOperations);
+  } else {
+    return Promise.resolve(PluginSchemaAst);
+  }
+}
+function codegen(graphqlServer, options) {
+  const schemaPath = path.resolve(options.schemaOutputPath, "schema.graphql");
+  function generateSchema() {
+    const schema = options.skipSchemaDownload ? schemaPath : { [graphqlServer]: options.schemaOptions };
+    const configSchemaAst = { ...typescriptConfig, sort: true };
+    return generate({
+      schema,
+      pluginLoader,
+      generates: {
+        [schemaPath]: {
+          plugins: [{ "schema-ast": configSchemaAst }],
+          config: configSchemaAst
+        },
+        [path.resolve(options.typesOutputPath, "graphql-schema.d.ts")]: {
+          plugins: [{ typescript: typescriptConfig }],
+          config: typescriptConfig
+        }
+      }
+    }, true);
+  }
+  function generateTypes() {
+    const config = {
+      ...typescriptConfig,
+      onlyOperationTypes: true
+    };
+    return generate({
+      schema: schemaPath,
+      pluginLoader,
+      documents: path.resolve(options.resolvedQueriesPath, "./*.graphql"),
+      generates: {
+        [path.resolve(options.typesOutputPath, "graphql-operations.d.ts")]: {
+          plugins: ["typescript", { "typescript-operations": config }],
+          config
+        }
+      }
+    }, true);
+  }
+  return { generateSchema, generateTypes };
+}
+
+const logger = consola.withTag("nuxt-graphql-middleware");
+const PLUGIN_PATH = path.resolve(__dirname, "../dist/plugin.mjs");
+var FileType;
+(function(FileType2) {
+  FileType2["Query"] = "query";
+  FileType2["Mutation"] = "mutation";
+})(FileType || (FileType = {}));
+function resolveGraphqlFile(file, resolver) {
+  return fs.promises.readFile(file).then((buffer) => buffer.toString()).then((source) => graphqlImport(source, resolver));
+}
+function writeSource(dest, type, name, source) {
+  const fileName = `${type}.${name}.graphql`;
+  const out = path.resolve(dest, fileName);
+  return fs.promises.writeFile(out, source);
+}
+function resolveGraphql(files, map, resolver, filesMap, type, outputPath) {
+  return Promise.all(Object.keys(files).map((name) => {
+    const filePath = files[name];
+    const file = resolver(filePath);
+    return resolveGraphqlFile(file, resolver).then((source) => {
+      map.set(name, source);
+      if (outputPath) {
+        writeSource(outputPath, type, name, source);
+      }
+      filesMap.set(file, {
+        type,
+        name,
+        file: filePath
+      });
+    });
+  }));
+}
+const graphqlMiddleware = async function() {
+  const resolver = this.nuxt.resolver.resolveAlias;
+  const options = this.options;
+  const PORT = this.options?.server?.port || 3e3;
+  const provided = this.options.graphqlMiddleware || {};
+  const config = {
+    graphqlServer: provided.graphqlServer || "",
+    typescript: {
+      enabled: !!provided.typescript?.enabled,
+      schemaOptions: provided.typescript?.schemaOptions,
+      resolvedQueriesPath: provided.typescript?.resolvedQueriesPath || provided.outputPath || "",
+      schemaOutputPath: provided.typescript?.schemaOutputPath || "~/schema",
+      typesOutputPath: provided.typescript?.typesOutputPath || "~/types",
+      skipSchemaDownload: !!provided.typescript?.skipSchemaDownload
+    },
+    endpointNamespace: provided.endpointNamespace || "/__graphql_middleware",
+    debug: provided.debug || options.dev,
+    queries: provided.queries || {},
+    mutations: provided.mutations || {},
+    outputPath: provided.outputPath || "",
+    server: provided.server,
+    plugin: {
+      enabled: !!provided.plugin?.enabled,
+      port: 4e3,
+      cacheInBrowser: !!provided.plugin?.cacheInBrowser,
+      cacheInServer: !!provided.plugin?.cacheInServer
+    }
+  };
+  if (config.plugin?.enabled) {
+    this.addPlugin({
+      filename: "graphqlMiddleware.js",
+      src: PLUGIN_PATH,
+      options: {
+        namespace: config.endpointNamespace,
+        port: PORT,
+        cacheInBrowser: config.plugin?.cacheInBrowser ? "true" : "false",
+        cacheInServer: config.plugin?.cacheInServer ? "true" : "false"
+      }
+    });
+  }
+  const fileMap = new Map();
+  const queries = new Map();
+  const mutations = new Map();
+  const outputPath = config.outputPath ? resolver(config.outputPath) : "";
+  await mkdirp(outputPath);
+  const schemaOutputPath = resolver(config.typescript?.schemaOutputPath);
+  const typesOutputPath = resolver(config.typescript?.typesOutputPath);
+  const { generateSchema, generateTypes } = codegen(config.graphqlServer, {
+    resolvedQueriesPath: config.outputPath,
+    schemaOptions: config.typescript?.schemaOptions,
+    skipSchemaDownload: config.typescript?.skipSchemaDownload,
+    schemaOutputPath,
+    typesOutputPath
+  });
+  if (config.typescript?.enabled) {
+    if (!outputPath) {
+      throw new Error("TypeScript enabled, but no outputPath given.");
+    }
+    await mkdirp(schemaOutputPath);
+    await generateSchema();
+  }
+  function build() {
+    logger.log("Building GraphQL files...");
+    return Promise.all([
+      resolveGraphql(config.queries, queries, resolver, fileMap, FileType.Query, outputPath),
+      resolveGraphql(config.mutations, mutations, resolver, fileMap, FileType.Mutation, outputPath)
+    ]).then(() => {
+      logger.success("Finished building GraphQL files");
+      if (config.typescript?.enabled) {
+        return generateTypes().then(() => {
+          logger.success("Finished generating GraphQL TypeScript files.");
+        });
+      }
+    });
+  }
+  function watchFiles() {
+    const ignored = ["node_modules", ".nuxt"];
+    if (config.outputPath) {
+      ignored.push(config.outputPath);
+    }
+    const filesWatcher = chokidar.watch("./**/*.graphql", {
+      ignoreInitial: true,
+      ignored
+    });
+    if (filesWatcher) {
+      logger.info("Watching for query changes");
+      filesWatcher.on("change", () => {
+        build();
+      });
+    }
+    return filesWatcher;
+  }
+  let watcher;
+  if (this.nuxt.options.dev) {
+    this.nuxt.hook("build:done", () => {
+      watcher = watchFiles();
+    });
+    this.nuxt.hook("close", () => {
+      if (watcher) {
+        watcher.close();
+        watcher = void 0;
+      }
+    });
+  }
+  build().then(() => {
+    if (options.debug) {
+      logger.info("Available queries and mutations:");
+      console.table(Array.from(fileMap.entries()).map(([_key, value]) => value));
+    }
+  });
+  this.addServerMiddleware({
+    path: config.endpointNamespace,
+    handler: createServerMiddleware(config.graphqlServer, queries, mutations, config.server)
+  });
+};
+
+export { graphqlMiddleware as default };

package/dist/plugin.mjs

@@ -0,0 +1,97 @@
+const IS_DEV = process.env.NODE_ENV === "development";
+function log(action, path, message) {
+  if (IS_DEV) {
+    console.log(`[API - ${action}] ${message}: ${path}`);
+  }
+}
+class GraphqlMiddlewarePlugin {
+  constructor(baseURL, headers, useCache, context) {
+    this.baseURL = baseURL;
+    this.headers = headers || {};
+    this.context = context;
+    if (useCache) {
+      this.cache = new Map();
+    }
+  }
+  getPluginHeaderValue() {
+    return {
+      "Nuxt-Graphql-Middleware-Route": this.context?.route?.fullPath || ""
+    };
+  }
+  beforeRequest(fn) {
+    this.beforeRequestFn = fn;
+  }
+  query(name, variables, headers = {}) {
+    const params = new URLSearchParams({
+      name,
+      variables: JSON.stringify(variables || {})
+    });
+    const url = this.baseURL + "/query?" + params.toString();
+    if (this.cache?.has(url)) {
+      log("query", url, "Loading from cache");
+      return Promise.resolve(this.cache.get(url));
+    }
+    log("query", url, "Fetching");
+    let fetchOptions = {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        ...headers,
+        ...this.headers,
+        ...this.getPluginHeaderValue()
+      }
+    };
+    if (this.beforeRequestFn) {
+      fetchOptions = this.beforeRequestFn(this.context, fetchOptions);
+    }
+    return fetch(url, fetchOptions).then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      throw new Error("Server Error");
+    }).then((data) => {
+      if (this.cache && this.cache.size > 30) {
+        const key = this.cache.keys().next().value;
+        this.cache.delete(key);
+      }
+      this.cache?.set(url, data);
+      return data;
+    });
+  }
+  mutate(name, variables, headers = {}) {
+    const params = new URLSearchParams({
+      name
+    });
+    let fetchOptions = {
+      method: "POST",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        ...headers,
+        ...this.headers,
+        ...this.getPluginHeaderValue()
+      },
+      body: JSON.stringify(variables)
+    };
+    if (this.beforeRequestFn) {
+      fetchOptions = this.beforeRequestFn(this.context, fetchOptions);
+    }
+    return fetch(this.baseURL + "/mutate?" + params.toString(), fetchOptions).then((response) => response.json());
+  }
+}
+const graphqlMiddlewarePlugin = (context, inject) => {
+  const namespace = "<%= options.namespace || '' %>";
+  const port = process?.env?.NUXT_PORT || "<%= options.port %>";
+  const cacheInBrowser = false;
+  const cacheInServer = false;
+  let baseURL = namespace;
+  if (process.server) {
+    baseURL = "http://localhost:" + port + namespace;
+  }
+  const useCache = process.server && cacheInServer || process.client && cacheInBrowser;
+  const plugin = new GraphqlMiddlewarePlugin(baseURL, context.req?.headers, useCache, context);
+  inject("graphql", plugin);
+};
+
+export { GraphqlMiddlewarePlugin, graphqlMiddlewarePlugin as default };

package/module.cjs

@@ -0,0 +1,6 @@
+// CommonJS proxy to bypass jiti transforms from nuxt 2 and using native ESM
+module.exports = function(...args) {
+  return import('./dist/module.mjs').then(m => m.default.call(this, ...args))
+}
+
+module.exports.meta = require('./package.json')

package/package.json

@@ -1,51 +1,64 @@
 {
   "name": "nuxt-graphql-middleware",
-  "version": "1.2.1",
+  "version": "2.0.3",
   "description": "Module to perform GraphQL requests as a server middleware.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dulnan/nuxt-graphql-middleware.git"
+  },
   "license": "MIT",
   "author": {
     "name": "Jan Hug",
-    "url": "https://dulnan.net",
-    "email": "me@dulnan.net"
+    "email": "me@dulnan.net",
+    "url": "https://dulnan.net"
   },
-  "scripts": {
-    "build": "tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json"
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs",
+      "require": "./module.cjs"
+    },
+    "./dist/*": "./dist/*"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/dulnan/nuxt-graphql-middleware.git"
-  },
-  "main": "./lib/cjs/index.js",
-  "module": "./lib/esm/index.js",
-  "types": "./types.d.ts",
+  "main": "./module.cjs",
+  "types": "./types/index.d.ts",
   "files": [
-    "lib/",
-    "types.d.ts"
+    "types/*",
+    "module.cjs",
+    "dist/*.js",
+    "dist/*.mjs",
+    "dist/*.d.ts"
   ],
+  "scripts": {
+    "build": "unbuild && npm run generate-types",
+    "dev": "unbuild --stub=true",
+    "generate-types": "tsc -p tsconfig.json --emitDeclarationOnly",
+    "plain-ts": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json"
+  },
   "dependencies": {
-    "@graphql-codegen/cli": "^1.20.1",
-    "@graphql-codegen/schema-ast": "^1.18.1",
-    "@graphql-codegen/typescript": "^1.21.0",
-    "@graphql-codegen/typescript-operations": "^1.17.14",
-    "@graphql-fragment-import/lib": "^1.1.1",
+    "@graphql-codegen/cli": "^2.3.0",
+    "@graphql-codegen/schema-ast": "^2.4.0",
+    "@graphql-codegen/typescript": "^2.4.1",
+    "@graphql-codegen/typescript-operations": "^2.2.1",
+    "@graphql-fragment-import/lib": "^1.2.0",
     "express": "^4.17.1",
-    "graphql": "^15.5.0",
-    "graphql-request": "^3.4.0"
+    "graphql": "^15.6.0",
+    "graphql-request": "^3.6.1"
   },
   "devDependencies": {
-    "@nuxt/types": "^2.14.12",
+    "@nuxt/types": "^2.15.8",
     "@nuxtjs/eslint-config-typescript": "latest",
-    "@types/mkdirp": "^1.0.1",
-    "@types/node": "^14.14.22",
-    "consola": "^2.15.0",
+    "@types/mkdirp": "^1.0.2",
+    "@types/node": "^16.11.9",
+    "consola": "^2.15.3",
     "eslint": "latest",
     "eslint-config-prettier": "latest",
     "eslint-plugin-prettier": "latest",
-    "globby": "^11.0.2",
     "mkdirp": "^1.0.4",
-    "nuxt": "^2.14.12",
-    "prettier": "^2.2.1",
-    "typescript": "^4.1.3",
-    "vue": "^2.6.12"
+    "mkdist": "latest",
+    "nuxt": "^2.15.8",
+    "prettier": "^2.4.1",
+    "typescript": "^4.5.2",
+    "unbuild": "^0.5.13",
+    "vue": "^2.6.14"
   }
 }

package/{types.d.ts → types/index.d.ts}

@@ -1,11 +1,5 @@
-import Vue from 'vue'
-import '@nuxt/types'
-import { GraphqlMiddlewarePlugin } from './lib/types/plugin'
-import { GraphqlMiddlewareConfig } from './lib/types/module'
-
-declare module '*.vue' {
-  export default Vue
-}
+import { GraphqlMiddlewarePlugin } from '../dist/types/templates/plugin'
+import { GraphqlMiddlewareConfig } from '../dist/types/module'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -14,7 +8,6 @@ declare module 'vue/types/vue' {
 }
 
 declare module 'vuex/types/index' {
-  // @ts-ignore
   interface Store<S> {
     readonly $graphql: GraphqlMiddlewarePlugin
   }

package/lib/cjs/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var module_1 = require("./module");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return module_1.graphqlMiddleware; } });

package/lib/cjs/module/codegen.js

@@ -1,84 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const path_1 = __importDefault(require("path"));
-const cli_1 = require("@graphql-codegen/cli");
-const PluginTypescript = __importStar(require("@graphql-codegen/typescript"));
-const PluginTypescriptOperations = __importStar(require("@graphql-codegen/typescript-operations"));
-const PluginSchemaAst = __importStar(require("@graphql-codegen/schema-ast"));
-const typescriptConfig = {
-    exportFragmentSpreadSubTypes: true,
-    preResolveTypes: true,
-    skipTypeNameForRoot: true,
-};
-function pluginLoader(name) {
-    if (name === '@graphql-codegen/typescript') {
-        return Promise.resolve(PluginTypescript);
-    }
-    else if (name === '@graphql-codegen/typescript-operations') {
-        return Promise.resolve(PluginTypescriptOperations);
-    }
-    else {
-        return Promise.resolve(PluginSchemaAst);
-    }
-}
-function default_1(graphqlServer, options) {
-    const schemaPath = path_1.default.resolve(options.schemaOutputPath, 'schema.graphql');
-    function generateSchema() {
-        const schema = options.skipSchemaDownload
-            ? schemaPath
-            : { [graphqlServer]: options.schemaOptions };
-        const configSchemaAst = Object.assign(Object.assign({}, typescriptConfig), { sort: true });
-        return cli_1.generate({
-            schema,
-            pluginLoader,
-            generates: {
-                [schemaPath]: {
-                    plugins: [{ 'schema-ast': configSchemaAst }],
-                    config: configSchemaAst,
-                },
-                [path_1.default.resolve(options.typesOutputPath, 'graphql-schema.d.ts')]: {
-                    plugins: [{ typescript: typescriptConfig }],
-                    config: typescriptConfig,
-                },
-            },
-        }, true);
-    }
-    function generateTypes() {
-        const config = Object.assign(Object.assign({}, typescriptConfig), { onlyOperationTypes: true });
-        return cli_1.generate({
-            schema: schemaPath,
-            pluginLoader,
-            documents: path_1.default.resolve(options.resolvedQueriesPath, './*.graphql'),
-            generates: {
-                [path_1.default.resolve(options.typesOutputPath, 'graphql-operations.d.ts')]: {
-                    plugins: ['typescript', { 'typescript-operations': config }],
-                    config,
-                },
-            },
-        }, true);
-    }
-    return { generateSchema, generateTypes };
-}
-exports.default = default_1;

package/lib/cjs/module/graphqlImport.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const fragmentImport = require('@graphql-fragment-import/lib/inline-imports');
-function default_1(path, resolver) {
-    return fragmentImport(path, {
-        resolveImport(identifier) {
-            return resolver(identifier);
-        },
-        resolveOptions: {
-            basedir: './',
-        },
-    });
-}
-exports.default = default_1;