Graphiql: [Feature] Switch to different schema/endpoint on the fly

[lukaszczapiga]

I have an input field for a custom graphQL host/url endpoint and I would like the docs to update accordingly. I tried setting the schema passed as a prop to undefined when the host changes to trigger the fetcher to do the introspection request but nothing happens.

Could you advise me what is the expected behaviour and how could I achieve what I need ? (docs updating on host/url change)

Thanks

[asiandrummer]

Hi @lukaszczapiga - the introspection query is executed only once when the component is mounted, so what you're seeing is expected. You may achieve what you need by passing in a new GraphQLSchema object as a new prop, but I'd agree it's not a good developer experience. I think we could think about a feature that lets you to switch to a different schema/endpoint should you have more than one.

cc @leebyron - would love to hear what you think about this.

[lukaszczapiga]

@asiandrummer thanks for the reply, I ended up adding a key to my GraphiQL component which creates a new one from scratch when the key changes on host change. This triggers the introspection query.

[asiandrummer]

@lukaszczapiga - glad you were able to resolve the issue. The feature still sounds valid to me, so I'll keep this open.

[wmertens]

A similar use case is when you are developing on the server and changing the schema. It would be nice if there were a button to refresh the schema, maybe inside the docs panel?

[leebyron]

As @asiandrummer mentioned, you can absolutely enable this by providing schema yourself as prop to <GraphiQL>, but that leaves you with the responsibility of producing the schema yourself to provide. That's a sort of maximum-power option at a fairly high implementation cost.

I just put up a PR which would cause refetching of the schema should your fetcher function change. That provides an alternative React-friendly way of switching out the schema. If you have a new endpoint, then just re-render <GraphiQL> with a new fetcher function that's using the new endpoint you'd like to hit.