Avoid ruru dependency and restore GraphiQL in the exported middleware

djhi · djhi · commit e520b6d548a4 · 2024-07-26T09:53:37.000+02:00
diff --git a/bin/json-graphql-server.cjs b/bin/json-graphql-server.cjs
@@ -4,7 +4,6 @@ var path = require('path');
 var express = require('express');
 var cors = require('cors');
 var JsonGraphqlServer = require('../dist/json-graphql-server-node.cjs').default;
-var ruru = require('ruru/server');
 var dataFilePath = process.argv.length > 2 ? process.argv[2] : './data.json';
 var data = require(path.join(process.cwd(), dataFilePath));
 var PORT = process.env.NODE_PORT || 3000;
@@ -23,24 +22,7 @@ process.argv.forEach((arg, index) => {
 });
 
 app.use(cors());
-const gqlServer = JsonGraphqlServer(data);
-const graphiql = (req, res) => {
-    res.writeHead(200, undefined, {
-        "Content-Type": "text/html; charset=utf-8",
-    });
-    return res.end(
-        ruru.ruruHTML({
-            endpoint: '/graphql',
-        })
-    );
-}
-app.use('/', (req, res) => {
-    if (req.is('application/json')) {
-        return gqlServer(req, res);
-    }
-
-    return graphiql(req, res);
-});
+app.use('/', JsonGraphqlServer(data));
 app.listen(PORT, HOST);
 var msg = `GraphQL server running with your data at http://${HOST}:${PORT}/`;
 console.log(msg); // eslint-disable-line no-console
diff --git a/package.json b/package.json
@@ -68,7 +68,6 @@
         "inflection": "^3.0.0",
         "lodash.merge": "^4.6.2",
         "reify": "^0.20.12",
-        "ruru": "^2.0.0-beta.13",
         "xhr-mock": "^2.5.1"
     },
     "bin": {
diff --git a/src/graphiqlHandler.js b/src/graphiqlHandler.js
@@ -0,0 +1,86 @@
+export const graphiqlHandler = (req, res) => {
+    res.writeHead(200, undefined, {
+        'Content-Type': 'text/html; charset=utf-8',
+    });
+    return res.end(
+        getGraphiqlHtml({
+            endpoint: '/',
+        })
+    );
+};
+
+const getGraphiqlHtml = ({ endpoint }) => `
+<!--
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ * Copy of https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html
+ * https://github.com/graphql/graphiql
+ * https://github.com/graphql/graphiql/blob/main/LICENSE
+-->
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>GraphiQL</title>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
+    </style>
+    <script
+      crossorigin
+      src="https://unpkg.com/react@18/umd/react.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+    ></script>
+    <!--
+      These two files can be found in the npm module, however you may wish to
+      copy them directly into your environment, or perhaps include them in your
+      favored resource bundler.
+     -->
+    <script
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+      type="application/javascript"
+    ></script>
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <!-- 
+      These are imports for the GraphIQL Explorer plugin.
+     -->
+    <script
+      src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
+      crossorigin
+    ></script>
+
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
+    />
+  </head>
+
+  <body>
+    <div id="graphiql">Loading...</div>
+    <script>
+      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+      const fetcher = GraphiQL.createFetcher({
+        url: '${endpoint}',
+        headers: { 'X-Example-Header': 'foo' },
+      });
+      const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
+      root.render(
+        React.createElement(GraphiQL, {
+          fetcher,
+          defaultEditorToolsVisibility: true,
+          plugins: [explorerPlugin],
+        }),
+      );
+    </script>
+  </body>
+</html>`;
diff --git a/src/jsonGraphqlExpress.js b/src/jsonGraphqlExpress.js
@@ -1,5 +1,6 @@
 import { createHandler } from 'graphql-http/lib/use/express';
 import schemaBuilder from './schemaBuilder';
+import { graphiqlHandler } from './graphiqlHandler';
 
 /**
  * An express middleware for a GraphQL endpoint serving data from the supplied json.
@@ -45,7 +46,18 @@ import schemaBuilder from './schemaBuilder';
  *
  * app.listen(PORT);
  */
-export default (data) =>
-    createHandler({
+export default (data) => {
+    const graphqlHandler = createHandler({
         schema: schemaBuilder(data),
     });
+
+    const expressMiddleware = (req, res) => {
+        if (req.is('application/json')) {
+            return graphqlHandler(req, res);
+        }
+
+        return graphiqlHandler(req, res);
+    };
+
+    return expressMiddleware;
+};
