Graphql-engine: Update GraphiQL Explorer in GraphiQL Online

[FluorescentHallucinogen]

Please update GraphiQL Explorer in GraphiQL Online (https://graphiql-online.com, https://github.com/hasura/graphql-engine/blob/master/community/tools/graphiql-online) to the latest version.

More info about new version: https://www.onegraph.com/blog/2019/05/30/GraphiQL_Explorer_2_0_A_Power_User_Release.html

[rikinsk-zz]

Also need to do it for the console

[FluorescentHallucinogen]

PTAL at my build of GraphiQL + GraphiQL Explorer + GraphiQL Code Exporter (https://github.com/FluorescentHallucinogen/graphiql-online, https://graphiql-online.web.app). This can help.

Also it would be nice to integrate GraphQL Voyager into GraphiQL Online. Currently, it's already integrated into Console (see #2369).

[FluorescentHallucinogen]

I've found that you for some reason use graphiql-explorer-hasura package instead of original graphiql-explorer package. Why?

[coco98]

I think because of some styling changes to make the embed work well.
Ref: https://github.com/OneGraph/graphiql-explorer/pull/9
@wawhal ?

[rikinsk-zz]

Also to support Hasura native features such as Analyze. GraphiQL online and the Hasura console use the same package.

[FluorescentHallucinogen]

It would be great if you refactored your custom URL and custom headers panes into separate GraphiQL plug-in (NPM package). Is it possible?

In this case, I would be able to add this plugin to my GraphiQL build.

My final goal (vision) is GraphiQL + Custom URL/Headers panes + GraphQL Voager + GraphiQL Explorer + GraphiQL Code Exporter (the full cycle from visual exploring the GraphQL API on any URL and visual constructing queries to generating ready-to-run code).

[sgrove]

@rikinsk For styling fixes, let's figure out a way to make all of the graphiql-explorer styling over-rideable via props at the top level - that way you can simplify your installation.

[rikinsk-zz]

@sgrove Yeah that would be great! @wawhal had spent quite sometime digging into the code trying to achieve that. He could share insights on what would have made his life easier.

[wawhal]

@sgrove We had decided to maintain our fork because:

1. We wanted to override margin/spacing etc
2. We wanted to make explorer resizable
3. Stylesheet is the preferred way of doing CSS on HGE console because inline CSS can lead to inconsistencies. For eg, if we wished to change the color theme of the console in future, it would be much more comfortable to do it by just changing the classes in the stylesheets.

About an easier way of overriding styles, I agree @sgrove on passing a styles object as a prop so that there is just once place where the themes/colors/spacings are maintained (similar to using a stylesheet).

[FluorescentHallucinogen]

Just have tested after #2737 has been merged, it still uses the old version of GraphiQL Explorer.

Any news?

[FluorescentHallucinogen]

Any progress?

[wawhal]

@FluorescentHallucinogen it will be integrated by the end of this week :)

[FluorescentHallucinogen]

@wawhal Could you please deploy the updated version to https://graphiql-online.com?