Skip to content

Commit dd0d681

Browse files
jacekwegrjacekwegr
authored
Merge pull request #4543 from esl/update-graphiql
Fix and update GraphiQL
2 parents 62b9c03 + c895f54 commit dd0d681

File tree

2 files changed

+94
-71
lines changed

2 files changed

+94
-71
lines changed

‎big_tests/tests/graphql_SUITE.erl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ can_load_graphiql(Config) ->
147147
Ep = ?config(schema_endpoint, Config),
148148
{Status, Html} = get_graphiql_website(Ep),
149149
?assertEqual({<<"200">>, <<"OK">>}, Status),
150-
?assertNotEqual(nomatch, binary:match(Html, <<"Loading...">>)).
150+
?assertNotEqual(nomatch, binary:match(Html, <<"MongooseIM GraphiQL">>)).
151151

152152
user_checks_auth(Config) ->
153153
Ep = ?config(schema_endpoint, Config),

‎priv/graphql/wsite/index.html

Lines changed: 93 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,107 @@
11
<!--
2-
* Copyright (c) 2021 GraphQL Contributors
2+
* Copyright (c) 2025 GraphQL Contributors
33
* All rights reserved.
44
*
5-
* the original version of the file:
6-
* https://github.com/graphql/graphiql/blob/[email protected]/examples/graphiql-cdn/index.html
5+
* The original version of the file:
6+
* https://raw.githubusercontent.com/graphql/graphiql/8335433/examples/graphiql-cdn/index.html
77
*
88
* This source code is licensed under the license found at:
9-
* https://github.com/graphql/graphiql/blob/[email protected]/LICENSE
9+
* https://raw.githubusercontent.com/graphql/graphiql/8335433/LICENSE
1010
-->
1111
<!doctype html>
1212
<html lang="en">
13-
<head>
14-
<title>GraphiQL</title>
15-
<style>
16-
body {
17-
height: 100%;
18-
margin: 0;
19-
width: 100%;
20-
overflow: hidden;
21-
}
2213

23-
#graphiql {
24-
height: 100vh;
14+
<head>
15+
<meta charset="UTF-8" />
16+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
17+
<title>MongooseIM GraphiQL</title>
18+
<style>
19+
body {
20+
margin: 0;
21+
}
22+
23+
#graphiql {
24+
height: 100dvh;
25+
}
26+
27+
.loading {
28+
height: 100%;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
font-size: 4rem;
33+
}
34+
</style>
35+
<link rel="stylesheet" href="https://esm.sh/graphiql/dist/style.css" />
36+
<link rel="stylesheet" href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css" />
37+
<!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
38+
<script type="importmap">
39+
{
40+
"imports": {
41+
"react": "https://esm.sh/[email protected]",
42+
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
43+
44+
"react-dom": "https://esm.sh/[email protected]",
45+
"react-dom/client": "https://esm.sh/[email protected]/client",
46+
47+
"graphiql": "https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql",
48+
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql",
49+
"@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql",
50+
51+
"@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
52+
"graphql": "https://esm.sh/[email protected]"
53+
}
2554
}
26-
</style>
27-
<!--
28-
This GraphiQL example depends on Promise and fetch, which are available in
29-
modern browsers, but can be "polyfilled" for older browsers.
30-
GraphiQL itself depends on React DOM.
31-
If you do not want to rely on a CDN, you can host these files locally or
32-
include them directly in your favored resource bundler.
33-
-->
34-
<script
35-
crossorigin
36-
src="https://unpkg.com/react@18/umd/react.production.min.js"
37-
></script>
38-
<script
39-
crossorigin
40-
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
41-
></script>
42-
<!--
43-
These two files can be found in the npm module, however you may wish to
44-
copy them directly into your environment, or perhaps include them in your
45-
favored resource bundler.
46-
-->
47-
<script
48-
src="https://unpkg.com/graphiql/graphiql.min.js"
49-
type="application/javascript"
50-
></script>
51-
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
52-
<!--
53-
These are imports for the GraphIQL Explorer plugin.
54-
-->
55-
<script
56-
src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
57-
crossorigin
58-
></script>
55+
</script>
56+
<script type="module">
57+
// Import React and ReactDOM
58+
import React from 'react';
59+
import ReactDOM from 'react-dom/client';
60+
// Import GraphiQL and the Explorer plugin
61+
import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
62+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
63+
import { explorerPlugin } from '@graphiql/plugin-explorer';
5964

60-
<link
61-
rel="stylesheet"
62-
href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
63-
/>
64-
</head>
65+
import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
66+
import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
67+
import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';
6568

66-
<body>
67-
<div id="graphiql">Loading...</div>
68-
<script>
69-
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
70-
const fetcher = GraphiQL.createFetcher({
71-
url: '/api/graphql/',
72-
headers: { 'X-Example-Header': 'foo' },
69+
globalThis.MonacoEnvironment = {
70+
getWorker(_workerId, label) {
71+
console.info('MonacoEnvironment.getWorker', { label });
72+
switch (label) {
73+
case 'json':
74+
return createJSONWorker();
75+
case 'graphql':
76+
return createGraphQLWorker();
77+
}
78+
return createEditorWorker();
79+
},
80+
};
81+
82+
const fetcher = createGraphiQLFetcher({
83+
url: '/api/graphql',
84+
});
85+
const plugins = [HISTORY_PLUGIN, explorerPlugin()];
86+
87+
function App() {
88+
return React.createElement(GraphiQL, {
89+
fetcher,
90+
plugins,
91+
defaultEditorToolsVisibility: true,
7392
});
74-
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
75-
root.render(
76-
React.createElement(GraphiQL, {
77-
fetcher,
78-
defaultEditorToolsVisibility: true,
79-
plugins: [explorerPlugin],
80-
}),
81-
);
82-
</script>
83-
</body>
93+
}
94+
95+
const container = document.getElementById('graphiql');
96+
const root = ReactDOM.createRoot(container);
97+
root.render(React.createElement(App));
98+
</script>
99+
</head>
100+
101+
<body>
102+
<div id="graphiql">
103+
<div class="loading">Loading…</div>
104+
</div>
105+
</body>
106+
84107
</html>

0 commit comments

Comments
 (0)