Skip to content

Commit 9f12fe3

Browse files
dependabot[bot]tyranron
dependabot[bot]
and
tyranron
authored
Upgrade GraphiQL from 3.9.0 to 4.0.2 version (#1316)
Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Kai Ren <[email protected]>
1 parent 1996e35 commit 9f12fe3

File tree

7 files changed

+88
-66
lines changed

7 files changed

+88
-66
lines changed

‎juniper/CHANGELOG.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ All user visible changes to `juniper` crate will be documented in this file. Thi
4646

4747
### Changed
4848

49-
- Updated [GraphiQL] to [3.9.0 version](https://github.com/graphql/graphiql/blob/graphiql%403.9.0/packages/graphiql/CHANGELOG.md#390). ([#1315])
49+
- Upgraded [GraphiQL] to [4.0.2 version](https://github.com/graphql/graphiql/blob/graphiql%404.0.2/packages/graphiql/CHANGELOG.md#402). ([#1316])
5050

5151
[#1252]: /../../pull/1252
5252
[#1270]: /../../issues/1270
@@ -58,7 +58,7 @@ All user visible changes to `juniper` crate will be documented in this file. Thi
5858
[#1281]: /../../pull/1281
5959
[#1284]: /../../pull/1284
6060
[#1311]: /../../pull/1311
61-
[#1315]: /../../pull/1315
61+
[#1316]: /../../pull/1316
6262
[todo]: /../../commit/todo
6363

6464

‎juniper/Makefile

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,29 @@ GRAPHQL_PLAYGROUND_VER ?= $(strip \
3535
# make graphiql
3636

3737
graphiql:
38-
curl -fL -o src/http/graphiql.html \
38+
$(eval graphiql-react-ver := $(strip \
39+
$(shell curl -fsL https://raw.githubusercontent.com/graphql/graphiql/refs/tags/graphiql%40$(GRAPHIQL_VER)/packages/graphiql/package.json \
40+
| grep -m1 '"@graphiql/react": "' | cut -d '"' -f4 | cut -d '^' -f2)))
41+
$(eval graphiql-toolkit-ver := $(strip \
42+
$(shell curl -fsL https://raw.githubusercontent.com/graphql/graphiql/refs/tags/graphiql%40$(GRAPHIQL_VER)/packages/graphiql/package.json \
43+
| grep -m1 '"@graphiql/toolkit": "' | cut -d '"' -f4 | cut -d '^' -f2)))
44+
curl -fsL -o src/http/graphiql.html \
3945
https://raw.githubusercontent.com/graphql/graphiql/graphiql%40$(GRAPHIQL_VER)/examples/graphiql-cdn/index.html
40-
$(sed-i) 's|unpkg.com/graphiql/|unpkg.com/graphiql@$(GRAPHIQL_VER)/|g' \
46+
$(sed-i) 's|esm.sh/graphiql@4.0.0|esm.sh/graphiql@$(GRAPHIQL_VER)|g' \
4147
src/http/graphiql.html
42-
$(sed-i) "s|'https://swapi-graphql.netlify.app/.netlify/functions/index'|JUNIPER_URL|g" \
48+
$(sed-i) 's|esm.sh/@graphiql/[email protected]|esm.sh/@graphiql/plugin-explorer@$(GRAPHIQL_VER)|g' \
4349
src/http/graphiql.html
44-
$(sed-i) "s|url: JUNIPER_URL,|url: JUNIPER_URL,\n subscriptionUrl: normalizeSubscriptionEndpoint(JUNIPER_URL, JUNIPER_SUBSCRIPTIONS_URL)|" \
50+
$(sed-i) 's|esm.sh/@graphiql/[email protected]|esm.sh/@graphiql/react@$(graphiql-react-ver)|g' \
4551
src/http/graphiql.html
46-
$(sed-i) 's|<script>|<script>\n<!-- inject -->|' \
52+
$(sed-i) 's|esm.sh/@graphiql/[email protected]|esm.sh/@graphiql/toolkit@$(graphiql-toolkit-ver)|g' \
4753
src/http/graphiql.html
48-
$(sed-i) '/X-Example-Header/d' \
54+
$(sed-i) "s|'https://countries.trevorblades.com'|JUNIPER_URL|g" \
55+
src/http/graphiql.html
56+
$(sed-i) 's|url: JUNIPER_URL,|url: JUNIPER_URL,\n subscriptionUrl: normalizeSubscriptionEndpoint(JUNIPER_URL, JUNIPER_SUBSCRIPTIONS_URL)|' \
57+
src/http/graphiql.html
58+
$(sed-i) 's|<script type="module">|<script type="module">\n<!-- inject -->|' \
59+
src/http/graphiql.html
60+
$(sed-i) 's|GraphiQL 4 with React 19 and GraphiQL Explorer|GraphiQL|' \
4961
src/http/graphiql.html
5062

5163

@@ -56,7 +68,7 @@ graphiql:
5668
# make graphql-playground
5769

5870
graphql-playground:
59-
curl -fL -o src/http/playground.html \
71+
curl -fsL -o src/http/playground.html \
6072
https://raw.githubusercontent.com/graphql/graphql-playground/graphql-playground-react%40$(GRAPHQL_PLAYGROUND_VER)/packages/graphql-playground-html/withAnimation.html
6173
$(sed-i) 's|cdn.jsdelivr.net/npm/graphql-playground-react/|cdn.jsdelivr.net/npm/graphql-playground-react@$(GRAPHQL_PLAYGROUND_VER)/|g' \
6274
src/http/playground.html

‎juniper/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"postinstall": "make graphiql graphql-playground"
55
},
66
"dependencies": {
7-
"graphiql": "3.9.0",
7+
"graphiql": "4.0.2",
88
"graphql-playground-react": "1.7.28"
99
}
1010
}

‎juniper/src/http/graphiql.html

Lines changed: 61 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -8,75 +8,85 @@
88
<!doctype html>
99
<html lang="en">
1010
<head>
11+
<meta charset="UTF-8" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1113
<title>GraphiQL</title>
1214
<style>
1315
body {
14-
height: 100%;
1516
margin: 0;
16-
width: 100%;
17-
overflow: hidden;
17+
overflow: hidden; /* in Firefox */
1818
}
1919

2020
#graphiql {
21-
height: 100vh;
21+
height: 100dvh;
2222
}
23-
</style>
24-
<!--
25-
This GraphiQL example depends on Promise and fetch, which are available in
26-
modern browsers, but can be "polyfilled" for older browsers.
27-
GraphiQL itself depends on React DOM.
28-
If you do not want to rely on a CDN, you can host these files locally or
29-
include them directly in your favored resource bundler.
30-
-->
31-
<script
32-
crossorigin
33-
src="https://unpkg.com/react@18/umd/react.production.min.js"
34-
></script>
35-
<script
36-
crossorigin
37-
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
38-
></script>
39-
<!--
40-
These two files can be found in the npm module, however you may wish to
41-
copy them directly into your environment, or perhaps include them in your
42-
favored resource bundler.
43-
-->
44-
<script
45-
src="https://unpkg.com/[email protected]/graphiql.min.js"
46-
type="application/javascript"
47-
></script>
48-
<link rel="stylesheet" href="https://unpkg.com/[email protected]/graphiql.min.css" />
49-
<!--
50-
These are imports for the GraphIQL Explorer plugin.
51-
-->
52-
<script
53-
src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
54-
crossorigin
55-
></script>
5623

24+
.loading {
25+
height: 100%;
26+
display: flex;
27+
align-items: center;
28+
justify-content: center;
29+
font-size: 4rem;
30+
}
31+
</style>
5732
<link
5833
rel="stylesheet"
59-
href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
34+
href="https://esm.sh/graphiql@4.0.2/dist/style.css"
6035
/>
61-
</head>
36+
<link
37+
rel="stylesheet"
38+
href="https://esm.sh/@graphiql/[email protected]/dist/style.css"
39+
/>
40+
<!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
41+
<script type="importmap">
42+
{
43+
"imports": {
44+
"react": "https://esm.sh/[email protected]",
45+
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
6246

63-
<body>
64-
<div id="graphiql">Loading...</div>
65-
<script>
47+
"react-dom": "https://esm.sh/[email protected]",
48+
"react-dom/client": "https://esm.sh/[email protected]/client",
49+
50+
"graphiql": "https://esm.sh/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react",
51+
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql",
52+
"@graphiql/react": "https://esm.sh/@graphiql/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit",
53+
54+
"@graphiql/toolkit": "https://esm.sh/@graphiql/[email protected]?standalone&external=graphql",
55+
"graphql": "https://esm.sh/[email protected]"
56+
}
57+
}
58+
</script>
59+
<script type="module">
6660
<!-- inject -->
67-
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
68-
const fetcher = GraphiQL.createFetcher({
61+
// Import React and ReactDOM
62+
import React from 'react';
63+
import ReactDOM from 'react-dom/client';
64+
// Import GraphiQL and the Explorer plugin
65+
import { GraphiQL } from 'graphiql';
66+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
67+
import { explorerPlugin } from '@graphiql/plugin-explorer';
68+
69+
const fetcher = createGraphiQLFetcher({
6970
url: JUNIPER_URL,
7071
subscriptionUrl: normalizeSubscriptionEndpoint(JUNIPER_URL, JUNIPER_SUBSCRIPTIONS_URL)
7172
});
72-
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
73-
root.render(
74-
React.createElement(GraphiQL, {
73+
const explorer = explorerPlugin();
74+
75+
function App() {
76+
return React.createElement(GraphiQL, {
7577
fetcher,
76-
defaultEditorToolsVisibility: true,
77-
plugins: [explorerPlugin],
78-
}),
79-
);
78+
plugins: [explorer],
79+
});
80+
}
81+
82+
const container = document.getElementById('graphiql');
83+
const root = ReactDOM.createRoot(container);
84+
root.render(React.createElement(App));
8085
</script>
86+
</head>
87+
<body>
88+
<div id="graphiql">
89+
<div class="loading">Loading…</div>
90+
</div>
8191
</body>
8292
</html>

‎juniper/src/http/graphiql.rs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ pub fn graphiql_source(
1717
&format!(
1818
// language=JavaScript
1919
"
20-
var JUNIPER_URL = '{juniper_url}';
21-
var JUNIPER_SUBSCRIPTIONS_URL = '{juniper_subscriptions_url}';
20+
const JUNIPER_URL = '{juniper_url}';
21+
const JUNIPER_SUBSCRIPTIONS_URL = '{juniper_subscriptions_url}';
2222
2323
{grahiql_js}
2424

‎juniper_actix/src/lib.rs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -527,8 +527,8 @@ mod tests {
527527
"text/html; charset=utf-8"
528528
);
529529
let body = take_response_body_string(resp).await;
530-
assert!(body.contains("var JUNIPER_URL = '/dogs-api/graphql';"));
531-
assert!(body.contains("var JUNIPER_SUBSCRIPTIONS_URL = '/dogs-api/subscriptions';"))
530+
assert!(body.contains("const JUNIPER_URL = '/dogs-api/graphql';"));
531+
assert!(body.contains("const JUNIPER_SUBSCRIPTIONS_URL = '/dogs-api/subscriptions';"))
532532
}
533533

534534
#[actix_web::rt::test]

‎juniper_warp/src/lib.rs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -661,7 +661,7 @@ mod tests {
661661
);
662662
let body = String::from_utf8(response.body().to_vec()).unwrap();
663663

664-
assert!(body.contains("var JUNIPER_URL = '/dogs-api/graphql';"));
664+
assert!(body.contains("const JUNIPER_URL = '/dogs-api/graphql';"));
665665
}
666666

667667
#[tokio::test]

0 commit comments

Comments
 (0)