GraphiQL separate module

graphql-spring-boot-starter/src/main/java/org/springframework/graphql/boot/GraphQlProperties.java

@@ -25,6 +25,7 @@
  * {@link ConfigurationProperties properties} for Spring GraphQL.
  *
  * @author Brian Clozel
+ * @author Janne Valkealahti
  * @since 1.0.0
  */
 @ConfigurationProperties(prefix = "spring.graphql")
@@ -133,6 +134,11 @@ public static class GraphiQL {
 		 */
 		private boolean enabled = true;
 
+		/**
+		 * GraphiQL logo string
+		 */
+		private String logo = "GraphiQL";
+
 		public String getPath() {
 			return this.path;
 		}
@@ -148,6 +154,14 @@ public boolean isEnabled() {
 		public void setEnabled(boolean enabled) {
 			this.enabled = enabled;
 		}
+
+		public String getLogo() {
+			return logo;
+		}
+
+		public void setLogo(String logo) {
+			this.logo = logo;
+		}
 	}
 
 	public static class Websocket {

graphql-spring-boot-starter/src/main/java/org/springframework/graphql/boot/GraphQlWebFluxAutoConfiguration.java

@@ -17,6 +17,8 @@
 package org.springframework.graphql.boot;
 
 import java.util.Collections;
+import java.util.HashMap;
+import java.util.Map;
 import java.util.stream.Collectors;
 
 import graphql.GraphQL;
@@ -65,6 +67,7 @@
  * WebFlux.
  *
  * @author Brian Clozel
+ * @author Janne Valkealahti
  * @since 1.0.0
  */
 @Configuration(proxyBeanMethods = false)
@@ -108,9 +111,13 @@ public RouterFunction<ServerResponse> graphQlEndpoint(GraphQlHttpHandler handler
 						handler::handleRequest);
 
 		if (properties.getGraphiql().isEnabled()) {
-			Resource resource = resourceLoader.getResource("classpath:graphiql/index.html");
-			GraphiQlHandler graphiQlHandler = new GraphiQlHandler(graphQLPath, resource);
-			builder = builder.GET(properties.getGraphiql().getPath(), graphiQlHandler::handleRequest);
+			Resource htmlResource = resourceLoader.getResource("classpath:graphiql/index.html");
+			Resource jsResource = resourceLoader.getResource("classpath:graphiql/main.js");
+			Map<String, String> config = new HashMap<>();
+			config.put("LOGO", properties.getGraphiql().getLogo());
+			config.put("PATH", properties.getPath());
+			GraphiQlHandler graphiQLHandler = new GraphiQlHandler(htmlResource, jsResource, config);
+			builder = builder.GET(properties.getGraphiql().getPath() + "/**", graphiQLHandler::handleRequest);
 		}
 
 		if (properties.getSchema().getPrinter().isEnabled()) {

graphql-spring-boot-starter/src/main/java/org/springframework/graphql/boot/GraphQlWebMvcAutoConfiguration.java

@@ -17,6 +17,7 @@
 package org.springframework.graphql.boot;
 
 import java.util.Collections;
+import java.util.HashMap;
 import java.util.Map;
 import java.util.stream.Collectors;
 
@@ -72,6 +73,7 @@
  * Spring MVC.
  *
  * @author Brian Clozel
+ * @author Janne Valkealahti
  * @since 1.0.0
  */
 @Configuration(proxyBeanMethods = false)
@@ -117,9 +119,15 @@ public RouterFunction<ServerResponse> graphQlRouterFunction(GraphQlHttpHandler h
 						handler::handleRequest);
 
 		if (properties.getGraphiql().isEnabled()) {
-			Resource resource = resourceLoader.getResource("classpath:graphiql/index.html");
-			GraphiQlHandler graphiQLHandler = new GraphiQlHandler(graphQLPath, resource);
-			builder = builder.GET(properties.getGraphiql().getPath(), graphiQLHandler::handleRequest);
+			// TODO: should we disable graphiql automatically if optional graphiql module
+			//       is not added to a classpath?
+			Resource htmlResource = resourceLoader.getResource("classpath:graphiql/index.html");
+			Resource jsResource = resourceLoader.getResource("classpath:graphiql/main.js");
+			Map<String, String> config = new HashMap<>();
+			config.put("LOGO", properties.getGraphiql().getLogo());
+			config.put("PATH", properties.getPath());
+			GraphiQlHandler graphiQLHandler = new GraphiQlHandler(htmlResource, jsResource, config);
+			builder = builder.GET(properties.getGraphiql().getPath() + "/**", graphiQLHandler::handleRequest);
 		}
 
 		if (properties.getSchema().getPrinter().isEnabled()) {

samples/webflux-websocket/build.gradle

@@ -12,6 +12,7 @@ dependencies {
 	implementation 'org.springframework.boot:spring-boot-starter-webflux'
 	implementation 'org.springframework.boot:spring-boot-starter-actuator'
 	developmentOnly 'org.springframework.boot:spring-boot-devtools'
+	runtimeOnly project(':spring-graphql-graphiql')
 	testImplementation project(':spring-graphql-test')
 	testImplementation 'org.springframework.boot:spring-boot-starter-test'
 	testImplementation 'io.projectreactor:reactor-test'

samples/webmvc-http/build.gradle

@@ -16,6 +16,7 @@ dependencies {
 	implementation 'com.querydsl:querydsl-core'
 	implementation 'com.querydsl:querydsl-jpa'
 	developmentOnly 'org.springframework.boot:spring-boot-devtools'
+	runtimeOnly project(':spring-graphql-graphiql')
 	runtimeOnly 'com.h2database:h2'
 	testImplementation project(':spring-graphql-test')
 	testImplementation 'org.springframework:spring-webflux'

settings.gradle

@@ -16,6 +16,7 @@ pluginManagement {
 
 rootProject.name = 'spring-graphql'
 include 'spring-graphql',
+	'spring-graphql-graphiql',
 	'spring-graphql-test',
 	'graphql-spring-boot-starter',
 	'samples:webmvc-http',

spring-graphql-graphiql/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+build
+dist

spring-graphql-graphiql/.prettierrc.json

@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": false,
+  "arrowParens": "avoid",
+  "parser": "typescript"
+}

spring-graphql-graphiql/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  sourceMaps: true,
+  presets: [
+    require.resolve('@babel/preset-env'),
+    require.resolve('@babel/preset-react'),
+    require.resolve('@babel/preset-typescript'),
+  ]
+};

spring-graphql-graphiql/build.gradle

@@ -0,0 +1,21 @@
+plugins {
+	id 'java-library'
+	id "com.github.node-gradle.node" version "2.2.0"
+}
+
+java {
+	sourceCompatibility = JavaVersion.VERSION_1_8
+	targetCompatibility = JavaVersion.VERSION_1_8
+}
+
+node {
+	version = '10.16.3'
+	npmVersion = '6.9.0'
+	download = true
+}
+
+jar.dependsOn 'npm_run_mavenbuild'
+
+jar {
+	from 'dist' into 'graphiql'
+}

spring-graphql-graphiql/index.html.ejs

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <title>Spring GraphQL Explorer</title>
+    <script src="config.js"></script>
+  </head>
+
+  <body>
+    <style>
+      body {
+        padding: 0;
+        margin: 0;
+        min-height: 100vh;
+      }
+      #root {
+        height: 100vh;
+      }
+    </style>
+    <div id="root"></div>
+  </body>
+</html>