From 5cb34eff44316a7ce5cf6bd6279f7d67df2f293e Mon Sep 17 00:00:00 2001
From: Leonard Lu <leonard@wellthy.com>
Date: Fri, 6 Feb 2026 12:26:11 -0500
Subject: [PATCH] Fix GraphiQL IDE rendering (#137)

- Fix Flask views using Jinja2's render_template_string
  which HTML-escaped JSON values, breaking the GraphiQL
  JS config. Both sync and async views now use
  to_template_string() with the framework-agnostic
  simple_renderer.
- Fix operationName not passed to the template due to
  a variable naming mismatch (operationName vs
  operation_name) in the sync Flask view.
- Restore the locationQuery JS function accidentally
  removed in 578453f, which caused a ReferenceError
  when editing queries in the GraphiQL IDE.
- Escape < and > as \u003c and \u003e in tojson() to
  prevent queries containing </script> from breaking
  the page by prematurely closing the script tag.
- Add CodeMirror 5 fold gutter CSS to fix broken fold
  markers in the GraphiQL editor.
---
 RELEASE.md                              | 20 +++++++
 src/graphql_server/flask/views.py       | 14 ++---
 src/graphql_server/http/__init__.py     |  6 ++-
 src/graphql_server/static/graphiql.html | 16 ++++++
 src/tests/http/test_graphql_ide.py      | 71 ++++++++++++++++++++++---
 uv.lock                                 |  4 +-
 6 files changed, 112 insertions(+), 19 deletions(-)
 create mode 100644 RELEASE.md

diff --git a/RELEASE.md b/RELEASE.md
new file mode 100644
index 0000000..d37aa1c
--- /dev/null
+++ b/RELEASE.md
@@ -0,0 +1,20 @@
+Release type: patch
+
+Fix GraphiQL IDE rendering issues introduced in v3.0.0:
+
+- Fix Flask views using Jinja2's `render_template_string` which
+  HTML-escaped JSON values (e.g., `&#34;` instead of `"`), breaking
+  the GraphiQL JavaScript configuration. Both sync and async Flask
+  views now use `to_template_string()` with the framework-agnostic
+  `simple_renderer`.
+- Fix `operationName` not being passed to the GraphiQL template due
+  to a variable naming mismatch (`operationName` vs `operation_name`)
+  in the sync Flask view.
+- Restore the `locationQuery` JavaScript function that was
+  accidentally removed, which caused a `ReferenceError` when editing
+  queries, variables, or headers in the GraphiQL IDE.
+- Escape `<` and `>` as `\u003c` and `\u003e` in `tojson()` to
+  prevent queries containing `</script>` from breaking the GraphiQL
+  page by prematurely closing the script tag.
+- Add CodeMirror 5 fold gutter CSS to fix missing/broken fold
+  markers in the GraphiQL editor.
diff --git a/src/graphql_server/flask/views.py b/src/graphql_server/flask/views.py
index b637b5e..2976aad 100644
--- a/src/graphql_server/flask/views.py
+++ b/src/graphql_server/flask/views.py
@@ -11,7 +11,7 @@
 )
 from typing_extensions import TypeGuard
 
-from flask import Request, Response, render_template_string, request
+from flask import Request, Response, request
 from flask.views import View
 from graphql_server.http import GraphQLRequestData
 from graphql_server.http.async_base_view import (
@@ -138,12 +138,8 @@ def dispatch_request(self) -> ResponseReturnValue:
     def render_graphql_ide(
         self, request: Request, request_data: GraphQLRequestData
     ) -> Response:
-        return render_template_string(
-            self.graphql_ide_html,
-            query=request_data.query,
-            variables=request_data.variables,
-            operationName=request_data.operation_name,
-        )  # type: ignore
+        content = request_data.to_template_string(self.graphql_ide_html)
+        return Response(content, status=200, content_type="text/html")
 
 
 class AsyncFlaskHTTPRequestAdapter(AsyncHTTPRequestAdapter):
@@ -208,9 +204,7 @@ async def dispatch_request(self) -> ResponseReturnValue:  # type: ignore
     async def render_graphql_ide(
         self, request: Request, request_data: GraphQLRequestData
     ) -> Response:
-        content = render_template_string(
-            self.graphql_ide_html, **request_data.to_template_context()
-        )
+        content = request_data.to_template_string(self.graphql_ide_html)
         return Response(content, status=200, content_type="text/html")
 
     def is_websocket_request(self, request: Request) -> TypeGuard[Request]:
diff --git a/src/graphql_server/http/__init__.py b/src/graphql_server/http/__init__.py
index 2af8274..b48d94c 100644
--- a/src/graphql_server/http/__init__.py
+++ b/src/graphql_server/http/__init__.py
@@ -37,7 +37,11 @@ def process_result(
 def tojson(value):
     if value not in ["true", "false", "null", "undefined"]:
         value = json.dumps(value)
-        # value = escape_js_value(value)
+        # Escape characters that are significant to the HTML parser when
+        # embedded inside <script> tags. Using JS Unicode escapes (\u003c)
+        # rather than HTML entities (&#60;) so JavaScript correctly decodes
+        # them at runtime while the HTML parser never sees raw < or >.
+        value = value.replace("<", "\\u003c").replace(">", "\\u003e")
     return value
 
 
diff --git a/src/graphql_server/static/graphiql.html b/src/graphql_server/static/graphiql.html
index 7b3b2fd..fc3d351 100644
--- a/src/graphql_server/static/graphiql.html
+++ b/src/graphql_server/static/graphiql.html
@@ -78,6 +78,13 @@
       href="https://unpkg.com/@graphiql/plugin-explorer@1.0.2/dist/style.css"
       integrity="sha384-5DFJlDPW2tSATRbM8kzoP1j194jexLswuNmClWoRr2Q0x7R68JIQzPHZ02Faktwi"
     />
+
+    <link
+      crossorigin
+      rel="stylesheet"
+      href="https://unpkg.com/codemirror@5.65.16/addon/fold/foldgutter.css"
+      integrity="sha384-gW0T7WIPsj+5+b/qOsKxiwxdUCfZsjfGtzACaGGLdwEHq/pZ4aS5daCrQznA4Y8H"
+    />
   </head>
 
   <body>
@@ -183,6 +190,15 @@
         parameters.operationName = newOperationName;
         updateURL();
       }
+      // Produce a Location query string from a parameter object.
+      function locationQuery(params) {
+        return '?' + Object.keys(params).filter(function (key) {
+          return Boolean(params[key]);
+        }).map(function (key) {
+          return encodeURIComponent(key) + '=' +
+            encodeURIComponent(params[key]);
+        }).join('&');
+      }
       function updateURL() {
         history.replaceState(null, null, locationQuery(parameters));
       }
diff --git a/src/tests/http/test_graphql_ide.py b/src/tests/http/test_graphql_ide.py
index 39bbd2b..2dca356 100644
--- a/src/tests/http/test_graphql_ide.py
+++ b/src/tests/http/test_graphql_ide.py
@@ -24,9 +24,11 @@
 async def test_renders_graphql_ide(
     header_value: str,
     http_client_class: type[HttpClient],
-    graphql_ide_and_title: tuple[Literal["graphiql"], Literal["GraphiQL"]]
-    | tuple[Literal["apollo-sandbox"], Literal["Apollo Sandbox"]]
-    | tuple[Literal["pathfinder"], Literal["GraphQL Pathfinder"]],
+    graphql_ide_and_title: (
+        tuple[Literal["graphiql"], Literal["GraphiQL"]]
+        | tuple[Literal["apollo-sandbox"], Literal["Apollo Sandbox"]]
+        | tuple[Literal["pathfinder"], Literal["GraphQL Pathfinder"]]
+    ),
 ):
     graphql_ide, title = graphql_ide_and_title
     http_client = http_client_class(graphql_ide=graphql_ide)
@@ -126,9 +128,11 @@ async def test_renders_graphiql_disabled_deprecated(
 async def test_renders_graphql_ide_with_variables(
     header_value: str,
     http_client_class: type[HttpClient],
-    graphql_ide_and_title: tuple[Literal["graphiql"], Literal["GraphiQL"]]
-    | tuple[Literal["apollo-sandbox"], Literal["Apollo Sandbox"]]
-    | tuple[Literal["pathfinder"], Literal["GraphQL Pathfinder"]],
+    graphql_ide_and_title: (
+        tuple[Literal["graphiql"], Literal["GraphiQL"]]
+        | tuple[Literal["apollo-sandbox"], Literal["Apollo Sandbox"]]
+        | tuple[Literal["pathfinder"], Literal["GraphQL Pathfinder"]]
+    ),
 ):
     graphql_ide, title = graphql_ide_and_title
     http_client = http_client_class(graphql_ide=graphql_ide)
@@ -155,3 +159,58 @@ async def test_renders_graphql_ide_with_variables(
 
     if graphql_ide == "graphiql":
         assert "unpkg.com/graphiql" in response.text
+
+
+async def test_renders_graphql_ide_with_operation_name(
+    http_client_class: type[HttpClient],
+):
+    http_client = http_client_class(graphql_ide="graphiql")
+
+    query = "query TestOp { __typename }"
+    query_encoded = quote(query)
+    operation_name = "TestOp"
+    operation_name_encoded = quote(operation_name)
+    response = await http_client.get(
+        f"/graphql?query={query_encoded}&operationName={operation_name_encoded}",
+        headers={"Accept": "text/html"},
+    )
+
+    assert response.status_code == 200
+    assert 'operationName: "TestOp"' in response.text
+
+
+async def test_renders_graphql_ide_without_html_escaping(
+    http_client_class: type[HttpClient],
+):
+    http_client = http_client_class(graphql_ide="graphiql")
+
+    # Use a query with a quoted string arg to ensure " characters are present
+    # in the raw value
+    query = '{ field(arg: "value") }'
+    query_encoded = quote(query)
+    response = await http_client.get(
+        f"/graphql?query={query_encoded}",
+        headers={"Accept": "text/html"},
+    )
+
+    assert response.status_code == 200
+    # Verify JSON values are not escaped  (e.g. &#34; instead of ")
+    assert "&#" not in response.text
+
+
+async def test_renders_graphql_ide_with_script_tag_in_query(
+    http_client_class: type[HttpClient],
+):
+    http_client = http_client_class(graphql_ide="graphiql")
+
+    query = "{ field } </script>"
+    query_encoded = quote(query)
+    response = await http_client.get(
+        f"/graphql?query={query_encoded}",
+        headers={"Accept": "text/html"},
+    )
+
+    assert response.status_code == 200
+    # The < and > in the query must be escaped as \u003c and \u003e so the
+    # HTML parser doesn't see a literal </script> and close the tag early.
+    assert "\\u003c/script\\u003e" in response.text
diff --git a/uv.lock b/uv.lock
index e7870f6..ebe5978 100644
--- a/uv.lock
+++ b/uv.lock
@@ -1,5 +1,5 @@
 version = 1
-revision = 2
+revision = 3
 requires-python = ">=3.9, <4.0"
 resolution-markers = [
     "python_full_version >= '3.13'",
@@ -1284,7 +1284,7 @@ wheels = [
 
 [[package]]
 name = "graphql-server"
-version = "3.0.0b8"
+version = "3.0.0"
 source = { editable = "." }
 dependencies = [
     { name = "graphql-core" },