From 23f1777b75940ad45f8aeb65c87746afd2949ff7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bernd=20St=C3=BCbinger?=
 <41049452+stuebingerb@users.noreply.github.com>
Date: Fri, 13 Nov 2026 16:04:19 +0100
Subject: [PATCH] chore(deps): update GraphiQL to 6

---
 .../src/main/resources/playground.html        | 119 ++++++++++++++----
 1 file changed, 92 insertions(+), 27 deletions(-)

diff --git a/kgraphql-ktor/src/main/resources/playground.html b/kgraphql-ktor/src/main/resources/playground.html
index 80378457..a8d7bbc7 100644
--- a/kgraphql-ktor/src/main/resources/playground.html
+++ b/kgraphql-ktor/src/main/resources/playground.html
@@ -12,7 +12,7 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>GraphiQL 5 with React 19 and GraphiQL Explorer</title>
+    <title>GraphiQL 6 with React 19</title>
     <style>
         body {
             margin: 0;
@@ -25,15 +25,50 @@
         .loading {
             height: 100%;
             display: flex;
+            flex-direction: column;
             align-items: center;
             justify-content: center;
-            font-size: 4rem;
+            gap: 24px;
+            color-scheme: light dark;
+            background: Canvas;
+            color: CanvasText;
+            font:
+                14px/1.5 system-ui,
+                sans-serif;
+        }
+
+        .loading-status {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .loading-status::before {
+            content: '';
+            width: 14px;
+            height: 14px;
+            border: 2px solid #e1009833;
+            border-top-color: #e10098;
+            border-radius: 50%;
+        }
+
+        @media (prefers-reduced-motion: no-preference) {
+            .loading-status::before {
+                animation: graphiql-loading-spin 0.8s linear infinite;
+            }
+        }
+
+        @keyframes graphiql-loading-spin {
+            to {
+                transform: rotate(360deg);
+            }
         }
     </style>
-    <link rel="stylesheet" href="https://esm.sh/graphiql/dist/style.css" />
     <link
-            rel="stylesheet"
-            href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css"
+        rel="stylesheet"
+        href="https://esm.sh/graphiql@6.0.1/dist/style.css"
+        integrity="sha384-kZw6gcc6QxUhS9natgW63nMJYA/u+v0MRKt8dCsiLcdw89v6rt7aeCf1IYtVpHJf"
+        crossorigin="anonymous"
     />
     <!--
      * Note:
@@ -43,38 +78,44 @@
     <script type="importmap">
         {
           "imports": {
-            "react": "https://esm.sh/react@19.1.0",
-            "react/": "https://esm.sh/react@19.1.0/",
-
-            "react-dom": "https://esm.sh/react-dom@19.1.0",
-            "react-dom/": "https://esm.sh/react-dom@19.1.0/",
-
-            "graphiql": "https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql",
-            "graphiql/": "https://esm.sh/graphiql/",
-            "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql",
-            "@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
-
-            "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
-            "graphql": "https://esm.sh/graphql@16.11.0",
+            "react": "https://esm.sh/react@19.3.1",
+            "react/": "https://esm.sh/react@19.3.1/",
+            "react-dom": "https://esm.sh/react-dom@19.3.1",
+            "react-dom/": "https://esm.sh/react-dom@19.3.1/",
+            "graphiql": "https://esm.sh/graphiql@6.0.1?standalone&external=react,react-dom,@graphiql/react,graphql",
+            "graphiql/": "https://esm.sh/graphiql@6.0.1/",
+            "graphiql/setup-workers/esm.sh": "https://esm.sh/graphiql@6.0.1/setup-workers/esm.sh?deps=@graphiql/react@1.0.2",
+            "@graphiql/react": "https://esm.sh/@graphiql/react@1.0.2?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
+            "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@1.0.1?standalone&external=graphql",
+            "graphql": "https://esm.sh/graphql@17.1.0",
             "@emotion/is-prop-valid": "data:text/javascript,"
+          },
+          "integrity": {
+            "https://esm.sh/react@19.3.1": "sha384-ut1U+oIs0ClaOE7uF1+DZAaHVvYvEJZME3mUuqn95yVqQ70a+8u2LN2LD37JgJkO",
+            "https://esm.sh/react-dom@19.3.1": "sha384-FKbbSw/nINZRM0ej/iwjfXbJeAZMJdBKqKmn/I+aIM4Io5qupmM8sZJxaJZDO0sv",
+            "https://esm.sh/graphiql@6.0.1": "sha384-l5WEWNn2rXt8weGDnQhKPCwNjGcnMcKvMgAMsTyLUgOa+SW+L33iARiFkU9ANjYm",
+            "https://esm.sh/graphiql@6.0.1/setup-workers/esm.sh?deps=@graphiql/react@1.0.2": "sha384-VVBbJdhuhI9iFxrgKgLiRdSgID2VrBVN/39iCObAUzIKnjAesl4iH2u4QkOM435C",
+            "https://esm.sh/graphiql@6.0.1?standalone&external=react,react-dom,@graphiql/react,graphql": "sha384-QtaP5o0h9IgfUFNxM4IMKTUY13lZZMCQxQT36Urb76+Nb4zhU3hojmdMaYyELzMK",
+            "https://esm.sh/@graphiql/react@1.0.2?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid": "sha384-l7ukmrEncCH4OVE82rB/fvROXefPrD96+msChs3WAc4GNgXTQHE2Bu7dofHoJyNE",
+            "https://esm.sh/@graphiql/toolkit@1.0.1?standalone&external=graphql": "sha384-LJfJElsaFLvP+2p/Cv6GTlXk88pgwUa6vLWpPyyH1KAaiN5DqnxqSg261OtgXolz",
+            "https://esm.sh/graphql@17.1.0": "sha384-hdUYl3n29QjYvHsW+Ytx5SmSpSVSoLFp2IN/zVmKJCSWHtHWJuoxez3Az1mFbBTC"
           }
         }
     </script>
     <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 { GraphiQL } from 'graphiql';
+        import { createTransport } from '@graphiql/toolkit';
         import 'graphiql/setup-workers/esm.sh';
 
-        const fetcher = createGraphiQLFetcher({url: ''});
-        const plugins = [HISTORY_PLUGIN, explorerPlugin()];
+        const transport = createTransport({
+            url: '',
+        });
 
         function App() {
             return React.createElement(GraphiQL, {
-                fetcher,
-                plugins,
+                transport,
                 defaultEditorToolsVisibility: true,
             });
         }
@@ -86,7 +127,31 @@
 </head>
 <body>
 <div id="graphiql">
-    <div class="loading">Loading…</div>
+    <div class="loading" role="status">
+        <svg
+            aria-hidden="true"
+            width="64"
+            height="64"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="#e10098"
+            viewBox="0 0 400 400"
+        >
+            <path d="m57.468 302.66-14.376-8.3 160.15-277.38 14.376 8.3z" />
+            <path d="M39.8 272.2h320.3v16.6H39.8z" />
+            <path
+                d="m206.348 374.026-160.21-92.5 8.3-14.376 160.21 92.5zm139.174-241.079-160.21-92.5 8.3-14.376 160.21 92.5z"
+            />
+            <path d="m54.482 132.883-8.3-14.375 160.21-92.5 8.3 14.376z" />
+            <path
+                d="m342.568 302.663-160.15-277.38 14.376-8.3 160.15 277.38zM52.5 107.5h16.6v185H52.5zm278.4 0h16.6v185h-16.6z"
+            />
+            <path d="m203.522 367-7.25-12.558 139.34-80.45 7.25 12.557z" />
+            <path
+                d="M369.5 297.9c-9.6 16.7-31 22.4-47.7 12.8s-22.4-31-12.8-47.7 31-22.4 47.7-12.8c16.8 9.7 22.5 31 12.8 47.7M90.9 137c-9.6 16.7-31 22.4-47.7 12.8s-22.4-31-12.8-47.7 31-22.4 47.7-12.8c16.7 9.7 22.4 31 12.8 47.7M30.5 297.9c-9.6-16.7-3.9-38 12.8-47.7 16.7-9.6 38-3.9 47.7 12.8 9.6 16.7 3.9 38-12.8 47.7-16.8 9.6-38.1 3.9-47.7-12.8M309.1 137c-9.6-16.7-3.9-38 12.8-47.7 16.7-9.6 38-3.9 47.7 12.8 9.6 16.7 3.9 38-12.8 47.7-16.7 9.6-38.1 3.9-47.7-12.8M200 395.8c-19.3 0-34.9-15.6-34.9-34.9S180.7 326 200 326s34.9 15.6 34.9 34.9c0 19.2-15.6 34.9-34.9 34.9M200 74c-19.3 0-34.9-15.6-34.9-34.9S180.7 4.2 200 4.2s34.9 15.6 34.9 34.9S219.3 74 200 74"
+            />
+        </svg>
+        <span class="loading-status">Loading GraphiQL…</span>
+    </div>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>