[ update ] graphiql playground

dandoh · Apr 22, 2020 · 2adbb47 · 2adbb47
1 parent a17d20b
commit 2adbb47
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -56,6 +56,14 @@ This boilerplate wires up:
   ```terminal
   $ stack run
   ```
+
+Now GraphQL API is at [http://localhost:8080/api](http://localhost:8080/api)
+
+You can also access Graphql Playground at [http://localhost:8080/graphiql](http://localhost:8080/graphiql)
+
+![Playground](images/playground.png)
+
+
 
 ## Running on Docker
 - Feed in you database & secret in `.env`:
@@ -82,6 +90,7 @@ This boilerplate wires up:
 - Now you can visit: http://localhost:8080/ in your local machine.
 
 
+
 ## Contributors
 
 PR are more than welcome. The only note is we use `ormolu` to format codes. 

diff --git a/graphiql.html b/graphiql.html
@@ -1,26 +1,59 @@
+<!DOCTYPE html>
 <html>
+
 <head>
-    <title>GraphiQL</title>
-    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet"/>
+    <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>
 </head>
-<body style="margin: 0;">
-<div id="graphiql" style="height: 100vh;"></div>
-<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>
-<script>
-    const graphQLFetcher = graphQLParams =>
-        fetch('/api', {
-            method: 'post',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(graphQLParams),
-        })
-            .then(response => response.json())
-            .catch(() => response.text());
-    ReactDOM.render(
-        React.createElement(GraphiQL, {fetcher: graphQLFetcher}),
-        document.getElementById('graphiql'),
-    );
-</script>
+
+<body>
+<div id="root">
+    <style>
+        body {
+            background-color: rgb(23, 42, 58);
+            font-family: Open Sans, sans-serif;
+            height: 90vh;
+        }
+
+        #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'), {
+        // options as 'endpoint' belong here
+        endpoint: "/api"
+    })
+})</script>
 </body>
+
 </html>
diff --git a/images/playground.png b/images/playground.png