Improved GraphiQL renderer with variables

syrusakbary · syrusakbary · commit ff08d18386e8 · 2025-06-23T00:59:13.000+02:00
diff --git a/src/graphql_server/aiohttp/views.py b/src/graphql_server/aiohttp/views.py
@@ -178,7 +178,10 @@ def __init__(
     async def render_graphql_ide(
         self, request: web.Request, request_data: GraphQLRequestData
     ) -> web.Response:
-        return web.Response(text=self.graphql_ide_html, content_type="text/html")
+        return web.Response(
+            text=request_data.to_template_string(self.graphql_ide_html),
+            content_type="text/html",
+        )
 
     async def get_sub_response(self, request: web.Request) -> web.Response:
         return web.Response()
diff --git a/src/graphql_server/asgi/__init__.py b/src/graphql_server/asgi/__init__.py
@@ -208,7 +208,7 @@ async def get_sub_response(
     async def render_graphql_ide(
         self, request: Request, request_data: GraphQLRequestData
     ) -> Response:
-        return HTMLResponse(self.graphql_ide_html)
+        return HTMLResponse(request_data.to_template_string(self.graphql_ide_html))
 
     def create_response(
         self, response_data: GraphQLHTTPResponse, sub_response: Response
diff --git a/src/graphql_server/chalice/views.py b/src/graphql_server/chalice/views.py
@@ -85,7 +85,7 @@ def render_graphql_ide(
         self, request: Request, request_data: GraphQLRequestData
     ) -> Response:
         return Response(
-            self.graphql_ide_html,
+            request_data.to_template_string(self.graphql_ide_html),
             headers={"Content-Type": "text/html"},
         )
 
diff --git a/src/graphql_server/channels/handlers/http_handler.py b/src/graphql_server/channels/handlers/http_handler.py
@@ -300,7 +300,7 @@ async def render_graphql_ide(
         self, request: ChannelsRequest, request_data: GraphQLRequestData
     ) -> ChannelsResponse:
         return ChannelsResponse(
-            content=self.graphql_ide_html.encode(),
+            content=request_data.to_template_string(self.graphql_ide_html).encode(),
             content_type="text/html; charset=utf-8",
         )
 
@@ -358,7 +358,7 @@ def render_graphql_ide(
         self, request: ChannelsRequest, request_data: GraphQLRequestData
     ) -> ChannelsResponse:
         return ChannelsResponse(
-            content=self.graphql_ide_html.encode(),
+            content=request_data.to_template_string(self.graphql_ide_html).encode(),
             content_type="text/html; charset=utf-8",
         )
 
diff --git a/src/graphql_server/django/views.py b/src/graphql_server/django/views.py
@@ -251,7 +251,7 @@ def render_graphql_ide(
                 context=request_data.to_template_context(),
             )
         except TemplateDoesNotExist:
-            content = self.graphql_ide_html
+            content = request_data.to_template_string(self.graphql_ide_html)
 
         return HttpResponse(content)
 
@@ -317,7 +317,7 @@ async def render_graphql_ide(
                 context=request_data.to_template_context(),
             )
         except TemplateDoesNotExist:
-            content = self.graphql_ide_html
+            content = request_data.to_template_string(self.graphql_ide_html)
 
         return HttpResponse(content=content)
 
diff --git a/src/graphql_server/fastapi/router.py b/src/graphql_server/fastapi/router.py
@@ -265,7 +265,7 @@ async def websocket_endpoint(  # pyright: ignore
     async def render_graphql_ide(
         self, request: Request, request_data: GraphQLRequestData
     ) -> HTMLResponse:
-        return HTMLResponse(self.graphql_ide_html)
+        return HTMLResponse(request_data.to_template_string(self.graphql_ide_html))
 
     async def get_context(
         self, request: Union[Request, WebSocket], response: Union[Response, WebSocket]
diff --git a/src/graphql_server/http/__init__.py b/src/graphql_server/http/__init__.py
@@ -1,5 +1,7 @@
 from __future__ import annotations
 
+import json
+import re
 from dataclasses import dataclass
 from graphql.language import DocumentNode
 from typing import TYPE_CHECKING, Any, Optional
@@ -26,6 +28,24 @@ def process_result(result: ExecutionResult) -> GraphQLHTTPResponse:
     return data
 
 
+def tojson(value):
+    if value not in ["true", "false", "null", "undefined"]:
+        value = json.dumps(value)
+        # value = escape_js_value(value)
+    return value
+
+
+def simple_renderer(template: str, **values: str) -> str:
+    def get_var(match_obj: re.Match[str]) -> str:
+        var_name = match_obj.group(1)
+        if var_name is not None:
+            return values.get(var_name, "")
+        return ""
+
+    pattern = r"{{\s*([^}]+)\s*}}"
+    return re.sub(pattern, get_var, template)
+
+
 @dataclass
 class GraphQLRequestData:
     # query is optional here as it can be added by an extensions
@@ -39,11 +59,14 @@ class GraphQLRequestData:
 
     def to_template_context(self) -> dict[str, Any]:
         return {
-            "query": self.query,
-            "variables": self.variables,
-            "operationName": self.operation_name,
+            "query": tojson(self.query),
+            "variables": tojson(self.variables),
+            "operation_name": tojson(self.operation_name),
         }
 
+    def to_template_string(self, template: str) -> str:
+        return simple_renderer(template, **self.to_template_context())
+
 
 __all__ = [
     "GraphQLHTTPResponse",
diff --git a/src/graphql_server/http/base.py b/src/graphql_server/http/base.py
@@ -26,13 +26,9 @@ class BaseView(Generic[Request]):
     multipart_uploads_enabled: bool = False
 
     def should_render_graphql_ide(self, request: BaseRequestProtocol) -> bool:
-        return (
-            request.method == "GET"
-            and request.query_params.get("query") is None
-            and any(
-                supported_header in request.headers.get("accept", "")
-                for supported_header in ("text/html",)
-            )
+        return request.method == "GET" and any(
+            supported_header in request.headers.get("accept", "")
+            for supported_header in ("text/html",)
         )
 
     def is_request_allowed(self, request: BaseRequestProtocol) -> bool:
diff --git a/src/graphql_server/litestar/controller.py b/src/graphql_server/litestar/controller.py
@@ -303,7 +303,10 @@ async def execute_request(
     async def render_graphql_ide(
         self, request: Request[Any, Any, Any], request_data: GraphQLRequestData
     ) -> Response[str]:
-        return Response(self.graphql_ide_html, media_type=MediaType.HTML)
+        return Response(
+            request_data.to_template_string(self.graphql_ide_html),
+            media_type=MediaType.HTML,
+        )
 
     def create_response(
         self, response_data: GraphQLHTTPResponse, sub_response: Response[bytes]
diff --git a/src/graphql_server/quart/views.py b/src/graphql_server/quart/views.py
@@ -153,7 +153,7 @@ def __init__(
     async def render_graphql_ide(
         self, request: Request, request_data: GraphQLRequestData
     ) -> Response:
-        return Response(self.graphql_ide_html)
+        return Response(request_data.to_template_string(self.graphql_ide_html))
 
     def create_response(
         self, response_data: "GraphQLHTTPResponse", sub_response: Response
diff --git a/src/graphql_server/sanic/views.py b/src/graphql_server/sanic/views.py
@@ -159,7 +159,7 @@ async def get_context(
     async def render_graphql_ide(
         self, request: Request, request_data: GraphQLRequestData
     ) -> HTTPResponse:
-        return html(self.graphql_ide_html)
+        return html(request_data.to_template_string(self.graphql_ide_html))
 
     async def get_sub_response(self, request: Request) -> TemporalResponse:
         return TemporalResponse()
diff --git a/src/graphql_server/static/graphiql.html b/src/graphql_server/static/graphiql.html
@@ -93,7 +93,7 @@
       integrity="sha384-2oonKe47vfHIZnmB6ZZ10vl7T0Y+qrHQF2cmNTaFDuPshpKqpUMGMc9jgj9MLDZ9"
     ></script>
     <script>
-      const EXAMPLE_QUERY = `# Welcome to GraphiQL 🍓
+      const EXAMPLE_QUERY = `# Welcome to GraphiQL
 #
 # GraphiQL is an in-browser tool for writing, validating, and
 # testing GraphQL queries.
@@ -121,7 +121,37 @@
 #
 `;
 
-      const fetchURL = window.location.href;
+      // Collect the URL parameters
+      var parameters = {};
+      window.location.search.substr(1).split('&').forEach(function (entry) {
+        var eq = entry.indexOf('=');
+        if (eq >= 0) {
+          parameters[decodeURIComponent(entry.slice(0, eq))] =
+            decodeURIComponent(entry.slice(eq + 1));
+        }
+      });
+      // 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('&');
+      }
+      // Derive a fetch URL from the current URL, sans the GraphQL parameters.
+      var graphqlParamNames = {
+        query: true,
+        variables: true,
+        operationName: true
+      };
+      var otherParams = {};
+      for (var k in parameters) {
+        if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
+          otherParams[k] = parameters[k];
+        }
+      }
+      var fetchURL = locationQuery(otherParams);
 
       function httpUrlToWebSockeUrl(url) {
         const parsedURL = new URL(url);
@@ -150,12 +180,43 @@
 
       const root = ReactDOM.createRoot(document.getElementById("graphiql"));
 
+      // When the query and variables string is edited, update the URL bar so
+      // that it can be easily shared.
+      function onEditQuery(newQuery) {
+        parameters.query = newQuery;
+        updateURL();
+      }
+      function onEditVariables(newVariables) {
+        parameters.variables = newVariables;
+        updateURL();
+      }
+      function onEditHeaders(newHeaders) {
+        parameters.headers = newHeaders;
+        updateURL();
+      }
+      function onEditOperationName(newOperationName) {
+        parameters.operationName = newOperationName;
+        updateURL();
+      }
+      function updateURL() {
+        history.replaceState(null, null, locationQuery(parameters));
+      }
+
       root.render(
         React.createElement(GraphiQL, {
           fetcher: fetcher,
           defaultEditorToolsVisibility: true,
           plugins: [explorerPlugin],
           inputValueDeprecation: true,
+          onEditQuery: onEditQuery,
+          onEditVariables: onEditVariables,
+          onEditHeaders: onEditHeaders,
+          onEditOperationName: onEditOperationName,
+          query: {{query}},
+          variables: {{variables}},
+          headers: {{headers}},
+          operationName: {{operation_name}},
+          defaultQuery: EXAMPLE_QUERY,
         }),
       );
     </script>
diff --git a/src/tests/http/test_graphql_ide.py b/src/tests/http/test_graphql_ide.py
@@ -1,3 +1,4 @@
+from urllib.parse import quote
 from typing import Union
 from typing_extensions import Literal
 
@@ -108,3 +109,51 @@ async def test_renders_graphiql_disabled_deprecated(
         response = await http_client.get("/graphql", headers={"Accept": "text/html"})
 
     assert response.status_code == 404
+
+
+@pytest.mark.parametrize(
+    "header_value",
+    [
+        "text/html",
+    ],
+)
+@pytest.mark.parametrize(
+    "graphql_ide_and_title",
+    [
+        ("graphiql", "GraphiQL"),
+        # ("apollo-sandbox", "Apollo Sandbox"),
+        # ("pathfinder", "GraphQL Pathfinder"),
+    ],
+)
+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, title = graphql_ide_and_title
+    http_client = http_client_class(graphql_ide=graphql_ide)
+
+    query = "query { __typename }"
+    query_encoded = quote(query)
+    response = await http_client.get(
+        f"/graphql?query={query_encoded}", headers={"Accept": header_value}
+    )
+    content_type = response.headers.get(
+        "content-type", response.headers.get("Content-Type", "")
+    )
+
+    assert response.status_code == 200
+    assert "text/html" in content_type
+    assert f"<title>{title}</title>" in response.text
+    assert "__typename" in response.text
+
+    if graphql_ide == "apollo-sandbox":
+        assert "embeddable-sandbox.cdn.apollographql" in response.text
+
+    if graphql_ide == "pathfinder":
+        assert "@pathfinder-ide/react" in response.text
+
+    if graphql_ide == "graphiql":
+        assert "unpkg.com/graphiql" in response.text

Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@ def render_graphql_ide(`
`85`	`85`	`self, request: Request, request_data: GraphQLRequestData`
`86`	`86`	`) -> Response:`
`87`	`87`	`return Response(`
`88`		`- self.graphql_ide_html,`
	`88`	`+ request_data.to_template_string(self.graphql_ide_html),`
`89`	`89`	`headers={"Content-Type": "text/html"},`
`90`	`90`	`)`
`91`	`91`
Original file line number	Diff line number	Diff line change
`@@ -251,7 +251,7 @@ def render_graphql_ide(`
`251`	`251`	`context=request_data.to_template_context(),`
`252`	`252`	`)`
`253`	`253`	`except TemplateDoesNotExist:`
`254`		`- content = self.graphql_ide_html`
	`254`	`+ content = request_data.to_template_string(self.graphql_ide_html)`
`255`	`255`
`256`	`256`	`return HttpResponse(content)`
`257`	`257`
`@@ -317,7 +317,7 @@ async def render_graphql_ide(`
`317`	`317`	`context=request_data.to_template_context(),`
`318`	`318`	`)`
`319`	`319`	`except TemplateDoesNotExist:`
`320`		`- content = self.graphql_ide_html`
	`320`	`+ content = request_data.to_template_string(self.graphql_ide_html)`
`321`	`321`
`322`	`322`	`return HttpResponse(content=content)`
`323`	`323`