GraphiQL seems to want to post to /graphiql even if that isn't where it's mounted

[ndarilek]

I'd like to mount GraphiQL to /api, which will also be the GraphQL API endpoint, to make it just a bit easier to discover and experiment with the API.

Even if I mount the GraphiQL plug at /api, it still wants to post to /graphiql. I have a hacky workaround in that I mount the plain GraphQL API at /graphiql, then point everything else at /api.

Any idea why this is happening? A quick glance through the source isn't hugely revealing. I'm wondering if it is a GraphiQL default that isn't being updated via the plug? If so, seems like it would fail if mounted anywhere else.

As an aside, is there any reason why doing this would be a bad idea? I'm explicitly trying to make this API as easy to discover and use as possible, but maybe there are gotchas of which I'm not aware.

Thanks.

[benwilson512]

The GraphiQL that we have mounted by default lets you specify where to send queries.

Are you unable to enter the correct URL there?

[ndarilek]

Ah, I suppose so. But if I mount that somewhere else, is there any way to configure GrahiQL to respect that automatically?

[benwilson512]

It was my understanding that it would use the current location, but possibly not. This sounds like perhaps an issue that belongs on the graphiql project itself, it's a generic piece of javascript that while we provide an easy integration are not its authors.

[ndarilek]

Interesting. So I'm looking at this: https://github.com/apollostack/graphql-server/blob/master/packages/graphql-server-module-graphiql/src/renderGraphiQL.ts which appears to be the Apollo version of what this plug does. If you look at line 13, a GraphQL API endpoint is accepted. Line 102 appears to incorporate that endpoint URL into the rendering of a GraphiQL React component. Am I missing something, or is this code not a) accepting a user-defined GraphQL endpoint and b) rendering that as part of GraphiQL? Admittedly the GraphiQL developers didn't make that discovery process easy. If I'm right, I'd appreciate it if this could be reopened. I might take a crack at a PR in a few days if someone can guide me in the finer points of how it should be implemented (in particular, where the plug should be configured, though it's probably best to just use the path at which it was mounted.) Thanks, and I hope you'll reconsider closing this, at least not before people have done the research and conclusively determined that it wasn't possible.

[ndarilek]

Actually, now that I know what I'm looking for, it looks like you've got most of this implemented already. I'd be happy to add in the missing bits if the PR would be accepted, and if you wouldn't mind pointing me to where this plug can get at the path component where it is mounted (I.e. "/api" or whatever other string the mountpoint might be.) I'm fairly new to Elixir and am still wrapping my mind around lots.

[benwilson512]

I think you're confused about where this functionality exists. This functionality is not written in Elixir. We provide an EEX template, but that template literally just links to another project's javascript here: https://github.com/absinthe-graphql/absinthe_plug/blob/master/lib/absinthe/plug/graphql_toolbox.html.eex#L29

A few lines lower we pass in a tiny bit of config, which puts the default URL at the window location. That's it, everything else happens in the javascript contained in a totally different project. This is why I closed the issue, there's no evidence that changing code in this project will help you.

I do however have a theory about your issue. This particular GraphIQL tool uses local storage to persist a bunch of information, including the URL. Use the inspector to clear out the local storage for your host and see if that fixes it.

[ndarilek]

Ah, good catch, localStorage.clear() did appear to do it. Thanks, I was going a bit crazy searching for "/graphiql" as a hard-coded endpoint everywhere, and Googling a bunch of likely phrases. :)

[benwilson512]

Do note that the javascript you linked to appears to be for the simplified graphiql interface whereas by default Absinthe exposes https://github.com/OlegIlyenko/graphql-toolbox which is a lot more advanced.

[benwilson512]

Glad that helped :)

[bruce]

Note we do want to update the version we link to as well: #37 (comment)