fix: use jinja built-in render

instead of regex search and replace

Author: kiendang

graphql_server/render_graphiql.py

@@ -1,7 +1,5 @@
 """Based on (express-graphql)[https://github.com/graphql/express-graphql/blob/main/src/renderGraphiQL.ts] and
 (subscriptions-transport-ws)[https://github.com/apollographql/subscriptions-transport-ws]"""
-import json
-import re
 from typing import Any, Dict, Optional, Tuple
 
 from jinja2 import Environment
@@ -216,54 +214,6 @@ class GraphiQLOptions(TypedDict):
     should_persist_headers: Optional[bool]
 
 
-def escape_js_value(value: Any) -> Any:
-    quotation = False
-    if value.startswith('"') and value.endswith('"'):
-        quotation = True
-        value = value[1 : len(value) - 1]
-
-    value = value.replace("\\\\n", "\\\\\\n").replace("\\n", "\\\\n")
-    if quotation:
-        value = '"' + value.replace('\\\\"', '"').replace('"', '\\"') + '"'
-
-    return value
-
-
-def process_var(template: str, name: str, value: Any, jsonify=False) -> str:
-    pattern = r"{{\s*" + name + r"(\s*|[^}]+)*\s*}}"
-    if jsonify and value not in ["null", "undefined"]:
-        value = json.dumps(value)
-        value = escape_js_value(value)
-
-    return re.sub(pattern, value, template)
-
-
-def simple_renderer(template: str, **values: Dict[str, Any]) -> str:
-    replace = [
-        "graphiql_version",
-        "graphiql_html_title",
-        "subscription_url",
-        "header_editor_enabled",
-        "should_persist_headers",
-    ]
-    replace_jsonify = [
-        "query",
-        "result",
-        "variables",
-        "operation_name",
-        "default_query",
-        "headers",
-    ]
-
-    for r in replace:
-        template = process_var(template, r, values.get(r, ""))
-
-    for r in replace_jsonify:
-        template = process_var(template, r, values.get(r, ""), True)
-
-    return template
-
-
 def _render_graphiql(
     data: GraphiQLData,
     config: GraphiQLConfig,
@@ -296,6 +246,9 @@ def _render_graphiql(
         or "false",
     }
 
+    if template_vars["result"] in ("null", "undefined"):
+        template_vars["result"] = None
+
     return graphiql_template, template_vars
 
 
@@ -305,16 +258,17 @@ async def render_graphiql_async(
     options: Optional[GraphiQLOptions] = None,
 ) -> str:
     graphiql_template, template_vars = _render_graphiql(data, config, options)
-    jinja_env: Optional[Environment] = config.get("jinja_env")
-
-    if jinja_env:
-        template = jinja_env.from_string(graphiql_template)
-        if jinja_env.is_async:
-            source = await template.render_async(**template_vars)
-        else:
-            source = template.render(**template_vars)
-    else:
-        source = simple_renderer(graphiql_template, **template_vars)
+
+    jinja_env = config.get("jinja_env") or Environment()
+
+    template = jinja_env.from_string(graphiql_template)
+
+    source = (
+        await template.render_async(**template_vars)
+        if jinja_env.is_async
+        else template.render(**template_vars)
+    )
+
     return source
 
 
@@ -325,5 +279,6 @@ def render_graphiql_sync(
 ) -> str:
     graphiql_template, template_vars = _render_graphiql(data, config, options)
 
-    source = simple_renderer(graphiql_template, **template_vars)
+    template = Environment().from_string(graphiql_template)
+    source = template.render(**template_vars)
     return source

tests/test_query.py

@@ -15,6 +15,11 @@
     load_json_body,
     run_http_query,
 )
+from graphql_server.render_graphiql import (
+    GraphiQLConfig,
+    GraphiQLData,
+    render_graphiql_sync,
+)
 
 from .schema import invalid_schema, schema
 from .utils import as_dicts
@@ -653,3 +658,21 @@ def test_batch_allows_post_with_operation_name():
     results, params = run_http_query(schema, "post", data, batch_enabled=True)
 
     assert results == [({"test": "Hello World", "shared": "Hello Everyone"}, None)]
+
+
+def test_graphiql_render_umlaut():
+    results, params = run_http_query(
+        schema,
+        "get",
+        data=dict(query="query helloWho($who: String){ test(who: $who) }"),
+        query_data=dict(variables='{"who": "Björn"}'),
+        catch=True,
+    )
+    result, status_code = encode_execution_results(results)
+
+    assert status_code == 200
+
+    graphiql_data = GraphiQLData(result=result, query=params[0].query)
+    source = render_graphiql_sync(data=graphiql_data, config=GraphiQLConfig())
+
+    assert "Hello Bj\\\\u00f6rn" in source