Skip to content

Commit 2b76f4d

Browse files
RazzmatazzzRazzmatazzz
authored
Merge pull request #386 from the-hideout/fix-playground
Fix playground
2 parents 331e3cd + 100abeb commit 2b76f4d

File tree

1 file changed

+75
-51
lines changed

1 file changed

+75
-51
lines changed

‎handlers/graphiql.mjs

Lines changed: 75 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const defaultQuery = `# Welcome to the Tarkov.dev API Playground
3232

3333
const html = baseEndpoint => `
3434
<!--
35-
* Copyright (c) 2021 GraphQL Contributors
35+
* Copyright (c) 2025 GraphQL Contributors
3636
* All rights reserved.
3737
*
3838
* This source code is licensed under the license found in the
@@ -41,76 +41,100 @@ const html = baseEndpoint => `
4141
<!doctype html>
4242
<html lang="en">
4343
<head>
44+
<meta charset="UTF-8" />
45+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4446
<title>Tarkov.dev API Playground</title>
4547
<link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png" />
4648
<style>
4749
body {
48-
height: 100%;
4950
margin: 0;
50-
width: 100%;
51-
overflow: hidden;
5251
}
5352
5453
#graphiql {
55-
height: 100vh;
54+
height: 100dvh;
5655
}
57-
</style>
58-
<!--
59-
This GraphiQL example depends on Promise and fetch, which are available in
60-
modern browsers, but can be "polyfilled" for older browsers.
61-
GraphiQL itself depends on React DOM.
62-
If you do not want to rely on a CDN, you can host these files locally or
63-
include them directly in your favored resource bundler.
64-
-->
65-
<script
66-
crossorigin
67-
src="https://unpkg.com/react@18/umd/react.development.js"
68-
></script>
69-
<script
70-
crossorigin
71-
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
72-
></script>
73-
<!--
74-
These two files can be found in the npm module, however you may wish to
75-
copy them directly into your environment, or perhaps include them in your
76-
favored resource bundler.
77-
-->
78-
<script
79-
src="https://unpkg.com/graphiql/graphiql.min.js"
80-
type="application/javascript"
81-
></script>
82-
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
83-
<!--
84-
These are imports for the GraphIQL Explorer plugin.
85-
-->
86-
<script
87-
src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
88-
crossorigin
89-
></script>
9056
57+
.loading {
58+
height: 100%;
59+
display: flex;
60+
align-items: center;
61+
justify-content: center;
62+
font-size: 4rem;
63+
}
64+
</style>
65+
<link rel="stylesheet" href="https://esm.sh/graphiql/dist/style.css" />
9166
<link
9267
rel="stylesheet"
93-
href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
68+
href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css"
9469
/>
95-
</head>
70+
<!-- Note: the ?standalone flag bundles the module along with all of its \`dependencies\`, excluding \`peerDependencies\`, into a single JavaScript file. -->
71+
<script type="importmap">
72+
{
73+
"imports": {
74+
"react": "https://esm.sh/[email protected]",
75+
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
9676
97-
<body>
98-
<div id="graphiql">Loading...</div>
99-
<script>
100-
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
101-
const fetcher = GraphiQL.createFetcher({
77+
"react-dom": "https://esm.sh/[email protected]",
78+
"react-dom/client": "https://esm.sh/[email protected]/client",
79+
80+
"graphiql": "https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql",
81+
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql",
82+
"@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql",
83+
84+
"@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
85+
"graphql": "https://esm.sh/[email protected]"
86+
}
87+
}
88+
</script>
89+
<script type="module">
90+
// Import React and ReactDOM
91+
import React from 'react';
92+
import ReactDOM from 'react-dom/client';
93+
// Import GraphiQL and the Explorer plugin
94+
import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
95+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
96+
import { explorerPlugin } from '@graphiql/plugin-explorer';
97+
98+
import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
99+
import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
100+
import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';
101+
102+
globalThis.MonacoEnvironment = {
103+
getWorker(_workerId, label) {
104+
console.info('MonacoEnvironment.getWorker', { label });
105+
switch (label) {
106+
case 'json':
107+
return createJSONWorker();
108+
case 'graphql':
109+
return createGraphQLWorker();
110+
}
111+
return createEditorWorker();
112+
},
113+
};
114+
115+
const fetcher = createGraphiQLFetcher({
102116
url: '${baseEndpoint}',
103117
});
104-
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
105-
root.render(
106-
React.createElement(GraphiQL, {
118+
const plugins = [HISTORY_PLUGIN, explorerPlugin()];
119+
120+
function App() {
121+
return React.createElement(GraphiQL, {
107122
fetcher,
123+
plugins,
108124
defaultEditorToolsVisibility: true,
109-
plugins: [explorerPlugin],
110125
defaultQuery: \`${defaultQuery}\`,
111-
}),
112-
);
126+
});
127+
}
128+
129+
const container = document.getElementById('graphiql');
130+
const root = ReactDOM.createRoot(container);
131+
root.render(React.createElement(App));
113132
</script>
133+
</head>
134+
<body>
135+
<div id="graphiql">
136+
<div class="loading">Loading…</div>
137+
</div>
114138
</body>
115139
</html>
116140
`

0 commit comments

Comments
 (0)