index.html

<!doctype html>
<html lang="en">

<head>
  <title>GraphiQL</title>
  <style>
    body {
      height: 100%;
      margin: 0;
      width: 100%;
      overflow: hidden;
      scrollbar-color: #50628399 #0000;
      scrollbar-width: thin;
    }

    #graphiql {
      height: calc(100vh - 32px);
    }

    #header {
      height: 32px;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
    }

    #header>div {
      flex-grow: 1;
      text-align: center;
      font-size: 20px;
      line-height: 40px;
      background-color: hsl(var(--color-base));
      font-family: "Fira Code";
      color: #95a0b5
    }

    #header>div:first-child {
      min-width: 350px;
    }

    #header>div:last-child {
      min-width: 600px;
    }

    #header>div>a {
      color: #feca1b;
    }

    .graphiql-explorer-root>div {
      overflow: unset !important;
      overflow-x: scroll;
    }

    .CodeMirror-scrollbar-filler {
      background-color: #0000 !important;
    }
  </style>
  <link rel="stylesheet" href="https://esm.sh/graphiql@5.0.0/dist/style.css"/>
  <link rel="stylesheet" href="https://esm.sh/@graphiql/plugin-explorer@5.0.0/dist/style.css"/>
  <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@19.1.0",
          "react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",
          "react-dom": "https://esm.sh/react-dom@19.1.0",
          "react-dom/client": "https://esm.sh/react-dom@19.1.0/client",
          "graphiql": "https://esm.sh/graphiql@5.0.0?standalone&external=react,react-dom,@graphiql/react,graphql",
          "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@5.0.0?standalone&external=react,@graphiql/react,graphql",
          "@graphiql/react": "https://esm.sh/@graphiql/react@0.35.0?standalone&external=react,react-dom,graphql",
          "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@0.11.3?standalone&external=graphql",
          "graphql": "https://esm.sh/graphql@16.11.0"
        }
      }
  </script>
</head>

<body>
  <div id="header" class="graphiql-container">
    <div>
      <a href="https://pokeapi.co">PokeAPI</a> GraphiQL interface
    </div>
    <div>
      A rate limit of 200 calls per hour is enforced
    </div>
  </div>
  <div id="graphiql">Loading...</div>
  <script type="module">
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
    import { createGraphiQLFetcher } from '@graphiql/toolkit';
    import { explorerPlugin } from '@graphiql/plugin-explorer';
    import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
    import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
    import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';

    globalThis.MonacoEnvironment = {
        getWorker(_workerId, label) {
            switch (label) {
                case 'json':
                    return createJSONWorker();
                case 'graphql':
                    return createGraphQLWorker();
            }
            return createEditorWorker();
        },
    };
    const fetcher = createGraphiQLFetcher({
      url: 'https://graphql.pokeapi.co/v1beta2',
      headers: { 'X-Method-Used': 'graphiql-pokeapi-console' },
    });
    const plugins = [HISTORY_PLUGIN, explorerPlugin()];

    function App() {
        return React.createElement(GraphiQL, {
            fetcher: fetcher,
            defaultEditorToolsVisibility: true,
            //initialHeaders: initialHeaders,
            plugins: plugins,
            defaultQuery: `
# Using this tool you can try out GraphQL queries against our API
#  https://graphql.pokeapi.co/v1beta2
#
# You can then use these queries in your product
#
# Below a query that fetches and sorts all gen-3 pokemon
#  and then for each generation counts how many pokemon are present

query samplePokeAPIquery {
  gen3_species: pokemonspecies(
    where: {generation: {name: {_eq: "generation-iii"}}}
    order_by: {id: asc}
  ) {
    name
    id
  }
  generations: generation {
    name
    pokemon_species: pokemonspecies_aggregate {
      aggregate {
        count
      }
    }
  }
}

# Find the documentation here
#  https://pokeapi.co/docs/graphql`
        },
      React.createElement(GraphiQL.Logo,
        {},
        React.createElement('img', {
          src: 'https://raw.githubusercontent.com/PokeAPI/media/refs/heads/master/logo/pokeapi_64_min.png',
          alt: 'pokeapi'
        }
        )
      ));
    }

    const container = document.getElementById('graphiql');
    const root = ReactDOM.createRoot(container);
    root.render(React.createElement(App));

  </script>
</body>

</html>