@@ -14,89 +14,89 @@ enum GraphiQLHandler {
1414 graphiQLFetcherArgs += " , subscriptionUrl: ' \( subscriptionUrl) ' "
1515 }
1616 return """
17- <!doctype html>
18- <html lang= " en " >
19- <head>
20- <meta charset= " UTF-8 " />
21- <meta name= " viewport " content= " width=device-width, initial-scale=1.0 " />
22- <title>GraphiQL 5 with React 19 and GraphiQL Explorer</title>
23- <style>
24- body {
25- margin: 0;
26- }
17+ <!doctype html>
18+ <html lang= " en " >
19+ <head>
20+ <meta charset= " UTF-8 " />
21+ <meta name= " viewport " content= " width=device-width, initial-scale=1.0 " />
22+ <title>GraphiQL 5 with React 19 and GraphiQL Explorer</title>
23+ <style>
24+ body {
25+ margin: 0;
26+ }
2727
28- #graphiql {
29- height: 100dvh;
30- }
28+ #graphiql {
29+ height: 100dvh;
30+ }
3131
32- .loading {
33- height: 100%;
34- display: flex;
35- align-items: center;
36- justify-content: center;
37- font-size: 4rem;
38- }
39- </style>
40- <link rel= " stylesheet " href= " https://esm.sh/graphiql/dist/style.css " />
41- <link
42- rel= " stylesheet "
43- href= " https://esm.sh/@graphiql/plugin-explorer/dist/style.css "
44- />
45- <!--
46- * Note:
47- * The ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file.
48- * `@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
49- -->
50- <script type= " importmap " >
51- {
52- " imports " : {
53- " react " : " https://esm.sh/react@19.1.0 " ,
54- " react/ " : " https://esm.sh/react@19.1.0/ " ,
32+ .loading {
33+ height: 100%;
34+ display: flex;
35+ align-items: center;
36+ justify-content: center;
37+ font-size: 4rem;
38+ }
39+ </style>
40+ <link rel= " stylesheet " href= " https://esm.sh/graphiql/dist/style.css " />
41+ <link
42+ rel= " stylesheet "
43+ href= " https://esm.sh/@graphiql/plugin-explorer/dist/style.css "
44+ />
45+ <!--
46+ * Note:
47+ * The ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file.
48+ * `@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
49+ -->
50+ <script type= " importmap " >
51+ {
52+ " imports " : {
53+ " react " : " https://esm.sh/react@19.1.0 " ,
54+ " react/ " : " https://esm.sh/react@19.1.0/ " ,
5555
56- " react-dom " : " https://esm.sh/react-dom@19.1.0 " ,
57- " react-dom/ " : " https://esm.sh/react-dom@19.1.0/ " ,
56+ " react-dom " : " https://esm.sh/react-dom@19.1.0 " ,
57+ " react-dom/ " : " https://esm.sh/react-dom@19.1.0/ " ,
5858
59- " graphiql " : " https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql " ,
60- " graphiql/ " : " https://esm.sh/graphiql/ " ,
61- " @graphiql/plugin-explorer " : " https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql " ,
62- " @graphiql/react " : " https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid " ,
59+ " graphiql " : " https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql " ,
60+ " graphiql/ " : " https://esm.sh/graphiql/ " ,
61+ " @graphiql/plugin-explorer " : " https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql " ,
62+ " @graphiql/react " : " https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid " ,
6363
64- " @graphiql/toolkit " : " https://esm.sh/@graphiql/toolkit?standalone&external=graphql " ,
65- " graphql " : " https://esm.sh/graphql@16.11.0 " ,
66- " @emotion/is-prop-valid " : " data:text/javascript, "
67- }
68- }
69- </script>
70- <script type= " module " >
71- import React from 'react';
72- import ReactDOM from 'react-dom/client';
73- import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
74- import { createGraphiQLFetcher } from '@graphiql/toolkit';
75- import { explorerPlugin } from '@graphiql/plugin-explorer';
76- import 'graphiql/setup-workers/esm.sh';
64+ " @graphiql/toolkit " : " https://esm.sh/@graphiql/toolkit?standalone&external=graphql " ,
65+ " graphql " : " https://esm.sh/graphql@16.11.0 " ,
66+ " @emotion/is-prop-valid " : " data:text/javascript, "
67+ }
68+ }
69+ </script>
70+ <script type= " module " >
71+ import React from 'react';
72+ import ReactDOM from 'react-dom/client';
73+ import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
74+ import { createGraphiQLFetcher } from '@graphiql/toolkit';
75+ import { explorerPlugin } from '@graphiql/plugin-explorer';
76+ import 'graphiql/setup-workers/esm.sh';
7777
78- const fetcher = createGraphiQLFetcher({ \( graphiQLFetcherArgs) });
79- const plugins = [HISTORY_PLUGIN, explorerPlugin()];
78+ const fetcher = createGraphiQLFetcher({ \( graphiQLFetcherArgs) });
79+ const plugins = [HISTORY_PLUGIN, explorerPlugin()];
8080
81- function App() {
82- return React.createElement(GraphiQL, {
83- fetcher,
84- plugins,
85- defaultEditorToolsVisibility: true,
86- });
87- }
81+ function App() {
82+ return React.createElement(GraphiQL, {
83+ fetcher,
84+ plugins,
85+ defaultEditorToolsVisibility: true,
86+ });
87+ }
8888
89- const container = document.getElementById('graphiql');
90- const root = ReactDOM.createRoot(container);
91- root.render(React.createElement(App));
92- </script>
93- </head>
94- <body>
95- <div id= " graphiql " >
96- <div class= " loading " >Loading…</div>
97- </div>
98- </body>
99- </html>
100- """
89+ const container = document.getElementById('graphiql');
90+ const root = ReactDOM.createRoot(container);
91+ root.render(React.createElement(App));
92+ </script>
93+ </head>
94+ <body>
95+ <div id= " graphiql " >
96+ <div class= " loading " >Loading…</div>
97+ </div>
98+ </body>
99+ </html>
100+ """
101101 }
102102}
0 commit comments