Introduce GraphiQL integration

This commit adds a very simple graphiQL integration: we're shipping the
project with a sample graphiQL `index.html` page that's relying on CDNs
to display the explorer.
We're also plugging in that resource at the graphQL endpoint location,
responding to GET requests. This is not a problem since for now we're
only considering POST requests to the endpoint for actual queries.

Closes spring-iogh-12

spring-graphql-web/src/main/java/org/springframework/boot/graphql/WebFluxGraphQLAutoConfiguration.java

@@ -26,13 +26,15 @@
 import org.springframework.boot.autoconfigure.condition.ConditionalOnWebApplication;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
+import org.springframework.core.io.ResourceLoader;
 import org.springframework.graphql.WebFluxGraphQLHandler;
 import org.springframework.http.MediaType;
 import org.springframework.web.reactive.function.server.RouterFunction;
 import org.springframework.web.reactive.function.server.RouterFunctions;
 import org.springframework.web.reactive.function.server.ServerResponse;
 
 import static org.springframework.web.reactive.function.server.RequestPredicates.accept;
+import static org.springframework.web.reactive.function.server.RequestPredicates.contentType;
 
 @Configuration
 @ConditionalOnWebApplication(type = ConditionalOnWebApplication.Type.REACTIVE)
@@ -48,8 +50,12 @@ public WebFluxGraphQLHandler graphQLHandler(GraphQL.Builder graphQLBuilder) {
 	}
 
 	@Bean
-	public RouterFunction<ServerResponse> graphQLQueryEndpoint(WebFluxGraphQLHandler handler, GraphQLProperties graphQLProperties) {
-		return RouterFunctions.route().POST(graphQLProperties.getPath(), accept(MediaType.APPLICATION_JSON), handler).build();
+	public RouterFunction<ServerResponse> graphQLQueryEndpoint(ResourceLoader resourceLoader, WebFluxGraphQLHandler handler,
+			GraphQLProperties graphQLProperties) {
+		return RouterFunctions.route()
+				.GET(graphQLProperties.getPath(), req -> ServerResponse.ok().bodyValue(resourceLoader.getResource("classpath:graphiql/index.html")))
+				.POST(graphQLProperties.getPath(), accept(MediaType.APPLICATION_JSON).and(contentType(MediaType.APPLICATION_JSON)), handler)
+				.build();
 	}
 
 }

spring-graphql-web/src/main/java/org/springframework/boot/graphql/WebMvcGraphQLAutoConfiguration.java

@@ -26,16 +26,18 @@
 import org.springframework.boot.autoconfigure.condition.ConditionalOnWebApplication;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
+import org.springframework.core.io.ResourceLoader;
 import org.springframework.graphql.WebMvcGraphQLHandler;
 import org.springframework.http.MediaType;
 import org.springframework.web.servlet.function.RouterFunction;
 import org.springframework.web.servlet.function.RouterFunctions;
 import org.springframework.web.servlet.function.ServerResponse;
 
 import static org.springframework.web.servlet.function.RequestPredicates.accept;
+import static org.springframework.web.servlet.function.RequestPredicates.contentType;
 
 @Configuration
-@ConditionalOnWebApplication
+@ConditionalOnWebApplication(type = ConditionalOnWebApplication.Type.SERVLET)
 @ConditionalOnClass(GraphQL.class)
 @ConditionalOnBean(GraphQL.Builder.class)
 @AutoConfigureAfter(GraphQLAutoConfiguration.class)
@@ -48,9 +50,11 @@ public WebMvcGraphQLHandler graphQLHandler(GraphQL.Builder graphQLBuilder) {
 	}
 
 	@Bean
-	public RouterFunction<ServerResponse> graphQLQueryEndpoint(WebMvcGraphQLHandler handler, GraphQLProperties graphQLProperties) {
+	public RouterFunction<ServerResponse> graphQLQueryEndpoint(ResourceLoader resourceLoader, WebMvcGraphQLHandler handler,
+			GraphQLProperties graphQLProperties) {
 		return RouterFunctions.route()
-				.POST(graphQLProperties.getPath(), accept(MediaType.APPLICATION_JSON), handler)
+				.GET(graphQLProperties.getPath(), req -> ServerResponse.ok().body(resourceLoader.getResource("classpath:graphiql/index.html")))
+				.POST(graphQLProperties.getPath(), contentType(MediaType.APPLICATION_JSON).and(accept(MediaType.APPLICATION_JSON)), handler)
 				.build();
 	}
 

spring-graphql-web/src/main/resources/META-INF/spring-devtools.properties

@@ -0,0 +1 @@
+restart.include.graphql-java=graphql-java.*\.jar

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

@@ -0,0 +1,92 @@
+<!--
+  ~ Copyright 2002-2020 the original author or authors.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<!DOCTYPE html>
+<html>
+<head>
+    <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 bunder.
+    -->
+    <script
+            crossorigin
+            src="https://unpkg.com/react@16/umd/react.development.js"
+    ></script>
+    <script
+            crossorigin
+            src="https://unpkg.com/react-dom@16/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.
+     -->
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+</head>
+
+<body>
+<div id="graphiql">Loading...</div>
+<script
+        src="https://unpkg.com/graphiql/graphiql.min.js"
+        type="application/javascript"
+></script>
+<script src="/renderExample.js" type="application/javascript"></script>
+<script>
+    function graphQLFetcher(graphQLParams) {
+        return fetch(
+            window.location,
+            {
+                method: 'post',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(graphQLParams),
+                credentials: 'omit',
+            },
+        ).then(function (response) {
+            return response.json().catch(function () {
+                return response.text();
+            });
+        });
+    }
+
+    ReactDOM.render(
+        React.createElement(GraphiQL, {
+            fetcher: graphQLFetcher,
+            defaultVariableEditorOpen: true,
+        }),
+        document.getElementById('graphiql'),
+    );
+</script>
+</body>
+</html>