Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit89bbf41

Browse files
committed
Update GraphiQL install
1 parentf4e284c commit89bbf41

File tree

1 file changed

+68
-56
lines changed

1 file changed

+68
-56
lines changed
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
<htmllang="en">
1010
<head>
11-
<title>GraphiQL</title>
11+
<metacharset="UTF-8"/>
12+
<metaname="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-
<linkrel="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+
<linkrel="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+
<scripttype="importmap">
42+
{
43+
"imports":{
44+
"react":"https://esm.sh/react@19.1.0",
45+
"react/":"https://esm.sh/react@19.1.0/",
46+
47+
"react-dom":"https://esm.sh/react-dom@19.1.0",
48+
"react-dom/":"https://esm.sh/react-dom@19.1.0/",
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/graphql@16.11.0",
57+
"@emotion/is-prop-valid":"data:text/javascript,"
58+
}
59+
}
60+
</script>
61+
<scripttype="module">
62+
importReactfrom'react';
63+
importReactDOMfrom'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+
constfetcher=createGraphiQLFetcher({
70+
url:'https://confetti-app.dev/graphql',
71+
});
72+
constplugins=[HISTORY_PLUGIN,explorerPlugin()];
6273

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

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp