Skip to content

Commit e585ceb

Browse files
duncanmccleanduncanmcclean
committed
Update GraphiQL
1 parent d3f4f70 commit e585ceb

1 file changed

Lines changed: 84 additions & 40 deletions

File tree

‎resources/views/graphql/graphiql.blade.php‎

Lines changed: 84 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,97 @@
1-
<!DOCTYPE html>
2-
<html>
1+
<!doctype html>
2+
<html lang="en">
33
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
46
<title>GraphiQL ‹ Statamic</title>
57
<style>
68
body {
7-
height: 100%;
89
margin: 0;
9-
width: 100%;
10-
overflow: hidden;
10+
overflow: hidden; /* in Firefox */
1111
}
1212
1313
#graphiql {
14-
height: 100vh;
14+
height: 100dvh;
15+
}
16+
17+
.loading {
18+
height: 100%;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
font-size: 4rem;
1523
}
1624
</style>
17-
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
18-
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
19-
<script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
20-
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
21-
<script src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js" crossorigin></script>
22-
<link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />
23-
</head>
24-
<body>
25-
<div id="graphiql">Loading...</div>
26-
<script>
27-
var xcsrfToken = null;
28-
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
29-
const fetcher = GraphiQL.createFetcher({
30-
url: '{{ $url }}',
31-
headers: {
32-
Accept: 'application/json',
33-
'Content-Type': 'application/json',
34-
'x-csrf-token': xcsrfToken || '{{ csrf_token() }}'
35-
},
36-
fetch: async (fetchURL, fetchOptions) => {
37-
return await fetch(fetchURL, fetchOptions).then((response) => {
38-
xcsrfToken = response.headers.get('x-csrf-token');
39-
return response;
40-
});
41-
},
25+
<link
26+
rel="stylesheet"
27+
href="https://esm.sh/graphiql@4.0.0/dist/style.css"
28+
/>
29+
<link
30+
rel="stylesheet"
31+
href="https://esm.sh/@graphiql/plugin-explorer@4.0.0/dist/style.css"
32+
/>
33+
<!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
34+
<script type="importmap">
35+
{
36+
"imports": {
37+
"react": "https://esm.sh/react@19.1.0",
38+
"react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",
39+
40+
"react-dom": "https://esm.sh/react-dom@19.1.0",
41+
"react-dom/client": "https://esm.sh/react-dom@19.1.0/client",
42+
43+
"graphiql": "https://esm.sh/graphiql@4.0.0?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react",
44+
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@4.0.0?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql",
45+
"@graphiql/react": "https://esm.sh/@graphiql/react@0.30.0?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit",
46+
47+
"@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@0.11.2?standalone&external=graphql",
48+
"graphql": "https://esm.sh/graphql@16.11.0"
49+
}
50+
}
51+
</script>
52+
<script type="module">
53+
// Import React and ReactDOM
54+
import React from 'react';
55+
import ReactDOM from 'react-dom/client';
56+
// Import GraphiQL and the Explorer plugin
57+
import { GraphiQL } from 'graphiql';
58+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
59+
import { explorerPlugin } from '@graphiql/plugin-explorer';
60+
61+
var xcsrfToken = null;
62+
63+
const fetcher = createGraphiQLFetcher({
64+
url: '{{ $url }}',
65+
headers: {
66+
Accept: 'application/json',
67+
'Content-Type': 'application/json',
68+
'x-csrf-token': xcsrfToken || '{{ csrf_token() }}',
69+
},
70+
fetch: async (fetchURL, fetchOptions) => {
71+
return await fetch(fetchURL, fetchOptions).then((response) => {
72+
xcsrfToken = response.headers.get('x-csrf-token');
73+
return response;
74+
});
75+
},
76+
});
77+
78+
const explorer = explorerPlugin();
79+
80+
function App() {
81+
return React.createElement(GraphiQL, {
82+
fetcher,
83+
plugins: [explorer],
4284
});
43-
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
44-
root.render(
45-
React.createElement(GraphiQL, {
46-
fetcher,
47-
defaultEditorToolsVisibility: true,
48-
plugins: [explorerPlugin],
49-
}),
50-
);
85+
}
86+
87+
const container = document.getElementById('graphiql');
88+
const root = ReactDOM.createRoot(container);
89+
root.render(React.createElement(App));
5190
</script>
91+
</head>
92+
<body>
93+
<div id="graphiql">
94+
<div class="loading">Loading…</div>
95+
</div>
5296
</body>
53-
</html>
97+
</html>

0 commit comments

Comments
 (0)