|
This version is still in development and is not considered stable yet. For the latest stable version, please use Spring GraphQL 2.0.4! |
GraphiQL
GraphiQL is a graphical interactive in-browser GraphQL IDE. It is very popular amongst developers as it makes it easy to explore and interactively develop GraphQL APIs. 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 a stock GraphiQL index.html page that uses static resources hosted on the esm.sh CDN.
Spring Boot applications can easily enable this page with a configuration property.
| The stock GraphiQL integration is intended for development purposes only and should not be exposed as-is in production. It loads its static resources from the esm.sh CDN and does not require any authentication to access the GraphQL API it targets. Before deploying a GraphiQL page to production, carefully review your application’s security model, consider whether an unauthenticated, CDN-dependent IDE is acceptable for your environment, and make sure access to it is protected with the same authentication and authorization mechanisms as the rest of your application. Consider building and serving a custom GraphiQL build if you need to avoid the CDN dependency or enforce stricter access controls. |
Creating a custom GraphiQL build
This part is generally outside of the scope of this documentation, as there are several options for custom builds. You will find more information in the official GraphiQL documentation. You can choose to copy the build result directly in your application resources. Alternatively, you can integrate the JavaScript build in your project as a separate module by leveraging Node.js Gradle or Maven build plugins.
Exposing a GraphiQL instance
Once a GraphiQL build is available on the classpath, you can expose it as an endpoint with the functional web frameworks.
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;
import org.springframework.core.io.ClassPathResource;
import org.springframework.graphql.server.webmvc.GraphiQlHandler;
import org.springframework.web.servlet.function.RouterFunction;
import org.springframework.web.servlet.function.RouterFunctions;
import org.springframework.web.servlet.function.ServerResponse;
@Configuration
public class GraphiQlConfiguration {
@Bean
@Order(0)
public RouterFunction<ServerResponse> graphiQlRouterFunction() {
RouterFunctions.Builder builder = RouterFunctions.route();
ClassPathResource graphiQlPage = new ClassPathResource("graphiql/index.html"); (1)
GraphiQlHandler graphiQLHandler = new GraphiQlHandler("/graphql", "", graphiQlPage); (2)
builder = builder.GET("/graphiql", graphiQLHandler::handleRequest); (3)
return builder.build(); (4)
}
}| 1 | Load the GraphiQL page from the classpath (here, we are using the version shipped with Spring for GraphQL) |
| 2 | Configure a web handler for processing HTTP requests; you can implement a custom HandlerFunction depending on your use case |
| 3 | Finally, map the handler to a specific HTTP endpoint |
| 4 | Expose this new route through a RouterFunction bean |
You might also need to configure your application to serve the relevant static resources.
