Feature Request: host relative paths for subscriptionsEndpoint option

[ksmithut]

Intended outcome: Be able to configure GraphiQL with a path (without the protocol, host, or port) for the subscriptionsEndpoint option instead of a fully qualified URL.

Actual outcome: The network interface on the client must have a fully qualified URL, so it throws an error in the client saying that /subscriptions is an invalid.

Uncaught DOMException: Failed to construct 'WebSocket': The URL '/subscriptions' is invalid.

Reproduce

app.use('/graphiql', graphiqlExpress({
  endpointURL: '/graphql',
  subscriptionsEndpoint: '/subscriptions' // Note this being relative
})

I think this can be done by leveraging window.location, but it would require some code branching and detection of whether or not the passed url is host relative or not. Plus, you'd kind of be forced to make a decision of what the default protocol would be, like should you always use wss:// if window.location.protocol === 'https:', and should you use the same port. I believe that kind of default configuration would be acceptable, but I'd understand if it's something you'd rather not force an opinion on.

Here's the reasoning. I like my server configuration to not really care about the environment it's hosted in. For example, In some setups, I have a single server handling requests for multiple servers, like tenant1.example.com and tenant2.example.com, and I'd like both of them to have a /graphiql that support subscriptions, but I can't do that with the current options model.

Anyway, feel free to close this if you don't want to support this.

[pho3nixf1re]

I am currently in need of this feature as well. If a PR would be accepted using the strategy @ksmithut suggests above then I can work on this. Before I work on that I would want feedback from the maintainers here.

[helfer]

Should be possible now with #418.

[ksmithut]

For posterity, this is now possible:

app.use('/graphiql', graphiqlExpress(req => ({
  endpointURL: '/graphql',
  subscriptionsEndpoint: url.format({
    host: req.get('host'),
    protocol: req.protocol === 'https' ? 'wss' : 'ws',
    pathname: '/subscriptions'
  })
})))