Use Graphiql with the Explorer plugin for the query builder

2023-03-31 19:09:32 -04:00
parent bce76bbcf3
commit d4599c3331
2 changed files with 77 additions and 61 deletions
@@ -25,18 +25,10 @@ object GraphQLController {
    }

    fun playground(ctx: Context) {
-        val playgroundHtml = javaClass.getResource("/graphql-playground.html")
-
-        val body = playgroundHtml.openStream().bufferedReader().use { reader ->
-            val graphQLEndpoint = "graphql"
-            val subscriptionsEndpoint = "graphql"
-
+        val body = javaClass.getResourceAsStream("/graphql-playground.html")!!.bufferedReader().use { reader ->
            reader.readText()
-                .replace("\${graphQLEndpoint}", graphQLEndpoint)
-                .replace("\${subscriptionsEndpoint}", subscriptionsEndpoint)
        }
-
-        ctx.html(body ?: "Could not load playground")
+        ctx.html(body)
    }

    fun webSocket(ws: WsConfig) {
@@ -1,60 +1,84 @@
 <!DOCTYPE html>
-<html>
-
+<html lang="en">
 <head>
-    <meta charset=utf-8/>
-    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
-    <title>GraphQL Playground</title>
-    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" />
-    <link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png" />
-    <script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"></script>
+    <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="anonymous"
+            integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
+            src="https://unpkg.com/react@17/umd/react.development.js"
+    ></script>
+    <script
+            crossorigin="anonymous"
+            integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
+            src="https://unpkg.com/react-dom@17/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.
+     -->
+    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet"/>
+    <link href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.min.css" rel="stylesheet"/>
 </head>

 <body>
-<div id="root">
-    <style>
-        body {
-            background-color: rgb(23, 42, 58);
-            font-family: Open Sans, sans-serif;
-            height: 90vh;
+    <div id="graphiql">Loading...</div>
+    <script
+            src="https://unpkg.com/graphiql/graphiql.min.js"
+            type="application/javascript"
+    ></script>
+    <script
+            src="https://unpkg.com/@graphiql/plugin-explorer/dist/graphiql-plugin-explorer.umd.js"
+            type="application/javascript"
+    ></script>
+
+    <script>
+        const fetcher = GraphiQL.createFetcher({
+            url: window.location.href,
+        });
+
+        function GraphiQLWithExplorer() {
+            const [query, setQuery] = React.useState(
+                'query AllCategories {\n  categories {\n    manga {\n      title\n    }\n  }\n}',
+            );
+            const explorerPlugin = GraphiQLPluginExplorer.useExplorerPlugin({
+                query: query,
+                onEdit: setQuery,
+            });
+            return React.createElement(GraphiQL, {
+                fetcher: fetcher,
+                defaultEditorToolsVisibility: true,
+                plugins: [explorerPlugin],
+                query: query,
+                onEditQuery: setQuery,
+            });
        }

-        #root {
-            height: 100%;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .loading {
-            font-size: 32px;
-            font-weight: 200;
-            color: rgba(255, 255, 255, .6);
-            margin-left: 20px;
-        }
-
-        img {
-            width: 78px;
-            height: 78px;
-        }
-
-        .title {
-            font-weight: 400;
-        }
-    </style>
-    <img src='//cdn.jsdelivr.net/npm/graphql-playground-react/build/logo.png' alt=''>
-    <div class="loading"> Loading
-        <span class="title">GraphQL Playground</span>
-    </div>
-</div>
-<script>window.addEventListener('load', function (event) {
-    GraphQLPlayground.init(document.getElementById('root'), {
-        settings: {'request.credentials': 'same-origin'},
-        endpoint: '/${graphQLEndpoint}',
-        subscriptionEndpoint: '/${subscriptionsEndpoint}'
-    })
-})</script>
+        ReactDOM.render(
+            React.createElement(GraphiQLWithExplorer),
+            document.getElementById('graphiql'),
+        );
+    </script>
 </body>
-
 </html>