Skip to content

Commit ce9472f

Browse files
bclozelbclozel
committed
Upgrade to GraphiQL 4.0.0
Closes gh-1209
1 parent 7192811 commit ce9472f

File tree

2 files changed

+60
-35
lines changed

2 files changed

+60
-35
lines changed

‎spring-graphql-docs/modules/ROOT/pages/graphiql.adoc

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ It is very popular amongst developers as it makes it easy to explore and interac
66
During development, a stock GraphiQL integration is often enough to help developers work on an API.
77
In production, applications can require a custom GraphiQL build, that ships with a company logo or specific authentication support.
88

9-
Spring for GraphQL ships with https://github.com/spring-projects/spring-graphql/blob/main/spring-graphql/src/main/resources/graphiql/index.html[a stock GraphiQL `index.html` page] that uses static resources hosted on the unpkg.com CDN.
9+
Spring for GraphQL ships with https://github.com/spring-projects/spring-graphql/blob/main/spring-graphql/src/main/resources/graphiql/index.html[a stock GraphiQL `index.html` page] that uses static resources hosted on the esm.sh CDN.
1010
Spring Boot applications can easily {spring-boot-ref-docs}/reference/web/spring-graphql.html#web.graphql.graphiql[enable this page with a configuration property].
1111

1212
Your application may need a custom GraphiQL build if it requires a setup that doesn't rely on a CDN, or if you wish to customize the user interface.

‎spring-graphql/src/main/resources/graphiql/index.html

+59-34
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,72 @@
44
<title>GraphiQL</title>
55
<style>
66
body {
7-
height: 100%;
87
margin: 0;
9-
width: 100%;
108
overflow: hidden;
119
}
12-
1310
#graphiql {
14-
height: 100vh;
11+
height: 100dvh;
12+
}
13+
.loading {
14+
height: 100%;
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
font-size: 4rem;
1519
}
1620
</style>
17-
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
18-
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></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"/>
21+
<link rel="stylesheet" href="https://esm.sh/[email protected]/dist/style.css"/>
22+
<link rel="stylesheet" href="https://esm.sh/@graphiql/[email protected]/dist/style.css"/>
23+
<script type="importmap">
24+
{
25+
"imports": {
26+
"react": "https://esm.sh/[email protected]",
27+
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
28+
"react-dom": "https://esm.sh/[email protected]",
29+
"react-dom/client": "https://esm.sh/[email protected]/client",
30+
"graphiql": "https://esm.sh/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react",
31+
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql",
32+
"@graphiql/react": "https://esm.sh/@graphiql/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit",
33+
"@graphiql/toolkit": "https://esm.sh/@graphiql/[email protected]?standalone&external=graphql",
34+
"graphql": "https://esm.sh/[email protected]"
35+
}
36+
}
37+
</script>
38+
<script type="module">
39+
import React from 'react';
40+
import ReactDOM from 'react-dom/client';
41+
import { GraphiQL } from 'graphiql';
42+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
43+
import { explorerPlugin } from '@graphiql/plugin-explorer';
44+
45+
const params = new URLSearchParams(window.location.search);
46+
const path = params.get("path") || "/graphql";
47+
const url = `${location.protocol}//${location.host}${path}`;
48+
const wsPath = params.get("wsPath") || "/graphql";
49+
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
50+
const subscriptionUrl = `${wsProtocol}//${location.host}${wsPath}`;
51+
const gqlFetcher = createGraphiQLFetcher({'url': url, 'subscriptionUrl': subscriptionUrl});
52+
const explorer = explorerPlugin();
53+
const xsrfToken = document.cookie.match(new RegExp('(?:^| )XSRF-TOKEN=([^;]+)'));
54+
const headers = xsrfToken ? `{ "X-XSRF-TOKEN" : "${ xsrfToken[1] }" }` : `{}`;
55+
56+
function App() {
57+
return React.createElement(GraphiQL, {
58+
fetcher: gqlFetcher,
59+
defaultVariableEditorOpen: true,
60+
headerEditorEnabled: true,
61+
shouldPersistHeaders: true,
62+
headers: headers,
63+
plugins: [explorer],
64+
});
65+
}
66+
67+
const container = document.getElementById('graphiql');
68+
const root = ReactDOM.createRoot(container);
69+
root.render(React.createElement(App));
70+
</script>
2371
</head>
2472
<body>
25-
<div id="graphiql">Loading...</div>
26-
<script>
27-
const params = new URLSearchParams(window.location.search);
28-
const path = params.get("path") || "/graphql";
29-
const url = `${location.protocol}//${location.host}${path}`;
30-
const wsPath = params.get("wsPath") || "/graphql";
31-
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
32-
const subscriptionUrl = `${wsProtocol}//${location.host}${wsPath}`;
33-
const gqlFetcher = GraphiQL.createFetcher({'url': url, 'subscriptionUrl': subscriptionUrl});
34-
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
35-
const xsrfToken = document.cookie.match(new RegExp('(?:^| )XSRF-TOKEN=([^;]+)'));
36-
const headers = xsrfToken ? `{ "X-XSRF-TOKEN" : "${ xsrfToken[1] }" }` : `{}`;
37-
ReactDOM.render(
38-
React.createElement(GraphiQL, {
39-
fetcher: gqlFetcher,
40-
defaultVariableEditorOpen: true,
41-
headerEditorEnabled: true,
42-
shouldPersistHeaders: true,
43-
headers: headers,
44-
plugins: [explorerPlugin]
45-
}),
46-
document.getElementById('graphiql'),
47-
);
48-
</script>
73+
<div id="graphiql"><div class="loading">Loading...</div></div>
4974
</body>
5075
</html>

0 commit comments

Comments
 (0)