Provide style customization options

[imolorhe]

Hey @sgrove,

looks like GraphiQL explorer was made with GraphiQL and so works with the styling available with GraphiQL. This makes it difficult to use it in other non-GraphiQL based projects, like Altair.

@FluorescentHallucinogen has previously created an issue on the Altair repo to integrate GraphiQL explorer (https://github.com/imolorhe/altair/issues/534) and sufficient progress on that has been done already. However, we are facing a bit of styling issues.

Altair makes use of themes extensively with different styling options. While there are ways to make the styling work, I was hoping for a more standard approach from GraphiQL explorer itself.

[sgrove]

@imolorhe That's great, I'm a big fan of Altair!

For styling in the short term, I think we should allow a custom set of style objects to be passed in to the explorer that will be merged with the default. That way the defaults are always there and it works for people who don't know to customize it, but the defaults are easy to override when advanced users (like you) want to.

Beyond that, I'd like for GraphiQL itself to adopt a theming approach that we can fall in line with, and that'll naturally mean that it's easy to interact with from projects like yours.

[imolorhe]

That's great, I'm a big fan of Altair!

@sgrove I'm glad to hear that. It's always refreshing to know that major community contributors like yourself are a fan of the project. ❤️🍻

For styling in the short term, I think we should allow a custom set of style objects to be passed in to the explorer that will be merged with the default. That way the defaults are always there and it works for people who don't know to customize it, but the defaults are easy to override when advanced users (like you) want to.

I do think providing the option to pass custom styling as a prop would work for Altair's use case.

Beyond that, I'd like for GraphiQL itself to adopt a theming approach that we can fall in line with, and that'll naturally mean that it's easy to interact with from projects like yours.

That can be a point to consider during the meeting with the GraphiQL working group (which I assume you are going to be attending 😄)

PS: I am able to get GraphiQL explorer working in Altair as a custom element (since Altair is angular, and not react). One of the biggest drawbacks being that the custom element needs to be bundled with its own graphql package (which seems to be quite large compared to the component itself). I would also like to hear your feedback on the work we've done so far if you don't mind 😄 https://github.com/imolorhe/altair/pull/759

The demo graphql explorer plugin for Altair: https://github.com/imolorhe/graphql-explorer

[FluorescentHallucinogen]

@imolorhe How to run it? Is there a built deployed live demo to play with it?

[imolorhe]

It's not running anywhere at the moment. You would have to run the code in the branch of the PR locally to see the plugin working. I'm still trying to finalize the plugin system implementation.

[imolorhe]

@FluorescentHallucinogen There's a live demo you can play with now: https://plugin-dev-2-branch-altair-imolorhe.surge.sh/

You would need to enable the enableExperimental flag in the settings and reload the page, to see it working.

[imolorhe]

Closing this issue as solved. 🙂

[sgrove]

Yay, thank you!