|
8 | 8 | <!doctype html> |
9 | 9 | <html lang="en"> |
10 | 10 | <head> |
11 | | - <title>GraphiQL</title> |
| 11 | + <meta charset="UTF-8" /> |
| 12 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 13 | + <title>GraphiQL 4 with React 19 and GraphiQL Explorer</title> |
12 | 14 | <style> |
13 | 15 | body { |
14 | | - height: 100%; |
15 | 16 | margin: 0; |
16 | | - width: 100%; |
17 | | - overflow: hidden; |
| 17 | + overflow: hidden; /* in Firefox */ |
18 | 18 | } |
19 | 19 |
|
20 | 20 | #graphiql { |
21 | | - height: 100vh; |
| 21 | + height: 100dvh; |
22 | 22 | } |
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/[email protected]/graphiql.min.js" |
46 | | - type="application/javascript" |
47 | | - ></script> |
48 | | - <link rel=" stylesheet" href=" https://unpkg.com/[email protected]/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> |
56 | 23 |
|
| 24 | + .loading { |
| 25 | + height: 100%; |
| 26 | + display: flex; |
| 27 | + align-items: center; |
| 28 | + justify-content: center; |
| 29 | + font-size: 4rem; |
| 30 | + } |
| 31 | + </style> |
57 | 32 | <link |
58 | 33 | rel="stylesheet" |
59 | | - href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" |
| 34 | + href="https://esm.sh/graphiql@4.0.0/dist/style.css" |
60 | 35 | /> |
61 | | - </head> |
| 36 | + <link |
| 37 | + rel="stylesheet" |
| 38 | + href=" https://esm.sh/@graphiql/[email protected]/dist/style.css" |
| 39 | + /> |
| 40 | + <!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. --> |
| 41 | + <script type="importmap"> |
| 42 | + { |
| 43 | + "imports": { |
| 44 | + "react": "https://esm.sh/[email protected]", |
| 45 | + "react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime", |
62 | 46 |
|
63 | | - <body> |
64 | | - <div id="graphiql">Loading...</div> |
65 | | - <script> |
66 | | -<!-- inject --> |
67 | | - const root = ReactDOM.createRoot(document.getElementById('graphiql')); |
68 | | - const fetcher = GraphiQL.createFetcher({ |
69 | | - url: JUNIPER_URL, |
70 | | - subscriptionUrl: normalizeSubscriptionEndpoint(JUNIPER_URL, JUNIPER_SUBSCRIPTIONS_URL) |
| 47 | + "react-dom": "https://esm.sh/[email protected]", |
| 48 | + "react-dom/client": "https://esm.sh/[email protected]/client", |
| 49 | + |
| 50 | + "graphiql": "https://esm.sh/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react", |
| 51 | + "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql", |
| 52 | + "@graphiql/react": "https://esm.sh/@graphiql/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit", |
| 53 | + |
| 54 | + "@graphiql/toolkit": "https://esm.sh/@graphiql/[email protected]?standalone&external=graphql", |
| 55 | + "graphql": "https://esm.sh/[email protected]" |
| 56 | + } |
| 57 | + } |
| 58 | + </script> |
| 59 | + <script type="module"> |
| 60 | + // Import React and ReactDOM |
| 61 | + import React from 'react'; |
| 62 | + import ReactDOM from 'react-dom/client'; |
| 63 | + // Import GraphiQL and the Explorer plugin |
| 64 | + import { GraphiQL } from 'graphiql'; |
| 65 | + import { createGraphiQLFetcher } from '@graphiql/toolkit'; |
| 66 | + import { explorerPlugin } from '@graphiql/plugin-explorer'; |
| 67 | + |
| 68 | + const fetcher = createGraphiQLFetcher({ |
| 69 | + url: 'https://countries.trevorblades.com', |
71 | 70 | }); |
72 | | - const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin(); |
73 | | - root.render( |
74 | | - React.createElement(GraphiQL, { |
| 71 | + const explorer = explorerPlugin(); |
| 72 | + |
| 73 | + function App() { |
| 74 | + return React.createElement(GraphiQL, { |
75 | 75 | fetcher, |
76 | | - defaultEditorToolsVisibility: true, |
77 | | - plugins: [explorerPlugin], |
78 | | - }), |
79 | | - ); |
| 76 | + plugins: [explorer], |
| 77 | + }); |
| 78 | + } |
| 79 | + |
| 80 | + const container = document.getElementById('graphiql'); |
| 81 | + const root = ReactDOM.createRoot(container); |
| 82 | + root.render(React.createElement(App)); |
80 | 83 | </script> |
| 84 | + </head> |
| 85 | + <body> |
| 86 | + <div id="graphiql"> |
| 87 | + <div class="loading">Loading…</div> |
| 88 | + </div> |
81 | 89 | </body> |
82 | 90 | </html> |
0 commit comments