How to configure for GHE?

[ScottChapman]

I love this, and wanted to set this up using our own github enterprise deployment, but I couldn't figure out how to configure the endpoint. Is that documented somewhere?

[FluorescentHallucinogen]

@ScottChapman See https://github.com/OneGraph/graphiql-explorer-example.

I agree, it would be nice to have a detailed description of each prop (something like https://github.com/OneGraph/graphiql-code-exporter#props) or at least a link to https://github.com/OneGraph/graphiql-explorer-example in the ReadMe.

[FluorescentHallucinogen]

Oh, the ReadMe already have the link to https://github.com/OneGraph/graphiql-explorer-example, see https://github.com/OneGraph/graphiql-explorer#example-usage.

[ScottChapman]

Thanks, I actually did read through those. They seemed like mostly UI properties, not really related to setting a different graphql endpoint with auth headers.

[ScottChapman]

I think maybe I figured it out, I poked around in src/App.js and found some entries for the fetcher. I modified those by changing the URL and adding an authorization bearer token, and that worked for me. Was that the proper way for me to customize it?

[FluorescentHallucinogen]

@ScottChapman Yes, https://github.com/OneGraph/graphiql-explorer-example/blob/master/src/App.js#L17 is the only line you should change. You can also add headers here: https://github.com/OneGraph/graphiql-explorer-example/blob/master/src/App.js#L20. Feel free to extract them to separate variables and use object spread to merge headers. :wink:

[ScottChapman]

coolio!

So, if I wanted to deploy locally here, and make it so that other users would need to authenticate with our GHE (meaning I wouldn't hard code my bearer token), is there an easy way to do that? Or I suspect that might be beyond the scope of the example?

[FluorescentHallucinogen]

<GraphiQLExplorer> component uses interface very similar to interface of <GraphiQL> component, both have the schema prop. You should provide the same value to both schema props so that everything works correctly. Both <GraphiQLExplorer> and <GraphiQL> components don't care how and where you get the schema prop's value.

Or I suspect that might be beyond the scope of the example?

Yes, providing UI for headers is out of scope of these projects.

PTAL at https://graphiql-online.com. It's GraphiQL + Custom Headers plugin + GraphiQL Explorer + GraphQL Voyager. :wink:

[ScottChapman]

oh nice! (except Voyager comes up blank for me)

[FluorescentHallucinogen]

except Voyager comes up blank for me

Hm, that's strange! But GraphiQL and Explorer works? Could you please share the URL of your endpoint? I'll see what the problem is.

[ScottChapman]

https://github.ibm.com/api/graphql

Logs:

023297f5-a5eb-4ae8-81b2-07289d8f3ea0:7 7
023297f5-a5eb-4ae8-81b2-07289d8f3ea0:7 7
oe @ 023297f5-a5eb-4ae8-81b2-07289d8f3ea0:7
vendor.js:1 Error: abort(7). Build with -s ASSERTIONS=1 for more info.
    at Array.n.listeners.<computed> (vendor.js:1)
    at Worker.<anonymous> (vendor.js:1)
Oa @ vendor.js:1
vendor.js:1 TypeError: Cannot read property 'ongoingRequest' of undefined
    at ErrorBoundary.e (main.js:1)
    at Go (vendor.js:1)
    at qo (vendor.js:1)
    at Xo (vendor.js:1)
    at fs (vendor.js:1)
    at ds (vendor.js:1)
    at Zs (vendor.js:1)
    at Ys (vendor.js:1)
    at Ws (vendor.js:1)
    at bs (vendor.js:1)
Oa @ vendor.js:1
main.js:1 Uncaught (in promise) TypeError: Cannot read property 'ongoingRequest' of undefined
    at ErrorBoundary.e (main.js:1)
    at Go (vendor.js:1)
    at qo (vendor.js:1)
    at Xo (vendor.js:1)
    at fs (vendor.js:1)
    at ds (vendor.js:1)
    at Zs (vendor.js:1)
    at Ys (vendor.js:1)
    at Ws (vendor.js:1)
    at bs (vendor.js:1)
DevTools failed to load SourceMap: Could not parse content for https://graphiql-online.com/sm/eb114fbb1afb9ac0eeee6eeae7436d6b0a8fc10d7853be57ad04c7a4a22fd2d1.map: Unexpected token < in JSON at position 0

[FluorescentHallucinogen]

Could you please provide auth header value for tests?

[ScottChapman]

nope, it's our company's enterprise github deployment...

[FluorescentHallucinogen]

You can revoke this token later. Otherwise, ¯_(ツ)_/¯.

[ScottChapman]

yea, sorry... What's the above error look like? Is it running some query against the end point? Perhaps I can run it and send you the results?

[FluorescentHallucinogen]

Try https://graphql-voyager.web.app ("Change schema" button -> "URL" tab). If it works in standalone GraphQL Voyager, this is a bug in GraphiQL Online.

[ScottChapman]

yes, that worked...