Customization of GraphiQL interface in Spring-Boot project

288 Views Asked by At

According to the GraphiQL README I can customize the interface by adding React children like this:

<GraphiQL.Logo>
    My Custom Logo
</GraphiQL.Logo>

That is great, but how do I actually set these children? I'm not a web developer and I've never used React before! I'm developing a Spring-Boot project with the following dependencies:

<dependency>
    <groupId>com.graphql-java-kickstart</groupId>
    <artifactId>graphql-spring-boot-starter</artifactId>
    <version>5.0.6</version>
</dependency>
<dependency>
    <groupId>com.graphql-java-kickstart</groupId>
    <artifactId>graphiql-spring-boot-starter</artifactId>
    <version>5.0.6</version>
</dependency>

I don't see any way to set the children via application.properties/yml, although I can set other things there like the pageTitle, defaultQuery and editorTheme.

I can override the graphiql.html page provided by the starter. I naively tried to set the children like this at the end of the page:

// Render <GraphiQL /> into the body.
ReactDOM.render(
    React.createElement(GraphiQL, props, [React.createElement('GraphiQL.Logo', {}, 'Custom LOGO')]),
    document.body
);

That didn't have any effect.

How should I approach this?

0

There are 0 best solutions below