src/middleware/graphiql/index.ts

import type { Context, Middleware, Next } from '../../'

export const graphiql = (options?: { path?: string }): Middleware => {
  const p = options?.path ?? '/playground'

  return async (ctx: Context, next: Next) => {
    const url = new URL(ctx.http.request.url)
    if (url.pathname !== p) {
      await next()
    } else {
      const endpoint = `${url.protocol}//${url.hostname}${url.port ? `:${url.port}` : ''}`
      ctx.http.status = 200
      ctx.http.headers.set('content-type', 'text/html')
      ctx.http.body = `
<html lang="en">
  <head>
    <title>GraphiQL</title>
    <style>
      body {
        height: 100%;
        margin: 0;
        width: 100%;
        overflow: hidden;
      }

      #graphiql {
        height: 100vh;
      }
    </style>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script
      src="https://unpkg.com/graphiql/graphiql.min.js"
      type="application/javascript"
    ></script>
    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
    <script
      src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
      crossorigin
    ></script>

    <link
      rel="stylesheet"
      href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
    />
  </head>

  <body>
    <div id="graphiql">Loading...</div>
    <script>
      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
      const fetcher = GraphiQL.createFetcher({
        url: '${endpoint}',
        headers: { 'X-Example-Header': 'foo' },
      });
      const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
      root.render(
        React.createElement(GraphiQL, {
          fetcher,
          defaultEditorToolsVisibility: true,
          plugins: [explorerPlugin],
        }),
      );
    </script>
  </body>
</html>
      `
    }
  }
}