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?