UNOMI-616: Update GraphQL Playground to the latest version or switch …

…to GraphiQL (#694)
apache · Nov 18, 2024 · 926598b · 926598b
1 parent 9c22f62
commit 926598b
Show file tree

Hide file tree

Showing 18 changed files with 3,308 additions and 5,637 deletions.
diff --git a/graphql/README.md b/graphql/README.md
@@ -30,7 +30,7 @@ You can then access the GraphQL endpoint at the following URL:
 
     http://localhost:8181/graphql
 
-The Graphql Playground is available at the following URL:
+The Graphql UI is available at the following URL:
 
     http://localhost:8181/graphql-ui
 

diff --git a/graphql/graphql-playground/src/main/webapp/index.css b/graphql/graphql-playground/src/main/webapp/index.css
diff --git a/graphql/graphql-playground/yarn.lock b/graphql/graphql-playground/yarn.lock
diff --git a/graphql/graphql-playground/.babelrc → graphql/graphql-ui/.babelrc b/graphql/graphql-playground/.babelrc → graphql/graphql-ui/.babelrc
diff --git a/graphql/graphql-playground/package.json → graphql/graphql-ui/package.json b/graphql/graphql-playground/package.json → graphql/graphql-ui/package.json
@@ -1,11 +1,11 @@
 {
-  "name": "unomi-graphql-playground",
+  "name": "unomi-graphql-ui",
   "version": "1.0.0",
-  "description": "The Apache Unomi GraphQL Playground integration.",
-  "main": "target/javascript/unomi-graphql-playground.js",
+  "description": "The Apache Unomi GraphQL UI integration.",
+  "main": "target/assets/js/index.js",
   "keywords": [
     "unomi",
-    "graphql-playground",
+    "graphql-ui",
     "apache"
   ],
   "author": "Apache Software Foundation",
@@ -15,11 +15,13 @@
     "build:production": "yarn webpack --mode=production"
   },
   "dependencies": {
-    "graphql": "^15.2.0",
-    "graphql-playground-react": "^1.7.27",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-redux": "^7.2.2"
+    "@graphiql/react": "0.22.3",
+    "@graphiql/toolkit": "^0.9.1",
+    "graphiql": "^3.3.1",
+    "graphql": "^16.8.2",
+    "graphql-ws": "^5.16.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "resolutions" : {
     "**/terser" : "4.8.1",
@@ -35,7 +37,13 @@
     "css-loader": "^3.6.0",
     "file-loader": "^6.0.0",
     "style-loader": "^1.2.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.3",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.28",
+    "postcss-loader": "^7.3.3",
+    "source-map-loader": "^4.0.1"
   }
 }
diff --git a/graphql/graphql-playground/pom.xml → graphql/graphql-ui/pom.xml b/graphql/graphql-playground/pom.xml → graphql/graphql-ui/pom.xml
@@ -24,9 +24,9 @@
         <version>2.6.1-SNAPSHOT</version>
     </parent>
 
-    <artifactId>unomi-graphql-playground</artifactId>
-    <name>Apache Unomi :: GraphQL API :: GraphQL Playground</name>
-    <description>An integrated GraphQL playground UI</description>
+    <artifactId>unomi-graphql-ui</artifactId>
+    <name>Apache Unomi :: GraphQL API :: GraphQL UI</name>
+    <description>An integrated GraphQL UI</description>
     <packaging>bundle</packaging>
 
     <properties>
@@ -100,7 +100,7 @@
                 <extensions>true</extensions>
                 <configuration>
                     <instructions>
-                        <_wab>src/main/webapp,target/javascript</_wab>
+                        <_wab>src/main/webapp,target/assets</_wab>
                         <Embed-Dependency>*;scope=compile|runtime</Embed-Dependency>
                         <Import-Package>
                             *

diff --git a/...aphql-playground/src/javascript/index.jsx → ...ui/src/main/resources/assets/js/index.jsx b/...aphql-playground/src/javascript/index.jsx → ...ui/src/main/resources/assets/js/index.jsx
@@ -15,16 +15,28 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import ReactDOM from 'react-dom';
-import {Provider} from 'react-redux';
-import {Playground, store} from 'graphql-playground-react';
+import {GraphiQL} from 'graphiql';
+import {createGraphiQLFetcher} from '@graphiql/toolkit';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {createClient} from 'graphql-ws';
 
-document.addEventListener('DOMContentLoaded', function() {
-    ReactDOM.render(
-        <Provider store={store}>
-            <Playground endpoint='http://localhost:8181/graphql'/>
-        </Provider>,
-        document.getElementById('root')
-    )
+function createFetcher() {
+    return createGraphiQLFetcher({
+        url: `http://localhost:8181/graphql`,
+        wsClient: createClient(
+            {
+                url: `ws://localhost:8181/graphql`,
+            }),
+    });
+}
+
+function QueryPlayground() {
+    return (
+        <GraphiQL fetcher={createFetcher()}></GraphiQL>
+    );
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    ReactDOM.render(<QueryPlayground/>, document.getElementById('root'));
 }, false);
diff --git a/graphql/graphql-ui/src/main/resources/assets/styles/index.less b/graphql/graphql-ui/src/main/resources/assets/styles/index.less
@@ -0,0 +1,25 @@
+@import "~graphiql/graphiql.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+#root {
+  height: 100%;
+}
+
+#root .docExplorerResizer {
+  position: relative;
+}
+
+.loading {
+  font-size: 32px;
+  font-weight: 200;
+  color: rgba(255, 255, 255, .6);
+  margin-left: 20px;
+}
+
+.loading .title {
+  font-weight: 400;
+}
diff --git a/...hql-playground/src/main/webapp/index.html → ...hql/graphql-ui/src/main/webapp/index.html b/...hql-playground/src/main/webapp/index.html → ...hql/graphql-ui/src/main/webapp/index.html
@@ -20,48 +20,17 @@
 <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 href="index.css" rel="stylesheet" />
-    <script src="unomi-graphql-playground.js"></script>
+    <title>GraphQL UI</title>
+    <link href="./css/index.css" rel="stylesheet" />
+    <script src="./js/index.js"></script>
 </head>
 
 <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>
     <div class="loading"> Loading
-        <span class="title">GraphQL Playground</span>
+        <span class="title">GraphQL UI</span>
     </div>
 </div>
 </body>
 
-</html>
+</html>
diff --git a/graphql/graphql-playground/webpack.config.js → graphql/graphql-ui/webpack.config.js b/graphql/graphql-playground/webpack.config.js → graphql/graphql-ui/webpack.config.js
@@ -14,18 +14,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 
 module.exports = (env, argv) => {
-    const config = {
-        mode: 'development',
-        entry: './src/javascript/index.jsx',
+    const isProd = argv.mode === 'production';
+
+    return {
+        context: path.join(__dirname, '/src/main/resources/assets'),
+        mode: isProd ? 'production' : 'development',
+        devtool: isProd ? false : 'source-map',
+        entry: {
+            'js/index': './js/index.jsx',
+            'css/index': './styles/index.less',
+        },
         output: {
-            path: path.resolve(__dirname, 'target/javascript'),
-            filename: 'unomi-graphql-playground.js',
+            path: path.join(__dirname, '/target/assets'),
         },
         resolve: {
-            extensions: ['*', '.js', '.jsx']
+            extensions: ['.js', '.jsx', '.less', '.css'],
         },
         module: {
             rules: [
@@ -41,17 +48,21 @@ module.exports = (env, argv) => {
                     ],
                 },
                 {
-                    test: /\.css$/,
+                    test: /\.less$/,
                     use: [
-                        'style-loader',
-                        'css-loader',
-                    ],
+                        {loader: MiniCssExtractPlugin.loader, options: {publicPath: '../'}},
+                        {loader: 'css-loader', options: {sourceMap: !isProd, importLoaders: 1}},
+                        {loader: 'postcss-loader', options: {sourceMap: !isProd}},
+                        {loader: 'less-loader', options: {sourceMap: !isProd}},
+                    ]
                 },
             ]
-        }
+        },
+        plugins: [
+            new MiniCssExtractPlugin({
+                filename: '[name].css',
+                chunkFilename: './css/[id].css'
+            }),
+        ],
     };
-
-    config.devtool = (argv.mode === 'production') ? 'source-map' : 'eval-source-map';
-
-    return config;
 };