leangen · jamesdh · May 30, 2024 · May 30, 2024
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@
 GraphQL SPQR Spring Boot starter aims to make it dead simple to add a GraphQL API to any Spring Boot project.
  * Add `@GraphQLApi` to any Spring managed component, and you're good to go 🚀
  * GraphQL endpoint available at `/graphql` by default
- * GraphQL Playground IDE (if enabled, see the properties below) available at `/ide`
+ * GraphiQL (if enabled, see the properties below) available at `/gui`
  * Fully customizable in seconds by providing simple beans (any SPQR SPI can be exposed as a bean)
 
 ## Project setup / Dependencies
@@ -230,7 +230,7 @@ To do this SPQR uses `TypeInfoGenerator` on a global level. When using this star
 | graphql.spqr.gui.endpoint | /gui |
 | graphql.spqr.gui.target-endpoint | n/a |
 | graphql.spqr.gui.target-ws-endpoint | n/a |
-| graphql.spqr.gui.page-title | GraphQL Playground |
+| graphql.spqr.gui.page-title | GraphiQL |
 
 ### Customize mapping of GraphQL values to Java values
 

diff --git a/...oconfigure/src/main/java/io/leangen/graphql/spqr/spring/autoconfigure/SpqrProperties.java b/...oconfigure/src/main/java/io/leangen/graphql/spqr/spring/autoconfigure/SpqrProperties.java
@@ -279,7 +279,7 @@ public static class Gui {
         private String endpoint = DEFAULT_GUI_ENDPOINT;
         private String targetEndpoint;
         private String targetWsEndpoint;
-        private String pageTitle = "GraphQL Playground";
+        private String pageTitle = "GraphiQL";
 
         public boolean isEnabled() {
             return enabled;

diff --git a/...ng-boot-autoconfigure/src/main/java/io/leangen/graphql/spqr/spring/web/GuiController.java b/...ng-boot-autoconfigure/src/main/java/io/leangen/graphql/spqr/spring/web/GuiController.java
@@ -22,7 +22,7 @@ public GuiController(SpqrProperties config) {
     @ResponseBody
     @RequestMapping(value = "${graphql.spqr.gui.endpoint:/gui}", produces = "text/html; charset=utf-8")
     public String gui() throws IOException {
-        return StreamUtils.copyToString(new ClassPathResource("playground.html").getInputStream(), StandardCharsets.UTF_8)
+        return StreamUtils.copyToString(new ClassPathResource("graphiql.html").getInputStream(), StandardCharsets.UTF_8)
                 .replace("${pageTitle}", config.getGui().getPageTitle())
                 .replace("${graphQLEndpoint}", config.getGui().getTargetEndpoint())
                 .replace("${webSocketEndpoint}", config.getGui().getTargetWsEndpoint());

diff --git a/graphql-spqr-spring-boot-autoconfigure/src/main/resources/graphiql.html b/graphql-spqr-spring-boot-autoconfigure/src/main/resources/graphiql.html
@@ -0,0 +1,83 @@
+<!--
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  Copied from https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html
+-->
+<!doctype html>
+<html lang="en">
+<head>
+    <title>${pageTitle}</title>
+    <style>
+        body {
+            height: 100%;
+            margin: 0;
+            width: 100%;
+            overflow: hidden;
+        }
+
+        #graphiql {
+            height: 100vh;
+        }
+    </style>
+    <!--
+      This GraphiQL example depends on Promise and fetch, which are available in
+      modern browsers, but can be "polyfilled" for older browsers.
+      GraphiQL itself depends on React DOM.
+      If you do not want to rely on a CDN, you can host these files locally or
+      include them directly in your favored resource bundler.
+    -->
+    <script
+        crossorigin
+        src="https://unpkg.com/react@18/umd/react.development.js"
+    ></script>
+    <script
+        crossorigin
+        src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
+    ></script>
+    <!--
+      These two files can be found in the npm module, however you may wish to
+      copy them directly into your environment, or perhaps include them in your
+      favored resource bundler.
+     -->
+    <script
+        src="https://unpkg.com/graphiql/graphiql.min.js"
+        type="application/javascript"
+    ></script>
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <!--
+      These are imports for the GraphIQL Explorer plugin.
+     -->
+    <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"
+    />
+</head>
+
+<body>
+<div id="graphiql">Loading...</div>
+<script>
+    const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+    const fetcher = GraphiQL.createFetcher({
+        url: '${graphQLEndpoint}',
+        subscriptionUrl: '${webSocketEndpoint}',
+    });
+    const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
+    root.render(
+        React.createElement(GraphiQL, {
+            fetcher,
+            defaultEditorToolsVisibility: true,
+            plugins: [explorerPlugin],
+        }),
+    );
+</script>
+</body>
+</html>
diff --git a/graphql-spqr-spring-boot-autoconfigure/src/main/resources/playground.html b/graphql-spqr-spring-boot-autoconfigure/src/main/resources/playground.html