diff --git a/packages/apollo-server-express/package.json b/packages/apollo-server-express/package.json index 81d1f158063..73529e4553f 100644 --- a/packages/apollo-server-express/package.json +++ b/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" diff --git a/packages/apollo-server-express/src/ApolloServer.ts b/packages/apollo-server-express/src/ApolloServer.ts index ebac3cd78f4..9d1f8bedae7 100644 --- a/packages/apollo-server-express/src/ApolloServer.ts +++ b/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);