|
1 | 1 | <!--
|
2 |
| - * Copyright (c) 2021 GraphQL Contributors |
| 2 | + * Copyright (c) 2025 GraphQL Contributors |
3 | 3 | * All rights reserved.
|
4 | 4 | *
|
5 | 5 | * This source code is licensed under the license found in the
|
|
14 | 14 | <style>
|
15 | 15 | body {
|
16 | 16 | margin: 0;
|
17 |
| - overflow: hidden; /* in Firefox */ |
18 | 17 | }
|
19 | 18 |
|
20 | 19 | #graphiql {
|
|
31 | 30 | </style>
|
32 | 31 | <link
|
33 | 32 | rel="stylesheet"
|
34 |
| - href="https://esm.sh/graphiql@4.1.2/dist/style.css" |
| 33 | + href="https://esm.sh/graphiql@5.0.0/dist/style.css" |
35 | 34 | />
|
36 | 35 | <link
|
37 | 36 | rel="stylesheet"
|
38 |
| - href="https://esm.sh/@graphiql/plugin-explorer@4.0.6/dist/style.css" |
| 37 | + href="https://esm.sh/@graphiql/plugin-explorer@5.0.0/dist/style.css" |
39 | 38 | />
|
40 | 39 | <!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
|
41 | 40 | <script type="importmap">
|
|
47 | 46 | "react-dom": "https://esm.sh/[email protected]",
|
48 | 47 | "react-dom/client": "https://esm.sh/[email protected]/client",
|
49 | 48 |
|
50 |
| - "graphiql": "https://esm.sh/graphiql@4.1.2?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react", |
51 |
| - "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@4.0.6?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql", |
52 |
| - "@graphiql/react": "https://esm.sh/@graphiql/react@0.34.1?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit", |
| 49 | + "graphiql": "https://esm.sh/graphiql@5.0.0?standalone&external=react,react-dom,@graphiql/react,graphql", |
| 50 | + "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@5.0.0?standalone&external=react,@graphiql/react,graphql", |
| 51 | + "@graphiql/react": "https://esm.sh/@graphiql/react@0.35.0?standalone&external=react,react-dom,graphql", |
53 | 52 |
|
54 | 53 | "@graphiql/toolkit": "https://esm.sh/@graphiql/[email protected]?standalone&external=graphql",
|
55 | 54 | "graphql": "https://esm.sh/[email protected]"
|
|
62 | 61 | import React from 'react';
|
63 | 62 | import ReactDOM from 'react-dom/client';
|
64 | 63 | // Import GraphiQL and the Explorer plugin
|
65 |
| - import { GraphiQL } from 'graphiql'; |
| 64 | + import { GraphiQL, HISTORY_PLUGIN } from 'graphiql'; |
66 | 65 | import { createGraphiQLFetcher } from '@graphiql/toolkit';
|
67 | 66 | import { explorerPlugin } from '@graphiql/plugin-explorer';
|
68 | 67 |
|
| 68 | + import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker'; |
| 69 | + import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker'; |
| 70 | + import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker'; |
| 71 | + |
| 72 | + globalThis.MonacoEnvironment = { |
| 73 | + getWorker(_workerId, label) { |
| 74 | + console.info('MonacoEnvironment.getWorker', { label }); |
| 75 | + switch (label) { |
| 76 | + case 'json': |
| 77 | + return createJSONWorker(); |
| 78 | + case 'graphql': |
| 79 | + return createGraphQLWorker(); |
| 80 | + } |
| 81 | + return createEditorWorker(); |
| 82 | + }, |
| 83 | + }; |
| 84 | + |
69 | 85 | const fetcher = createGraphiQLFetcher({
|
70 | 86 | url: JUNIPER_URL,
|
71 | 87 | subscriptionUrl: normalizeSubscriptionEndpoint(JUNIPER_URL, JUNIPER_SUBSCRIPTIONS_URL)
|
72 | 88 | });
|
73 |
| - const explorer = explorerPlugin(); |
| 89 | + const plugins = [HISTORY_PLUGIN, explorerPlugin()]; |
74 | 90 |
|
75 | 91 | function App() {
|
76 | 92 | return React.createElement(GraphiQL, {
|
77 | 93 | fetcher,
|
78 |
| - plugins: [explorer], |
| 94 | + plugins, |
| 95 | + defaultEditorToolsVisibility: true, |
79 | 96 | });
|
80 | 97 | }
|
81 | 98 |
|
|
0 commit comments