From 61a4a1ea3bf0487045ad621bd46b4ad4d679ee61 Mon Sep 17 00:00:00 2001
From: JBodkin-Amphora <james.bodkin+github@amphora.net>
Date: Tue, 11 Nov 2025 10:03:47 +0000
Subject: [PATCH] Upgrade to GraphiQL 5.2.1

Signed-off-by: JBodkin-Amphora <james.bodkin+github@amphora.net>
---
 .../src/main/resources/graphiql/index.html    | 45 +++++++------------
 1 file changed, 16 insertions(+), 29 deletions(-)

diff --git a/spring-graphql/src/main/resources/graphiql/index.html b/spring-graphql/src/main/resources/graphiql/index.html
index 36bb6360b..a3a4671a8 100644
--- a/spring-graphql/src/main/resources/graphiql/index.html
+++ b/spring-graphql/src/main/resources/graphiql/index.html
@@ -19,20 +19,22 @@
             font-size: 4rem;
         }
     </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"/>
+    <link rel="stylesheet" href="https://esm.sh/graphiql@5.2.1/dist/style.css"/>
+    <link rel="stylesheet" href="https://esm.sh/@graphiql/plugin-explorer@5.1.1/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/": "https://esm.sh/react@19.1.0/",
             "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",
+            "react-dom/": "https://esm.sh/react-dom@19.1.0/",
+            "graphiql": "https://esm.sh/graphiql@5.2.1?standalone&external=react,react-dom,@graphiql/react,graphql",
+            "graphiql/": "https://esm.sh/graphiql@5.2.1/",
+            "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@5.1.1?standalone&external=react,@graphiql/react,graphql",
+            "@graphiql/react": "https://esm.sh/@graphiql/react@0.37.2?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
             "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@0.11.3?standalone&external=graphql",
-            "graphql": "https://esm.sh/graphql@16.11.0"
+            "graphql": "https://esm.sh/graphql@16.11.0",
+            "@emotion/is-prop-valid": "data:text/javascript,"
           }
         }
     </script>
@@ -42,33 +44,18 @@
         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();
-            },
-        };
+        import 'graphiql/setup-workers/esm.sh';
 
         const params = new URLSearchParams(window.location.search);
-        const path = params.get("path") || "/graphql";
+        const path = params.get('path') || '/graphql';
         const url = `${location.protocol}//${location.host}${path}`;
-        const wsPath = params.get("wsPath") || "/graphql";
+        const wsPath = params.get('wsPath') || '/graphql';
         const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
         const subscriptionUrl = `${wsProtocol}//${location.host}${wsPath}`;
         const gqlFetcher = createGraphiQLFetcher({'url': url, 'subscriptionUrl': subscriptionUrl});
         const plugins = [HISTORY_PLUGIN, explorerPlugin()];
         const xsrfToken = document.cookie.match(new RegExp('(?:^| )XSRF-TOKEN=([^;]+)'));
-        const initialHeaders = xsrfToken ? `{ "X-XSRF-TOKEN" : "${ xsrfToken[1] }" }` : `{}`;
+        const initialHeaders = xsrfToken ? `{ 'X-XSRF-TOKEN' : '${ xsrfToken[1] }' }` : undefined;
 
         function App() {
             return React.createElement(GraphiQL, {
@@ -87,6 +74,6 @@
     </script>
 </head>
 <body>
-<div id="graphiql"><div class="loading">Loading...</div></div>
+    <div id="graphiql"><div class="loading">Loading...</div></div>
 </body>
-</html>
\ No newline at end of file
+</html>