search

graphql-java-kickstart / graphql-spring-boot

GraphQL and GraphiQL Spring Framework Boot Starters - Forked from oembedler/graphql-spring-boot due to inactivity.
https://www.graphql-java-kickstart.com/spring-boot/
MIT License
1.51k stars 325 forks source link

Customizing the GraphiQL web interface #156

Open mrogan opened 5 years ago

mrogan commented 5 years ago

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 commented 5 years ago

GraphiQL is rendered into the HTML page here: https://github.com/graphql-java-kickstart/graphql-spring-boot/blob/8ca09fb231236c9f8127e51df77ceef87e685aea/graphiql-spring-boot-autoconfigure/src/main/resources/graphiql.html#L151.

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 commented 3 years ago

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 commented 3 years ago

See also issue https://github.com/graphql/graphiql/issues/1165 stating they're working on a replacement for these kind of customizations.