Skip to content

Commit 077fded

Browse files
Upgrade GraphiQL from 4.1.2 to 5.0.0 version (#1331)
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 43f7bc5 commit 077fded

File tree

4 files changed

+37
-18
lines changed

4 files changed

+37
-18
lines changed

juniper/CHANGELOG.md

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

124124
### Changed
125125

126-
- Upgraded [GraphiQL] to [4.1.2 version](https://github.com/graphql/graphiql/blob/graphiql%404.1.2/packages/graphiql/CHANGELOG.md#412). ([#1326])
126+
- Upgraded [GraphiQL] to [5.0.0 version](https://github.com/graphql/graphiql/blob/graphiql%405.0.0/packages/graphiql/CHANGELOG.md#500). ([#1331])
127127

128128
### Fixed
129129

@@ -145,9 +145,9 @@ All user visible changes to `juniper` crate will be documented in this file. Thi
145145
[#1311]: /../../pull/1311
146146
[#1318]: /../../pull/1318
147147
[#1324]: /../../pull/1324
148-
[#1326]: /../../pull/1326
149148
[#1327]: /../../pull/1327
150149
[#1329]: /../../pull/1329
150+
[#1331]: /../../pull/1331
151151
[1b1fc618]: /../../commit/1b1fc61879ffdd640d741e187dc20678bf7ab295
152152
[20609366]: /../../commit/2060936635609b0186d46d8fbd06eb30fce660e3
153153
[4b14c015]: /../../commit/4b14c015018d31cb6df848efdee24d96416b76d9

juniper/Makefile

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,21 +46,23 @@ graphiql:
4646
| grep -m1 '"@graphiql/toolkit": "' | cut -d '"' -f4 | cut -d '^' -f2)))
4747
curl -fsL -o src/http/graphiql.html \
4848
https://raw.githubusercontent.com/graphql/graphiql/graphiql%40$(GRAPHIQL_VER)/examples/graphiql-cdn/index.html
49-
$(sed-i) 's|esm.sh/graphiql@4.0.0|esm.sh/graphiql@$(GRAPHIQL_VER)|g' \
49+
$(sed-i) 's|esm.sh/graphiql@5.0.0-rc.1|esm.sh/graphiql@$(GRAPHIQL_VER)|g' \
5050
src/http/graphiql.html
51-
$(sed-i) 's|esm.sh/@graphiql/plugin-explorer@4.0.0|esm.sh/@graphiql/plugin-explorer@$(graphiql-plugin-explorer-ver)|g' \
51+
$(sed-i) 's|esm.sh/graphiql@6.0.0-canary-b26dcda1.0|esm.sh/graphiql@$(GRAPHIQL_VER)|g' \
5252
src/http/graphiql.html
53-
$(sed-i) 's|esm.sh/@graphiql/[email protected]|esm.sh/@graphiql/react@$(graphiql-react-ver)|g' \
53+
$(sed-i) 's|esm.sh/@graphiql/[email protected]|esm.sh/@graphiql/plugin-explorer@$(graphiql-plugin-explorer-ver)|g' \
5454
src/http/graphiql.html
55-
$(sed-i) 's|esm.sh/@graphiql/[email protected]|esm.sh/@graphiql/toolkit@$(graphiql-toolkit-ver)|g' \
55+
$(sed-i) 's|esm.sh/@graphiql/[email protected]|esm.sh/@graphiql/react@$(graphiql-react-ver)|g' \
56+
src/http/graphiql.html
57+
$(sed-i) 's|esm.sh/@graphiql/toolkit|esm.sh/@graphiql/toolkit@$(graphiql-toolkit-ver)|g' \
5658
src/http/graphiql.html
5759
$(sed-i) "s|'https://countries.trevorblades.com'|JUNIPER_URL|g" \
5860
src/http/graphiql.html
5961
$(sed-i) 's|url: JUNIPER_URL,|url: JUNIPER_URL,\n subscriptionUrl: normalizeSubscriptionEndpoint(JUNIPER_URL, JUNIPER_SUBSCRIPTIONS_URL)|' \
6062
src/http/graphiql.html
6163
$(sed-i) 's|<script type="module">|<script type="module">\n<!-- inject -->|' \
6264
src/http/graphiql.html
63-
$(sed-i) 's|GraphiQL 4 with React 19 and GraphiQL Explorer|GraphiQL|' \
65+
$(sed-i) 's|GraphiQL 5 with React 19 and GraphiQL Explorer|GraphiQL|' \
6466
src/http/graphiql.html
6567

6668

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": "4.1.2",
7+
"graphiql": "5.0.0",
88
"graphql-playground-react": "1.7.28"
99
}
1010
}

juniper/src/http/graphiql.html

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
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
@@ -14,7 +14,6 @@
1414
<style>
1515
body {
1616
margin: 0;
17-
overflow: hidden; /* in Firefox */
1817
}
1918

2019
#graphiql {
@@ -31,11 +30,11 @@
3130
</style>
3231
<link
3332
rel="stylesheet"
34-
href="https://esm.sh/graphiql@4.1.2/dist/style.css"
33+
href="https://esm.sh/graphiql@5.0.0/dist/style.css"
3534
/>
3635
<link
3736
rel="stylesheet"
38-
href="https://esm.sh/@graphiql/plugin-explorer@4.0.6/dist/style.css"
37+
href="https://esm.sh/@graphiql/plugin-explorer@5.0.0/dist/style.css"
3938
/>
4039
<!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
4140
<script type="importmap">
@@ -47,9 +46,9 @@
4746
"react-dom": "https://esm.sh/[email protected]",
4847
"react-dom/client": "https://esm.sh/[email protected]/client",
4948

50-
"graphiql": "https://esm.sh/graphiql@4.1.2?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react",
51-
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@4.0.6?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql",
52-
"@graphiql/react": "https://esm.sh/@graphiql/react@0.34.1?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit",
49+
"graphiql": "https://esm.sh/graphiql@5.0.0?standalone&external=react,react-dom,@graphiql/react,graphql",
50+
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@5.0.0?standalone&external=react,@graphiql/react,graphql",
51+
"@graphiql/react": "https://esm.sh/@graphiql/react@0.35.0?standalone&external=react,react-dom,graphql",
5352

5453
"@graphiql/toolkit": "https://esm.sh/@graphiql/[email protected]?standalone&external=graphql",
5554
"graphql": "https://esm.sh/[email protected]"
@@ -62,20 +61,38 @@
6261
import React from 'react';
6362
import ReactDOM from 'react-dom/client';
6463
// Import GraphiQL and the Explorer plugin
65-
import { GraphiQL } from 'graphiql';
64+
import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
6665
import { createGraphiQLFetcher } from '@graphiql/toolkit';
6766
import { explorerPlugin } from '@graphiql/plugin-explorer';
6867

68+
import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
69+
import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
70+
import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';
71+
72+
globalThis.MonacoEnvironment = {
73+
getWorker(_workerId, label) {
74+
console.info('MonacoEnvironment.getWorker', { label });
75+
switch (label) {
76+
case 'json':
77+
return createJSONWorker();
78+
case 'graphql':
79+
return createGraphQLWorker();
80+
}
81+
return createEditorWorker();
82+
},
83+
};
84+
6985
const fetcher = createGraphiQLFetcher({
7086
url: JUNIPER_URL,
7187
subscriptionUrl: normalizeSubscriptionEndpoint(JUNIPER_URL, JUNIPER_SUBSCRIPTIONS_URL)
7288
});
73-
const explorer = explorerPlugin();
89+
const plugins = [HISTORY_PLUGIN, explorerPlugin()];
7490

7591
function App() {
7692
return React.createElement(GraphiQL, {
7793
fetcher,
78-
plugins: [explorer],
94+
plugins,
95+
defaultEditorToolsVisibility: true,
7996
});
8097
}
8198

0 commit comments

Comments
 (0)