Getting graphql-playground-react to work when offline

packages/apollo-server-express/package.json

@@ -35,6 +35,7 @@
     "apollo-server-core": "file:../apollo-server-core",
     "body-parser": "^1.18.3",
     "cors": "^2.8.4",
+    "graphql-playground-react": "^1.7.20",
     "graphql-subscriptions": "^1.0.0",
     "graphql-tools": "^4.0.0",
     "type-is": "^1.6.16"

packages/apollo-server-express/src/ApolloServer.ts

@@ -177,6 +177,14 @@ export class ApolloServer extends ApolloServerBase {
       app.use(path, uploadsMiddleware);
     }
 
+    // mount graphql-playground-react on localhost so that it can be used offline
+    app.use(
+      '/graphql-playground-react',
+      express.static(
+        require.resolve('graphql-playground-react/package.json').slice(0, -12),
+      ),
+    );
+
     // Note: if you enable playground in production and expect to be able to see your
     // schema, you'll need to manually specify `introspection: true` in the
     // ApolloServer constructor; by default, the introspection query is only
@@ -198,6 +206,8 @@ export class ApolloServer extends ApolloServerBase {
             endpoint: path,
             subscriptionEndpoint: this.subscriptionsPath,
             ...this.playgroundOptions,
+            cdnUrl: '/graphql-playground-react',
+            version: '',
           };
           res.setHeader('Content-Type', 'text/html');
           const playground = renderPlaygroundPage(playgroundRenderPageOptions);