Skip to content

Commit e6dee9f

Browse files
andaaronandaaron
authored
chore: Update to graphql 5.2.0 (#3410)
chore: Update to graphql 5.2.0, previous version was not loading dependencies anymore https://github.com/graphql/graphiql/tree/graphiql%405.2.0/examples/graphiql-cdn Signed-off-by: Andrei Aaron <[email protected]>
1 parent 1e9d9b8 commit e6dee9f

File tree

1 file changed

+70
-45
lines changed

1 file changed

+70
-45
lines changed

‎pkg/debug/gqlplayground/index.html.tmpl‎

Lines changed: 70 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,92 @@
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
66
* LICENSE file in the root directory of this source tree.
77
-->
8-
<!DOCTYPE html>
9-
<html>
8+
<!doctype html>
9+
<html lang="en">
1010
<head>
11-
<title>zot GraphQL playground</title>
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>
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>
2422

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" />
32+
<link
33+
rel="stylesheet"
34+
href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css"
35+
/>
2536
<!--
26-
This GraphiQL example depends on Promise and fetch, which are available in
27-
modern browsers, but can be "polyfilled" for older browsers.
28-
GraphiQL itself depends on React DOM.
29-
If you do not want to rely on a CDN, you can host these files locally or
30-
include them directly in your favored resource bundler.
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
3140
-->
32-
<script
33-
crossorigin
34-
src="https://unpkg.com/react@17/umd/react.development.js"
35-
></script>
36-
<script
37-
crossorigin
38-
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
39-
></script>
41+
<script type="importmap">
42+
{
43+
"imports": {
44+
"react": "https://esm.sh/[email protected]",
45+
"react/": "https://esm.sh/[email protected]/",
4046

41-
<!--
42-
These two files can be found in the npm module, however you may wish to
43-
copy them directly into your environment, or perhaps include them in your
44-
favored resource bundler.
45-
-->
46-
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
47-
</head>
47+
"react-dom": "https://esm.sh/[email protected]",
48+
"react-dom/": "https://esm.sh/[email protected]/",
4849

49-
<body>
50-
<div id="graphiql">Loading...</div>
51-
<script
52-
src="https://unpkg.com/graphiql/graphiql.min.js"
53-
type="application/javascript"
54-
></script>
55-
<script>
56-
ReactDOM.render(
57-
React.createElement(GraphiQL, {
58-
fetcher: GraphiQL.createFetcher({
59-
url: {{.Target}},
60-
}),
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://countries.trevorblades.com',
71+
});
72+
const plugins = [HISTORY_PLUGIN, explorerPlugin()];
73+
74+
function App() {
75+
return React.createElement(GraphiQL, {
76+
fetcher,
77+
plugins,
6178
defaultEditorToolsVisibility: true,
62-
}),
63-
document.getElementById('graphiql'),
64-
);
79+
});
80+
}
81+
82+
const container = document.getElementById('graphiql');
83+
const root = ReactDOM.createRoot(container);
84+
root.render(React.createElement(App));
6585
</script>
86+
</head>
87+
<body>
88+
<div id="graphiql">
89+
<div class="loading">Loading…</div>
90+
</div>
6691
</body>
67-
</html>
92+
</html>

0 commit comments

Comments
 (0)