Spring/spring-graphql
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Upgrade to GraphiQL 4.0.0

Browse Source 
Closes gh-1209
This commit is contained in:
Brian Clozel
2025-05-12 11:50:14 +02:00
parent 719281175f
commit ce9472fdd9
2 changed files with 60 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
spring-graphql-docs/modules/ROOT/pages/graphiql.adoc
View File

@@ -6,7 +6,7 @@ It is very popular amongst developers as it makes it easy to explore and interac
During development, a stock GraphiQL integration is often enough to help developers work on an API.
In production, applications can require a custom GraphiQL build, that ships with a company logo or specific authentication support.
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.
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.
Spring Boot applications can easily {spring-boot-ref-docs}/reference/web/spring-graphql.html#web.graphql.graphiql[enable this page with a configuration property].
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.

93
spring-graphql/src/main/resources/graphiql/index.html
View File

@@ -4,47 +4,72 @@
<title>GraphiQL</title>
<style>
body {
height: 100%;
margin: 0;
width: 100%;
overflow: hidden;
}
#graphiql {
height: 100vh;
height: 100dvh;
}
.loading {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
</style>
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
<script src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js" crossorigin></script>
<link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"/>
<link rel="stylesheet" href="https://esm.sh/graphiql@4.0.0/dist/style.css"/>
<link rel="stylesheet" href="https://esm.sh/@graphiql/plugin-explorer@4.0.0/dist/style.css"/>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@19.1.0",
"react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",
"react-dom": "https://esm.sh/react-dom@19.1.0",
"react-dom/client": "https://esm.sh/react-dom@19.1.0/client",
"graphiql": "https://esm.sh/graphiql@4.0.0?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react",
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@4.0.0?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql",
"@graphiql/react": "https://esm.sh/@graphiql/react@0.30.0?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit",
"@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@0.11.2?standalone&external=graphql",
"graphql": "https://esm.sh/graphql@16.11.0"
}
}
</script>
<script type="module">
import React from 'react';
import ReactDOM from 'react-dom/client';
import { GraphiQL } from 'graphiql';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { explorerPlugin } from '@graphiql/plugin-explorer';
const params = new URLSearchParams(window.location.search);
const path = params.get("path") || "/graphql";
const url = `${location.protocol}//${location.host}${path}`;
const wsPath = params.get("wsPath") || "/graphql";
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
const subscriptionUrl = `${wsProtocol}//${location.host}${wsPath}`;
const gqlFetcher = createGraphiQLFetcher({'url': url, 'subscriptionUrl': subscriptionUrl});
const explorer = explorerPlugin();
const xsrfToken = document.cookie.match(new RegExp('(?:^| )XSRF-TOKEN=([^;]+)'));
const headers = xsrfToken ? `{ "X-XSRF-TOKEN" : "${ xsrfToken[1] }" }` : `{}`;
function App() {
return React.createElement(GraphiQL, {
fetcher: gqlFetcher,
defaultVariableEditorOpen: true,
headerEditorEnabled: true,
shouldPersistHeaders: true,
headers: headers,
plugins: [explorer],
});
}
const container = document.getElementById('graphiql');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));
</script>
</head>
<body>
<div id="graphiql">Loading...</div>
<script>
const params = new URLSearchParams(window.location.search);
const path = params.get("path") || "/graphql";
const url = `${location.protocol}//${location.host}${path}`;
const wsPath = params.get("wsPath") || "/graphql";
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
const subscriptionUrl = `${wsProtocol}//${location.host}${wsPath}`;
const gqlFetcher = GraphiQL.createFetcher({'url': url, 'subscriptionUrl': subscriptionUrl});
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
const xsrfToken = document.cookie.match(new RegExp('(?:^| )XSRF-TOKEN=([^;]+)'));
const headers = xsrfToken ? `{ "X-XSRF-TOKEN" : "${ xsrfToken[1] }" }` : `{}`;
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: gqlFetcher,
defaultVariableEditorOpen: true,
headerEditorEnabled: true,
shouldPersistHeaders: true,
headers: headers,
plugins: [explorerPlugin]
}),
document.getElementById('graphiql'),
);
</script>
<div id="graphiql"><div class="loading">Loading...</div></div>
</body>
</html>