[next] GraphiQL Fixes (#1967)

* fix: fixed playground middleware

* fix: replaced express middleware with custom html based middleware

package-lock.json

@@ -11515,14 +11515,6 @@
         }
       }
     },
-    "graphql-playground-middleware-express": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/graphql-playground-middleware-express/-/graphql-playground-middleware-express-1.7.2.tgz",
-      "integrity": "sha512-JvKsVOR/U5QguBtEvTt0ozQ49uh1C6cW8O1xR6krQpJZIxjLYqpgusLUddTiVkka6Q/A4/AXBohY85jPudxYDg==",
-      "requires": {
-        "graphql-playground-html": "1.6.0"
-      }
-    },
     "graphql-redis-subscriptions": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/graphql-redis-subscriptions/-/graphql-redis-subscriptions-1.5.0.tgz",

package.json

@@ -53,7 +53,7 @@
     "graphql": "^0.13.2",
     "graphql-config": "^2.0.1",
     "graphql-fields": "^1.1.0",
-    "graphql-playground-middleware-express": "^1.7.2",
+    "graphql-playground-html": "^1.6.0",
     "graphql-redis-subscriptions": "^1.5.0",
     "graphql-tools": "^3.0.5",
     "html-to-text": "^4.0.0",

src/core/server/app/middleware/playground.ts

@@ -1,17 +1,25 @@
 import { RequestHandler } from "express";
-import { MiddlewareOptions } from "graphql-playground-html";
-import playground from "graphql-playground-middleware-express";
 
-export default (options: MiddlewareOptions): RequestHandler => (
-  req,
-  res,
-  next
-) => {
-  try {
-    playground(options)(req, res, () => {
-      // The playground calls next() when it's not supposed to.
-    });
-  } catch (err) {
-    return next(err);
-  }
+import {
+  MiddlewareOptions,
+  RenderPageOptions,
+  renderPlaygroundPage,
+} from "graphql-playground-html";
+
+export default (options: MiddlewareOptions): RequestHandler => {
+  const middlewareOptions: RenderPageOptions = {
+    ...options,
+    version: "1.6.0",
+  };
+
+  return (req, res, next) => {
+    try {
+      res.setHeader("Content-Type", "text/html");
+      const playground = renderPlaygroundPage(middlewareOptions);
+      res.write(playground);
+      res.end();
+    } catch (err) {
+      return next(err);
+    }
+  };
 };