feat: add support for npm 7 and Node 16, migrate to graphiql

CHANGELOG.md

@@ -6,6 +6,7 @@
 ## New Features
 ## Improvements
 ## Fixes
+- Fix npm 7 installation issue, migrate GraphQL playground to GraphIQL  (Daniel Blyth) [#1807](https://github.com/parse-community/parse-dashboard/pull/1807)
 
 # 3.0.0
 [Full Changelog](https://github.com/parse-community/parse-dashboard/compare/2.2.0...3.0.0)

package.json

@@ -38,16 +38,15 @@
     "@babel/runtime": "7.15.3",
     "bcryptjs": "2.3.0",
     "body-parser": "1.19.0",
-    "codemirror-graphql": "github:timsuchanek/codemirror-graphql#details-fix",
     "commander": "6.2.1",
     "connect-flash": "0.1.1",
     "cookie-session": "2.0.0-beta.3",
     "copy-to-clipboard": "3.2.0",
     "create-react-class": "15.7.0",
     "csurf": "1.11.0",
     "express": "4.17.1",
-    "graphql": "14.6.0",
-    "graphql-playground-react": "1.7.20",
+    "graphiql": "1.4.2",
+    "graphql": "15.4.0",
     "history": "4.10.1",
     "immutable": "4.0.0-rc.9",
     "immutable-devtools": "0.1.5",
@@ -75,7 +74,8 @@
     "react-router": "5.2.1",
     "react-router-dom": "5.2.1",
     "regenerator-runtime": "0.13.8",
-    "semver": "7.3.4"
+    "semver": "7.3.4",
+    "typescript": "4.4.3"
   },
   "devDependencies": {
     "@actions/core": "1.2.6",

src/dashboard/Data/ApiConsole/ApiConsole.scss

@@ -26,18 +26,6 @@
   height: calc(100vh - 96px);
   margin-top: 96px;
   overflow: hidden;
-
-  // Workaround to override graphql-playground-react
-  // animations and query editor height
-  & > div:not(.empty) > div {
-    opacity: 1;
-    transform: unset;
-    animation: unset;
-
-    & > div > :nth-child(2){
-      height: calc(100vh - 153px);
-    }
-  }
 }
 
 .empty {

src/dashboard/Data/ApiConsole/GraphQLConsole.react.js

@@ -8,8 +8,7 @@
 import ParseApp      from 'lib/ParseApp';
 import PropTypes     from 'lib/PropTypes';
 import React, { Component } from 'react';
-import { Provider } from 'react-redux'
-import { Playground, store } from 'graphql-playground-react';
+import GraphiQL from 'graphiql';
 import EmptyState from 'components/EmptyState/EmptyState.react';
 import Toolbar from 'components/Toolbar/Toolbar.react';
 import styles from 'dashboard/Data/ApiConsole/ApiConsole.scss';
@@ -38,9 +37,23 @@ export default class GraphQLConsole extends Component {
         headers['X-Parse-Client-Key'] = clientKey
       }
       content = (
-        <Provider store={store}>
-          <Playground endpoint={graphQLServerURL} headers={headers} />
-        </Provider>
+        <GraphiQL
+          fetcher={async graphQLParams => {
+            const data = await fetch(
+              graphQLServerURL,
+            {
+              method: 'POST',
+              headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                ...headers
+              },
+              body: JSON.stringify(graphQLParams),
+            },
+          );
+          return data.json().catch(() => data.text());
+          }}
+        />
       );
     }
 

src/dashboard/index.js

@@ -14,7 +14,7 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
 require('stylesheets/fonts.scss');
-require('graphql-playground-react/build/static/css/index.css')
+require('graphiql/graphiql.min.css')
 installDevTools(Immutable);
 
 var path = window.PARSE_DASHBOARD_PATH || '/';