From e1be459fdf5b148dfef418bad92db7a55b5db804 Mon Sep 17 00:00:00 2001
From: Patrick Kabwe <patrickckabwe@gmail.com>
Date: Tue, 10 Nov 2026 21:25:31 +0200
Subject: [PATCH 1/2] feat(server): upgrade bundled playground to GraphiQL 6

Load graphiql@6.0.1 and replace the custom fetcher with the toolkit's
createTransport, using graphql-ws for subscriptions. The explorer plugin
is dropped; GraphiQL 6 ships a query builder by default.
---
 server/server.go      | 89 +++++++------------------------------------
 server/server_test.go |  6 +--
 2 files changed, 16 insertions(+), 79 deletions(-)

diff --git a/server/server.go b/server/server.go
index 2080630..1d2432a 100644
--- a/server/server.go
+++ b/server/server.go
@@ -465,8 +465,7 @@ func playgroundHTML(httpPath string, wsPath string) string {
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>GraphiQL</title>
-		<link rel="stylesheet" href="https://esm.sh/graphiql@5.2.2/dist/style.css">
-		<link rel="stylesheet" href="https://esm.sh/@graphiql/plugin-explorer@5.1.1/dist/style.css">
+		<link rel="stylesheet" href="https://esm.sh/graphiql@6.0.1/dist/style.css">
 		<style>
 			html,
 			body,
@@ -486,11 +485,11 @@ func playgroundHTML(httpPath string, wsPath string) string {
 					"react/": "https://esm.sh/react@19.2.5/",
 					"react-dom": "https://esm.sh/react-dom@19.2.5",
 					"react-dom/client": "https://esm.sh/react-dom@19.2.5/client",
-					"graphiql": "https://esm.sh/graphiql@5.2.2?standalone&external=react,react-dom,@graphiql/react,graphql",
-					"graphiql/": "https://esm.sh/graphiql@5.2.2/",
-					"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@5.1.1?standalone&external=react,@graphiql/react,graphql",
-					"@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@0.11.3?standalone&external=graphql",
-					"@graphiql/react": "https://esm.sh/@graphiql/react@0.37.3?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
+					"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/toolkit": "https://esm.sh/@graphiql/toolkit@1.0.1?standalone&external=graphql",
+					"@graphiql/react": "https://esm.sh/@graphiql/react@1.0.2?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
 					"graphql": "https://esm.sh/graphql@16.13.2",
 					"graphql-ws": "https://esm.sh/graphql-ws@6.0.6?external=graphql",
 					"@emotion/is-prop-valid": "data:text/javascript,"
@@ -500,10 +499,9 @@ func playgroundHTML(httpPath string, wsPath string) string {
 		<script type="module">
 			import React from "react";
 			import ReactDOM from "react-dom/client";
-			import { GraphiQL, HISTORY_PLUGIN } from "graphiql";
-			import { explorerPlugin } from "@graphiql/plugin-explorer";
+			import { GraphiQL } from "graphiql";
+			import { createTransport } from "@graphiql/toolkit";
 			import { createClient as createWSClient } from "graphql-ws";
-			import { parse } from "graphql";
 			import "graphiql/setup-workers/esm.sh";
 
 			const httpEndpoint = {{HTTP_ENDPOINT}};
@@ -511,79 +509,18 @@ func playgroundHTML(httpPath string, wsPath string) string {
 			const url = new URL(httpEndpoint, window.location.href);
 			const subscriptionUrl = new URL(wsEndpoint, window.location.href);
 			subscriptionUrl.protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-			const wsClient = createWSClient({ url: subscriptionUrl.toString() });
-
-			const isSubscription = (request) => {
-				try {
-					const document = parse(request.query);
-					const operation = document.definitions.find(
-						(definition) =>
-							definition.kind === "OperationDefinition" &&
-							(!request.operationName || definition.name?.value === request.operationName)
-					);
-					return operation?.operation === "subscription";
-				} catch {
-					return false;
-				}
-			};
-
-			const httpFetch = async (request) => {
-				const response = await fetch(url.toString(), {
-					method: "POST",
-					headers: { "content-type": "application/json", accept: "application/graphql-response+json, application/json;q=0.9" },
-					body: JSON.stringify(request),
-				});
-				return response.json();
-			};
-
-			const wsSubscribe = (request) => ({
-				[Symbol.asyncIterator]() {
-					const pending = [];
-					const waiters = [];
-					let done = false;
-					let error;
-					const push = (value) => {
-						if (waiters.length) waiters.shift().resolve({ value, done: false });
-						else pending.push(value);
-					};
-					const finish = (err) => {
-						done = true;
-						error = err;
-						while (waiters.length) {
-							const waiter = waiters.shift();
-							err ? waiter.reject(err) : waiter.resolve({ value: undefined, done: true });
-						}
-					};
-					const dispose = wsClient.subscribe(request, {
-						next: (value) => push(value),
-						error: (err) => finish(err),
-						complete: () => finish(),
-					});
-					return {
-						next() {
-							if (pending.length) return Promise.resolve({ value: pending.shift(), done: false });
-							if (done) return error ? Promise.reject(error) : Promise.resolve({ value: undefined, done: true });
-							return new Promise((resolve, reject) => waiters.push({ resolve, reject }));
-						},
-						return() {
-							dispose();
-							finish();
-							return Promise.resolve({ value: undefined, done: true });
-						},
-					};
-				},
-			});
 
-			const fetcher = (request) => (isSubscription(request) ? wsSubscribe(request) : httpFetch(request));
+			const transport = createTransport({
+				url: url.toString(),
+				subscriptionClient: createWSClient({ url: subscriptionUrl.toString() }),
+			});
 
-			const plugins = [HISTORY_PLUGIN, explorerPlugin()];
 			const root = ReactDOM.createRoot(document.getElementById("root"));
 
 			root.render(
 				React.createElement(GraphiQL, {
 					defaultEditorToolsVisibility: true,
-					fetcher: fetcher,
-					plugins: plugins
+					transport: transport
 				})
 			);
 		</script>
diff --git a/server/server_test.go b/server/server_test.go
index ee774e6..8a105c6 100644
--- a/server/server_test.go
+++ b/server/server_test.go
@@ -50,11 +50,11 @@ func TestServeHTTPServesPlaygroundAtConfiguredPath(t *testing.T) {
 	body := response.Body.String()
 	expectedValues := []string{
 		"<title>GraphiQL</title>",
-		"https://esm.sh/graphiql@5.2.2",
+		"https://esm.sh/graphiql@6.0.1",
 		`const httpEndpoint = "/graphql";`,
 		`const wsEndpoint = "/graphql";`,
-		`createWSClient({ url: subscriptionUrl.toString() })`,
-		`isSubscription(request) ? wsSubscribe(request) : httpFetch(request)`,
+		`subscriptionClient: createWSClient({ url: subscriptionUrl.toString() })`,
+		`transport: transport`,
 	}
 	for _, expectedValue := range expectedValues {
 		if !strings.Contains(body, expectedValue) {

From d48485c133d48460a80e1a64ad727955b04d01dd Mon Sep 17 00:00:00 2001
From: Patrick Kabwe <patrickckabwe@gmail.com>
Date: Tue, 10 Nov 2026 21:35:19 +0200
Subject: [PATCH 2/2] fix(server): show a readable playground error when the
 WebSocket fails

graphql-ws rejects with a raw WebSocket event when the connection cannot
be established, which GraphiQL rendered as {"isTrusted": true}. Convert
it to an Error naming the endpoint; GraphQL errors pass through as-is.
---
 server/server.go      | 25 ++++++++++++++++++++++++-
 server/server_test.go |  4 +++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/server/server.go b/server/server.go
index 1d2432a..af2c813 100644
--- a/server/server.go
+++ b/server/server.go
@@ -510,9 +510,32 @@ func playgroundHTML(httpPath string, wsPath string) string {
 			const subscriptionUrl = new URL(wsEndpoint, window.location.href);
 			subscriptionUrl.protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
+			// graphql-ws rejects with a raw WebSocket Event when the connection
+			// fails, which GraphiQL would print as {"isTrusted": true}. Turn it
+			// into a readable error; GraphQL errors pass through untouched.
+			const wsClient = createWSClient({ url: subscriptionUrl.toString() });
+			const describeWSFailure = (err) => {
+				if (!(err instanceof Event)) return err;
+				const detail = err.reason || (err.code ? "close code " + err.code : "");
+				return new Error(
+					"The WebSocket connection to " + subscriptionUrl.toString() + " failed" +
+						(detail ? " (" + detail + ")" : "") +
+						". Check that the server has a WebSocket transport configured."
+				);
+			};
+			const subscriptionClient = {
+				async *iterate(request) {
+					try {
+						yield* wsClient.iterate(request);
+					} catch (err) {
+						throw describeWSFailure(err);
+					}
+				},
+			};
+
 			const transport = createTransport({
 				url: url.toString(),
-				subscriptionClient: createWSClient({ url: subscriptionUrl.toString() }),
+				subscriptionClient: subscriptionClient,
 			});
 
 			const root = ReactDOM.createRoot(document.getElementById("root"));
diff --git a/server/server_test.go b/server/server_test.go
index 8a105c6..5a7f17c 100644
--- a/server/server_test.go
+++ b/server/server_test.go
@@ -53,7 +53,9 @@ func TestServeHTTPServesPlaygroundAtConfiguredPath(t *testing.T) {
 		"https://esm.sh/graphiql@6.0.1",
 		`const httpEndpoint = "/graphql";`,
 		`const wsEndpoint = "/graphql";`,
-		`subscriptionClient: createWSClient({ url: subscriptionUrl.toString() })`,
+		`createWSClient({ url: subscriptionUrl.toString() })`,
+		`subscriptionClient: subscriptionClient`,
+		`Check that the server has a WebSocket transport configured.`,
 		`transport: transport`,
 	}
 	for _, expectedValue := range expectedValues {