Skip to content

Commit 32b6d86

Browse files
NaramsimNaramsim
committed
feat: update editor/show deprecation
1 parent 093056c commit 32b6d86

File tree

1 file changed

+63
-37
lines changed

1 file changed

+63
-37
lines changed

‎index.html‎

Lines changed: 63 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
<!--
2-
* Copyright (c) 2021 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-
-->
81
<!doctype html>
92
<html lang="en">
103

@@ -62,12 +55,23 @@
6255
background-color: #0000 !important;
6356
}
6457
</style>
65-
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
66-
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
67-
<script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
68-
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
69-
<script src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js" crossorigin></script>
70-
<link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />
58+
<link rel="stylesheet" href="https://esm.sh/[email protected]/dist/style.css"/>
59+
<link rel="stylesheet" href="https://esm.sh/@graphiql/[email protected]/dist/style.css"/>
60+
<script type="importmap">
61+
{
62+
"imports": {
63+
"react": "https://esm.sh/[email protected]",
64+
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
65+
"react-dom": "https://esm.sh/[email protected]",
66+
"react-dom/client": "https://esm.sh/[email protected]/client",
67+
"graphiql": "https://esm.sh/[email protected]?standalone&external=react,react-dom,@graphiql/react,graphql",
68+
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/[email protected]?standalone&external=react,@graphiql/react,graphql",
69+
"@graphiql/react": "https://esm.sh/@graphiql/[email protected]?standalone&external=react,react-dom,graphql",
70+
"@graphiql/toolkit": "https://esm.sh/@graphiql/[email protected]?standalone&external=graphql",
71+
"graphql": "https://esm.sh/[email protected]"
72+
}
73+
}
74+
</script>
7175
</head>
7276

7377
<body>
@@ -76,26 +80,44 @@
7680
<a href="https://pokeapi.co">PokeAPI</a> GraphiQL interface
7781
</div>
7882
<div>
79-
A rate limit of 200 calls per hour is enforced
83+
This console is getting deprecated in favor of <a href="https://graphql.pokeapi.co/v1beta/console">v1beta</a>
8084
</div>
8185
</div>
8286
<div id="graphiql">Loading...</div>
83-
<script>
84-
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
85-
const fetcher = GraphiQL.createFetcher({
87+
<script type="module">
88+
import React from 'react';
89+
import ReactDOM from 'react-dom/client';
90+
import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
91+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
92+
import { explorerPlugin } from '@graphiql/plugin-explorer';
93+
import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
94+
import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
95+
import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';
96+
97+
globalThis.MonacoEnvironment = {
98+
getWorker(_workerId, label) {
99+
switch (label) {
100+
case 'json':
101+
return createJSONWorker();
102+
case 'graphql':
103+
return createGraphQLWorker();
104+
}
105+
return createEditorWorker();
106+
},
107+
};
108+
const fetcher = createGraphiQLFetcher({
86109
url: 'https://beta.pokeapi.co/graphql/v1beta',
87110
headers: { 'X-Method-Used': 'graphiql-pokeapi-console' },
88111
});
89-
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
90-
root.render(
91-
React.createElement(GraphiQL, {
92-
fetcher,
93-
defaultEditorToolsVisibility: true,
94-
plugins: [explorerPlugin],
95-
explorerIsOpen: true,
96-
visiblePlugin: explorerPlugin,
97-
confirmCloseTab: function () { return true },
98-
defaultQuery: `
112+
const plugins = [HISTORY_PLUGIN, explorerPlugin()];
113+
114+
function App() {
115+
return React.createElement(GraphiQL, {
116+
fetcher: fetcher,
117+
defaultEditorToolsVisibility: true,
118+
//initialHeaders: initialHeaders,
119+
plugins: plugins,
120+
defaultQuery: `
99121
# Using this tool you can try out GraphQL queries against our API
100122
# https://beta.pokeapi.co/graphql/v1beta
101123
#
@@ -124,17 +146,21 @@
124146
125147
# Find the documentation here
126148
# https://pokeapi.co/docs/graphql`
127-
},
128-
React.createElement(GraphiQL.Logo,
129-
{},
130-
React.createElement('img', {
131-
src: 'https://raw.githubusercontent.com/PokeAPI/media/refs/heads/master/logo/pokeapi_64_min.png',
132-
alt: 'pokeapi'
133-
}
134-
)
149+
},
150+
React.createElement(GraphiQL.Logo,
151+
{},
152+
React.createElement('img', {
153+
src: 'https://raw.githubusercontent.com/PokeAPI/media/refs/heads/master/logo/pokeapi_64_min.png',
154+
alt: 'pokeapi'
155+
}
135156
)
136-
),
137-
);
157+
));
158+
}
159+
160+
const container = document.getElementById('graphiql');
161+
const root = ReactDOM.createRoot(container);
162+
root.render(React.createElement(App));
163+
138164
</script>
139165
</body>
140166

0 commit comments

Comments
 (0)