Skip to content

Commit 89bbf41

Browse files
martinbonninmartinbonnin
committed
Update GraphiQL install
1 parent f4e284c commit 89bbf41

File tree

1 file changed

+68
-56
lines changed

1 file changed

+68
-56
lines changed

‎landing-page/public/graphiql/index.html‎

Lines changed: 68 additions & 56 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
@@ -8,73 +8,85 @@
88
<!doctype html>
99
<html lang="en">
1010
<head>
11-
<title>GraphiQL</title>
11+
<meta charset="UTF-8" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
<title>Confetti GraphiQL</title>
1214
<style>
1315
body {
14-
height: 100%;
1516
margin: 0;
16-
width: 100%;
17-
overflow: hidden;
1817
}
1918

2019
#graphiql {
21-
height: 100vh;
20+
height: 100dvh;
2221
}
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/graphiql/graphiql.min.js"
46-
type="application/javascript"
47-
></script>
48-
<link rel="stylesheet" href="https://unpkg.com/graphiql/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>
5622

23+
.loading {
24+
height: 100%;
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
font-size: 4rem;
29+
}
30+
</style>
31+
<link rel="stylesheet" href="https://esm.sh/graphiql/dist/style.css" />
5732
<link
5833
rel="stylesheet"
59-
href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
34+
href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css"
6035
/>
61-
</head>
36+
<!--
37+
* Note:
38+
* The ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file.
39+
* `@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
40+
-->
41+
<script type="importmap">
42+
{
43+
"imports": {
44+
"react": "https://esm.sh/[email protected]",
45+
"react/": "https://esm.sh/[email protected]/",
46+
47+
"react-dom": "https://esm.sh/[email protected]",
48+
"react-dom/": "https://esm.sh/[email protected]/",
49+
50+
"graphiql": "https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql",
51+
"graphiql/": "https://esm.sh/graphiql/",
52+
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql",
53+
"@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
54+
55+
"@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
56+
"graphql": "https://esm.sh/[email protected]",
57+
"@emotion/is-prop-valid": "data:text/javascript,"
58+
}
59+
}
60+
</script>
61+
<script type="module">
62+
import React from 'react';
63+
import ReactDOM from 'react-dom/client';
64+
import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
65+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
66+
import { explorerPlugin } from '@graphiql/plugin-explorer';
67+
import 'graphiql/setup-workers/esm.sh';
68+
69+
const fetcher = createGraphiQLFetcher({
70+
url: 'https://confetti-app.dev/graphql',
71+
});
72+
const plugins = [HISTORY_PLUGIN, explorerPlugin()];
6273

74+
function App() {
75+
return React.createElement(GraphiQL, {
76+
fetcher,
77+
plugins,
78+
defaultEditorToolsVisibility: true,
79+
});
80+
}
81+
82+
const container = document.getElementById('graphiql');
83+
const root = ReactDOM.createRoot(container);
84+
root.render(React.createElement(App));
85+
</script>
86+
</head>
6387
<body>
64-
<div id="graphiql">Loading...</div>
65-
<script>
66-
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
67-
const fetcher = GraphiQL.createFetcher({
68-
url: 'https://confetti-app.dev/graphql',
69-
});
70-
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
71-
root.render(
72-
React.createElement(GraphiQL, {
73-
fetcher,
74-
defaultEditorToolsVisibility: true,
75-
plugins: [explorerPlugin],
76-
}),
77-
);
78-
</script>
88+
<div id="graphiql">
89+
<div class="loading">Loading…</div>
90+
</div>
7991
</body>
8092
</html>

0 commit comments

Comments
 (0)