Separate GraphiQL from DGS

DGS (Domain Graph System) is a GraphQL implementation created by Netflix for the JVM. DGS comes bundled with a GraphiQL implementation, which is very convenient. But, there might be reasons to separate the implementation, for instance modifying it (look and feel or adding a plugin), or even for a bug fix, which is my problem. In the region my customer works, the UNPKG CDN has not been serving up the React core library for over two weeks now, so anyone who didn’t already have GraphiQL in their browser cache can’t load the site and use the tool. This post describes how to get your own implementation working in DGS.

The first step is to capture the HTML from your working DGS implementation. Visit the GraphiQL page, and grab it’s source. Save that as graphiql.html in the src/main/resources/static directory in your project.

Now that we have the HTML, we need to stop DGS from serving the embedded version of GraphiQL. In your application.properties file add this line:

dgs.graphql.graphiql.enabled=false

The last step is to create an endpoint in Spring Boot to serve the HTML. Create a Spring Boot @Configuration Java class:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration(proxyBeanMethods = false)
public class GraphiQlConfig implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/graphiql").setViewName("graphiql.html");
    }
}

Now, restarting the application causes <app-url>/graphiql to serve up the HTML. You are free to modify GraphiQL in whatever manner you see fit.