Merge pull request #343 from cofacts/fix/gql-doc

GraphQL Playground is currently not maintained; use GraphiQL instead
cofacts · Aug 26, 2024 · 1a74e5d · 1a74e5d
2 parents 8a1bffb + 38dab94
commit 1a74e5d
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 1 deletion.
diff --git a/Dockerfile b/Dockerfile
@@ -29,3 +29,4 @@ COPY --from=builder /srv/www/build ./build
 COPY src/jade ./build/jade
 COPY src/util/protobuf ./build/util/protobuf
 COPY package.json package-lock.json ecosystem.config.js ./
+COPY static ./static
diff --git a/src/index.js b/src/index.js
@@ -6,6 +6,7 @@ import pug from 'pug';
 import { printSchema } from 'graphql/utilities';
 import { ApolloServer } from 'apollo-server-koa';
 import koaStatic from 'koa-static';
+import koaSend from 'koa-send';
 import koaBody from 'koa-bodyparser';
 import session from 'koa-session2';
 import passport from 'koa-passport';
@@ -75,6 +76,10 @@ router.post('/logout', checkHeaders(), (ctx) => {
 router.options('/graphql', checkHeaders());
 router.post('/graphql', checkHeaders());
 
+router.get('/graphql', (ctx) => {
+  return koaSend(ctx, '/static/graphiql.html');
+});
+
 const schemaStr = printSchema(schema);
 const indexFn = pug.compileFile(path.join(__dirname, 'jade/index.jade'));
 router.get('/', (ctx) => {
@@ -100,7 +105,7 @@ const LOGGER_HEADER_KEY_REGEX = /ip|forwarded|address/i;
 export const apolloServer = new ApolloServer({
   schema,
   introspection: true, // Allow introspection in production as well
-  playground: true,
+  playground: false,
   context: async ({ ctx }) => {
     const {
       appId,

diff --git a/static/graphiql.html b/static/graphiql.html
@@ -0,0 +1,68 @@
+<!--
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+-->
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>GraphiQL</title>
+    <style>
+        body {
+            height: 100%;
+            margin: 0;
+            width: 100%;
+            overflow: hidden;
+        }
+
+        #graphiql {
+            height: 100vh;
+        }
+    </style>
+    <!--
+      This GraphiQL example depends on Promise and fetch, which are available in
+      modern browsers, but can be "polyfilled" for older browsers.
+      GraphiQL itself depends on React DOM.
+      If you do not want to rely on a CDN, you can host these files locally or
+      include them directly in your favored resource bundler.
+    -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.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: './graphql',
+            headers: { 'X-Example-Header': 'foo' },
+        });
+        const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
+        root.render(
+            React.createElement(GraphiQL, {
+                fetcher,
+                defaultEditorToolsVisibility: true,
+                plugins: [explorerPlugin],
+            }),
+        );
+    </script>
+</body>
+
+</html>