How to use the graphql-playground-html.renderPlaygroundPage function in graphql-playground-html

prepareProxy,
  prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');
const paths = require('../config/paths');
const config = require('../config/webpack.config.dev');
const createDevServerConfig = require('../config/webpackDevServer.config');

const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY;

const { renderPlaygroundPage } = require('graphql-playground-html');

// Create the playground entry point if it doesn't exist
if(!fs.existsSync(paths.appHtml)) {
  fs.writeFileSync(paths.appHtml, renderPlaygroundPage({env: 'react'}));
}

// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  process.exit(1);
}

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `detect()` Promise resolves to the next free port.
choosePort(HOST, DEFAULT_PORT)
  .then(port => {
  if (port == null) {

var filesize = require('filesize');
var gzipSize = require('gzip-size').sync;
var webpack = require('webpack');
var config = require('../config/webpack.config.prod');
var paths = require('../config/paths');
var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
var recursive = require('recursive-readdir');
var stripAnsi = require('strip-ansi');

var useYarn = fs.existsSync(paths.yarnLockFile);

const { renderPlaygroundPage } = require('graphql-playground-html');

// Create the playground entry point if it doesn't exist
if(!fs.existsSync(paths.appHtml)) {
  fs.writeFileSync(paths.appHtml, renderPlaygroundPage({env: 'react'}));
}

// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  process.exit(1);
}

// Input: /User/dan/app/build/static/js/main.82be8.js
// Output: /static/js/main.ts
function removeFileNameHash(fileName) {
  return fileName
    .replace(paths.appBuild, '')
    .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
}

// Input: 1024, 2048

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const cssnano = require('cssnano')
const path = require('path')
const config = require('./webpack.config')
const HappyPack = require('happypack')
const os = require('os')
const fs = require('fs')
const UglifyJSParallelPlugin = require('webpack-uglify-parallel')
const { renderPlaygroundPage } = require('graphql-playground-html')

const appEntrypoint = 'src/renderer/index.html'

// Create the playground entry point if it doesn't exist
if (!fs.existsSync(appEntrypoint)) {
  fs.writeFileSync(appEntrypoint, renderPlaygroundPage({ env: 'react' }))
}

module.exports = {
  devtool: 'source-map',
  target: 'electron-renderer',
  entry: {
    app: ['./src/renderer'],
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].[hash].js',
    sourceMapFilename: '[file].map',
    publicPath: './',
  },
  node: {
    __dirname: false,

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin
const path = require('path')
const fs = require('fs')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const HappyPack = require('happypack')
const { renderPlaygroundPage } = require('graphql-playground-html')

const appEntrypoint = 'src/renderer/index.html'

// Create the playground entry point if it doesn't exist
if (!fs.existsSync(appEntrypoint)) {
  fs.writeFileSync(appEntrypoint, renderPlaygroundPage({ env: 'react' }))
}

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: './src/renderer',
  target: 'electron',
  output: {
    filename: '[name].[hash].js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.ts(x?)$/,
        loader: 'tslint-loader',

router.get('/', (req, res) => {
      let playground = renderPlaygroundPage({
        ...playgroundOptions,
        ...req.graphqlPlaygroundOptions
      })
      res.setHeader('Content-Type', 'text/html')
      res.end(playground)
    })
  }

return async (
    event,
    lambdaContext: lambda.Context,
    callback: lambda.Callback,
  ) => {
    const body = await renderPlaygroundPage(options)
    callback(null, {
      statusCode: 200,
      headers: {
        'Content-Type': 'text/html',
      },
      body,
    })
  }
}

return (req, res, next) => {
    res.setHeader('Content-Type', 'text/html')
    const playground = renderPlaygroundPage(options)
    res.write(playground)
    res.end()
  }
}

return async function voyager(ctx, next) {
    try {
      ctx.body = await renderPlaygroundPage(options)
      await next()
    } catch (err) {
      ctx.body = { message: err.message }
      ctx.status = err.status || 500
    }
  }
}

handler: (request, h) =>
        h.response(renderPlaygroundPage(middlewareOptions)).type('text/html'),
    })

handler: function (request, reply) {
            reply.header('Content-Type', 'text/html')
                .send(GraphqlPlaygroundHtml.renderPlaygroundPage({
                    endpoint: options.endpoint,//iql
                    subscriptionsEndpoint: options.subscriptionsEndpoint,//'/subscriptions',
                    version: '1.7.1'
                }));
        }
    }