diff --git a/docs/3.x.x/en/guides/graphql.md b/docs/3.x.x/en/guides/graphql.md
index a8c09e66d9..845d0b3beb 100644
--- a/docs/3.x.x/en/guides/graphql.md
+++ b/docs/3.x.x/en/guides/graphql.md
@@ -10,7 +10,7 @@ To get started with GraphQL in your app, please install the plugin first. To do
 strapi install graphql
 ```
 
-Then, start your app and open your browser at [http://localhost:1337/graphiql](http://localhost:1337/graphiql). You should see the interface (GraphiQL) that will help you to write GraphQL query to explore your data.
+Then, start your app and open your browser at [http://localhost:1337/playground](http://localhost:1337/playground). You should see the interface (GraphQL Playground) that will help you to write GraphQL query to explore your data.
 
 > Install the [ModHeader](https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj/related) extension to set the `Authorization` header in your request
 
diff --git a/packages/strapi-plugin-graphql/hooks/graphql/index.js b/packages/strapi-plugin-graphql/hooks/graphql/index.js
index 1ac1b66f6e..63128595b6 100644
--- a/packages/strapi-plugin-graphql/hooks/graphql/index.js
+++ b/packages/strapi-plugin-graphql/hooks/graphql/index.js
@@ -8,11 +8,12 @@
 const _ = require('lodash');
 const path = require('path');
 const glob = require('glob');
-const { graphqlKoa, graphiqlKoa } = require('apollo-server-koa');
+const { graphqlKoa } = require('apollo-server-koa');
+const koaPlayground = require('graphql-playground-middleware-koa').default;
 
 module.exports = strapi => {
   return {
-    beforeInitialize: async function() {
+    beforeInitialize: async function(){
       // Try to inject this hook just after the others hooks to skip the router processing.
       if (!_.get(strapi.config.hook.load, 'after')) {
         _.set(strapi.config.hook.load, 'after', []);
@@ -68,14 +69,14 @@ module.exports = strapi => {
        */
 
       // Set path with initial state.
-      _.set(strapi.plugins.graphql, 'config._schema.graphql', { definition: ``, query: ``, type : {}, resolver: {} });
+      _.set(strapi.plugins.graphql, 'config._schema.graphql', { definition: '', query: '', type : {}, resolver: {} });
 
       // Merge user API.
       Object.keys(strapi.api || {}).reduce((acc, current) => {
         const { definition, query, type, resolver } = _.get(strapi.api[current], 'config.schema.graphql', {});
 
-        acc.definition += definition || ``;
-        acc.query += query || ``;
+        acc.definition += definition || '';
+        acc.query += query || '';
 
         return _.merge(acc, {
           type,
@@ -87,8 +88,8 @@ module.exports = strapi => {
       Object.keys(strapi.plugins || {}).reduce((acc, current) => {
         const { definition, query, type, resolver } = _.get(strapi.plugins[current], 'config.schema.graphql', {});
 
-        acc.definition += definition || ``;
-        acc.query += query || ``;
+        acc.definition += definition || '';
+        acc.query += query || '';
 
         return _.merge(acc, {
           type,
@@ -101,7 +102,7 @@ module.exports = strapi => {
       const schema = strapi.plugins.graphql.services.graphql.generateSchema();
 
       if (_.isEmpty(schema)) {
-        strapi.log.warn(`GraphQL schema has not been generated because it's empty`);
+        strapi.log.warn('GraphQL schema has not been generated because it\'s empty');
 
         return cb();
       }
@@ -111,9 +112,9 @@ module.exports = strapi => {
       router.post(strapi.plugins.graphql.config.endpoint, async (ctx, next) => graphqlKoa({ schema, context: ctx })(ctx, next));
       router.get(strapi.plugins.graphql.config.endpoint, async (ctx, next) => graphqlKoa({ schema, context: ctx })(ctx, next));
 
-      // Disable GraphiQL in production environment.
+      // Disable GraphQL Playground in production environment.
       if (strapi.config.environment !== 'production') {
-        router.get('/graphiql', graphiqlKoa({ endpointURL: strapi.plugins.graphql.config.endpoint }));
+        router.get('/playground', koaPlayground({ endpoint: strapi.plugins.graphql.config.endpoint}));
       }
 
       strapi.app.use(router.middleware());
diff --git a/packages/strapi-plugin-graphql/package.json b/packages/strapi-plugin-graphql/package.json
index ecfca404b8..67426da3cf 100644
--- a/packages/strapi-plugin-graphql/package.json
+++ b/packages/strapi-plugin-graphql/package.json
@@ -25,6 +25,7 @@
     "apollo-server-koa": "^1.3.3",
     "glob": "^7.1.2",
     "graphql": "^0.13.2",
+    "graphql-playground-middleware-koa": "^1.5.1",
     "graphql-tools": "^2.23.1",
     "graphql-type-json": "^0.2.0",
     "pluralize": "^7.0.0",