Skip to content

Commit 3d059dc

Browse files
KarolJagodzinskiKarolJagodzinski
committed
feat: upgrade graphiql to 5.2.2
1 parent 2d1248c commit 3d059dc

6 files changed

Lines changed: 393 additions & 343 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,10 @@ For released versions, see the [Releases](https://github.com/mirumee/ariadne/rel
66

77
## Unreleased
88

9+
### ✨ New Features
10+
- Upgrade graphiql to 5.2.2
11+
12+
### 📚 Documentation
13+
- Fix path to match docosaurus
14+
915

‎ariadne/explorer/templates/graphiql.html‎

Lines changed: 68 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,114 @@
11
<!--
2-
* Copyright (c) 2021 GraphQL Contributors
2+
* Copyright (c) 2025 GraphQL Contributors
33
* All rights reserved.
44
*
55
* This source code is licensed under the license found in the
66
* LICENSE file in the root directory of this source tree.
77
-->
8-
<!DOCTYPE html>
9-
<html>
8+
<!doctype html>
9+
<html lang="en">
1010
<head>
11-
<meta charset="utf-8" />
12-
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
11+
<meta charset="UTF-8" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1313
<title>{{ title }}</title>
1414
<style>
1515
body {
16-
height: 100%;
1716
margin: 0;
18-
width: 100%;
19-
overflow: hidden;
2017
}
2118

2219
#graphiql {
23-
height: 100vh;
20+
height: 100dvh;
2421
}
2522

26-
#graphiql-loading {
23+
.loading {
2724
height: 100%;
2825
display: flex;
2926
align-items: center;
3027
justify-content: center;
31-
32-
color: #545454;
33-
font-size: 1.5em;
34-
font-family: sans-serif;
35-
font-weight: bold;
28+
font-size: 4rem;
3629
}
3730
</style>
38-
<link rel="stylesheet" href="https://unpkg.com/graphiql@3.3.2/graphiql.min.css" integrity="sha384-PNLpacmXJKoE7OSGX9OropkrZb2wdZx12taF1om8oQKkwJmzbqWEW9rKK8WT7IZ1" crossorigin />
31+
<link rel="stylesheet" href="https://esm.sh/graphiql@5.2.2/dist/style.css" crossorigin="anonymous" />
3932
{% if enable_explorer_plugin %}
40-
<link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer@3.1.0/dist/style.css" integrity="sha384-YN9MumWidbWKuNj8VfH5ggrFvm9YqAoIOMnKYpeGL3dr7Eg1qnQ+SAqSthdNZCjz" crossorigin />
33+
<link rel="stylesheet" href="https://esm.sh/@graphiql/plugin-explorer@5.1.1/dist/style.css" crossorigin="anonymous" />
4134
{% endif %}
42-
</head>
43-
44-
<body>
45-
<div id="graphiql">
46-
<div id="graphiql-loading">Loading {{ title }}...</div>
47-
</div>
35+
<link rel="modulepreload" href="https://esm.sh/react@19.1.0" crossorigin="anonymous" />
36+
<link rel="modulepreload" href="https://esm.sh/react-dom@19.1.0" crossorigin="anonymous" />
37+
<link rel="modulepreload" href="https://esm.sh/react-dom@19.1.0/client" crossorigin="anonymous" />
38+
<link rel="modulepreload" href="https://esm.sh/graphiql@5.2.2?standalone&external=react,react-dom,@graphiql/react,graphql" crossorigin="anonymous" />
39+
<link rel="modulepreload" href="https://esm.sh/@graphiql/react@0.37.3?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid" crossorigin="anonymous" />
40+
<link rel="modulepreload" href="https://esm.sh/@graphiql/toolkit@0.11.3?standalone&external=graphql" crossorigin="anonymous" />
41+
<link rel="modulepreload" href="https://esm.sh/graphql@16.11.0" crossorigin="anonymous" />
42+
<link rel="modulepreload" href="https://esm.sh/graphiql@5.2.2/setup-workers/esm.sh" crossorigin="anonymous" />
43+
{% if enable_explorer_plugin %}
44+
<link rel="modulepreload" href="https://esm.sh/@graphiql/plugin-explorer@5.1.1?standalone&external=react,@graphiql/react,graphql" crossorigin="anonymous" />
45+
{% endif %}
46+
<!--
47+
* Note:
48+
* The ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file.
49+
* `@emotion/is-prop-valid` is a shim to remove the console error ` module "@emotion /is-prop-valid" not found`. Upstream issue: https://github.com/motiondivision/motion/issues/3126
50+
-->
51+
<script type="importmap">
52+
{
53+
"imports": {
54+
"react": "https://esm.sh/react@19.1.0",
55+
"react/": "https://esm.sh/react@19.1.0/",
4856

49-
<script
50-
crossorigin
51-
integrity="sha384-7Er69WnAl0+tY5MWEvnQzWHeDFjgHSnlQfDDeWUvv8qlRXtzaF/pNo18Q2aoZNiO"
52-
src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"
53-
></script>
54-
<script
55-
crossorigin
56-
integrity="sha384-vj2XpC1SOa8PHrb0YlBqKN7CQzJYO72jz4CkDQ+ePL1pwOV4+dn05rPrbLGUuvCv"
57-
src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"
58-
></script>
57+
"react-dom": "https://esm.sh/react-dom@19.1.0",
58+
"react-dom/": "https://esm.sh/react-dom@19.1.0/",
5959

60-
<script
61-
crossorigin
62-
integrity="sha384-/jufPMBJpSyP7vyv2ht40LRJmcmVS5SWfhAYFyfsumlltrrnl/XjZljb5+cxgZUM"
63-
src="https://unpkg.com/graphiql@3.3.2/graphiql.min.js"
64-
></script>
60+
"graphiql": "https://esm.sh/graphiql@5.2.2?standalone&external=react,react-dom,@graphiql/react,graphql",
61+
"graphiql/": "https://esm.sh/graphiql@5.2.2/",
62+
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@5.1.1?standalone&external=react,@graphiql/react,graphql",
63+
"@graphiql/react": "https://esm.sh/@graphiql/react@0.37.3?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
6564

66-
{% if enable_explorer_plugin %}
67-
<script
68-
crossorigin
69-
integrity="sha384-vzwQ46f1E2uHaJFa97UTJK8OjEVtvAg+E0Rf9p+5G34Q4ZfUjYIqy7ZV7SBZE2Bz"
70-
src="https://unpkg.com/@graphiql/plugin-explorer@3.1.0/dist/index.umd.js"
71-
></script>
72-
{% endif %}
65+
"@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@0.11.3?standalone&external=graphql",
66+
"graphql": "https://esm.sh/graphql@16.11.0",
67+
"@emotion/is-prop-valid": "data:text/javascript,"
68+
}
69+
}
70+
</script>
71+
<script type="module">
72+
import React from 'react';
73+
import ReactDOM from 'react-dom/client';
74+
import { GraphiQL } from 'graphiql';
75+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
76+
{% if enable_explorer_plugin %}
77+
import { explorerPlugin } from '@graphiql/plugin-explorer';
78+
{% endif %}
79+
import 'graphiql/setup-workers/esm.sh';
7380

74-
<script>
75-
var fetcher = GraphiQL.createFetcher({
81+
const fetcher = createGraphiQLFetcher({
7682
url: window.location.href,
7783
{% if subscription_url %}
7884
subscriptionUrl: "{{ subscription_url }}",
7985
{% else %}
8086
subscriptionUrl: (window.location.protocol === "https:" ? "wss" : "ws") + "://" + window.location.host + window.location.pathname,
8187
{% endif %}
8288
});
89+
{% if enable_explorer_plugin %}
90+
const plugins = [explorerPlugin()];
91+
{% endif %}
8392

8493
function AriadneGraphiQL() {
85-
var [query, setQuery] = React.useState(
86-
'{% raw default_query %}',
87-
);
88-
{% if enable_explorer_plugin %}
89-
var explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
90-
{% endif %}
9194
return React.createElement(GraphiQL, {
92-
fetcher: fetcher,
93-
defaultEditorToolsVisibility: true,
95+
fetcher,
9496
{% if enable_explorer_plugin %}
95-
plugins: [explorerPlugin],
97+
plugins,
9698
{% endif %}
97-
query: query,
98-
onEditQuery: setQuery,
99+
defaultEditorToolsVisibility: true,
100+
initialQuery: '{% raw default_query %}',
99101
});
100102
}
101103

102-
ReactDOM.render(
103-
React.createElement(AriadneGraphiQL),
104-
document.getElementById('graphiql'),
105-
);
104+
const container = document.getElementById('graphiql');
105+
const root = ReactDOM.createRoot(container);
106+
root.render(React.createElement(AriadneGraphiQL));
106107
</script>
108+
</head>
109+
<body>
110+
<div id="graphiql">
111+
<div class="loading">Loading {{ title }}…</div>
112+
</div>
107113
</body>
108114
</html>

‎docs/06-Extensions/02-middleware.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,4 +194,4 @@ async def lowercase_middleware(resolver, obj, info, **args):
194194
return value
195195
```
196196

197-
However, asynchronous middleware require for their result being `awaited` during query execution. Asynchronous functions in Python are considered fast, but the overhead of being sent to the event loop and having their result retrieved makes them **much** slower than plain synchronous function call for scenarios where no IO is involved. Because default implementation of middleware manager calls middlewares for every field in result set, this effectively turns all resolver calls in query executor into asynchronous calls. This makes query execution noticeably slower even for small GraphQL queries, and quick benchmarks have found that it can slow queries by x1.5 to x2.5.
197+
However, asynchronous middleware require their result to be `awaited` during query execution. Asynchronous functions in Python are considered fast, but the overhead of being sent to the event loop and having their result retrieved makes them **much** slower than plain synchronous function call for scenarios where no IO is involved. Because default implementation of middleware manager calls middlewares for every field in result set, this effectively turns all resolver calls in query executor into asynchronous calls. This makes query execution noticeably slower even for small GraphQL queries, and quick benchmarks have found that it can slow queries by x1.5 to x2.5.

0 commit comments

Comments
 (0)
⚡