Skip to content

Commit 73a8b01

Browse files
peldaxpeldax
authored
Update ui.html.twig
1 parent 5ae5910 commit 73a8b01

File tree

1 file changed

+99
-52
lines changed

1 file changed

+99
-52
lines changed

‎src/Resources/views/ui.html.twig‎

Lines changed: 99 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,104 @@
1-
<!DOCTYPE html>
1+
<!--
2+
* Copyright (c) 2025 GraphQL Contributors
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
-->
8+
<!doctype html>
29
<html lang="en">
3-
<head>
4-
<title>GraphiQL</title>
10+
<head>
11+
<meta charset="UTF-8" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
<title>GraphiQL 5 with React 19 and GraphiQL Explorer</title>
514
<style>
6-
body {
7-
height: 100%;
8-
margin: 0;
9-
width: 100%;
10-
overflow: hidden;
11-
}
15+
body {
16+
margin: 0;
17+
}
1218
13-
#graphiql {
14-
height: 100vh;
15-
}
19+
#graphiql {
20+
height: 100dvh;
21+
}
22+
23+
.loading {
24+
height: 100%;
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
font-size: 4rem;
29+
}
1630
</style>
17-
<!--
18-
This GraphiQL example depends on Promise and fetch, which are available in
19-
modern browsers, but can be "polyfilled" for older browsers.
20-
GraphiQL itself depends on React DOM.
21-
If you do not want to rely on a CDN, you can host these files locally or
22-
include them directly in your favored resource bundler.
23-
-->
24-
<script
25-
crossorigin
26-
src="https://unpkg.com/react@18/umd/react.development.js"
27-
></script>
28-
<script
29-
crossorigin
30-
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
31-
></script>
32-
<!--
33-
These two files can be found in the npm module, however you may wish to
34-
copy them directly into your environment, or perhaps include them in your
35-
favored resource bundler.
36-
-->
37-
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css"/>
38-
</head>
39-
<body>
40-
<div id="graphiql">Loading...</div>
41-
<script
42-
src="https://unpkg.com/graphiql/graphiql.min.js"
43-
type="application/javascript"
44-
></script>
45-
<script>
46-
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
47-
root.render(
48-
React.createElement(GraphiQL, {
49-
fetcher: GraphiQL.createFetcher({
50-
url: '{{ schemaUrl }}',
51-
}),
52-
defaultEditorToolsVisibility: true,
53-
}),
54-
);
55-
</script>
56-
</body>
31+
<link rel="stylesheet" href="https://esm.sh/graphiql/dist/style.css" />
32+
<link
33+
rel="stylesheet"
34+
href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css"
35+
/>
36+
<!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
37+
<script type="importmap">
38+
{
39+
"imports": {
40+
"react": "https://esm.sh/react@19.1.0",
41+
"react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",
42+
43+
"react-dom": "https://esm.sh/react-dom@19.1.0",
44+
"react-dom/client": "https://esm.sh/react-dom@19.1.0/client",
45+
46+
"graphiql": "https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql",
47+
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql",
48+
"@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql",
49+
50+
"@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
51+
"graphql": "https://esm.sh/graphql@16.11.0"
52+
}
53+
}
54+
</script>
55+
<script type="module">
56+
// Import React and ReactDOM
57+
import React from 'react';
58+
import ReactDOM from 'react-dom/client';
59+
// Import GraphiQL and the Explorer plugin
60+
import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
61+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
62+
import { explorerPlugin } from '@graphiql/plugin-explorer';
63+
64+
import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
65+
import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
66+
import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';
67+
68+
globalThis.MonacoEnvironment = {
69+
getWorker(_workerId, label) {
70+
console.info('MonacoEnvironment.getWorker', { label });
71+
switch (label) {
72+
case 'json':
73+
return createJSONWorker();
74+
case 'graphql':
75+
return createGraphQLWorker();
76+
}
77+
return createEditorWorker();
78+
},
79+
};
80+
81+
const fetcher = createGraphiQLFetcher({
82+
url: '{{ schemaUrl }}',
83+
});
84+
const plugins = [HISTORY_PLUGIN, explorerPlugin()];
85+
86+
function App() {
87+
return React.createElement(GraphiQL, {
88+
fetcher,
89+
plugins,
90+
defaultEditorToolsVisibility: true,
91+
});
92+
}
93+
94+
const container = document.getElementById('graphiql');
95+
const root = ReactDOM.createRoot(container);
96+
root.render(React.createElement(App));
97+
</script>
98+
</head>
99+
<body>
100+
<div id="graphiql">
101+
<div class="loading">Loading…</div>
102+
</div>
103+
</body>
57104
</html>

0 commit comments

Comments
 (0)