Customizing the GraphiQL web interface

[mrogan]

I see from the graphql/graphiql README that I can customize various UI elements like this:

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

How do I go about that with graphql-java-kickstart/graphql-spring-boot? I can set certain values via application.properties/yml such as pageTitle, defaultQuery and editorTheme. But this approach does not extend to children such as Logo, Footer and Toolbar. (The later being an interesting way to add a custom button to the toolbar.)

Can you advise whether I can "set the children" in any way? Or how I should approach this in general?

Thank you

[oliemansm]

GraphiQL is rendered into the HTML page here:

graphql-spring-boot/graphiql-spring-boot-autoconfigure/src/main/resources/graphiql.html

Line 151 in 8ca09fb

React.createElement(GraphiQL, props),

.

It passes the props, but as you can see it just renders the plain wrapper component and currently doesn't allow customization.

To be fully flexible you would probably want to be able to add a custom HTML file in your project representing your own GraphiQL component like this example: https://github.com/graphql/graphiql/tree/master/packages/graphiql#usage-examples. And you would need a way to hook that into the starter, although at this point you might as well serve it directly yourself.

If it's just a logo you want to be able to add that might be simpler.

Don't know if anybody else has the time to take a look at this to create a PR? Otherwise it will probably take me a while before I can find the time for this one, seeing it's more of a nice to have feature right now.

[oliemansm]

The README of GraphiQL states that this has been dropped since 1.0.0-rc2 (see https://github.com/graphql/graphiql/tree/main/packages/graphiql#children-dropped-as-of-100-rc2). The full example below that in the README still shows its usage however, so the current and future state of this is really unclear.

[oliemansm]

See also issue graphql/graphiql#1165 stating they're working on a replacement for these kind of customizations.