Allow web-ui users to configure the `payload` on `connection_init` messages when subscribing over websockets

We are implementing a graphql server where clients can subscribe (using graphql subscriptions) and have to authenticate by sending an auth token in the payload of the initial connection_init message. So – for example – an initial message could look like this:

{
  "type": "connection_init",
  "payload": {
    "Authorization": "Bearer <some-jwt>"
  }
}

Is there a way in the graphiql web frontend to configure the payload that is being sent in the connection_init message? We couldn’t find a way and graphiql is broken for us.

For context: We’re using https://github.com/99designs/gqlgen for implementing the backend. gqlgen switched to using graphiql here: https://github.com/99designs/gqlgen/pull/1751. Before that it used https://github.com/graphql/graphql-playground. As far as I can tell, that project behaved like this: If users entered headers in the web frontend, it would:

• Put those headers into the http request headers for queries and mutations. These requests would not use websockets.
• For subscriptions, it would open a websocket, for the initial http update request, it would not include the custom headers, but then it would put the custom headers into the payload of the connection_init request.

[soenkehahn]

@acao: Thanks for the replies. As I understand it, the spec does specify an optional payload field. And graphql-ws also supports that. I did some digging and graphiql also already allows to specify the payload in javascript, for example like this:

GraphiQL.createFetcher({
  url,
  subscriptionUrl,
  wsConnectionParams: { Authorization: 'Bearer <token>' }
});

wsConnectionParams is declared here and passed through to graphql-ws as the connectionParams argument that @enisdenjo mentioned.

This issue is about allowing users of the graphiql web interface to configure the payload without having to write javascript. (I’ll change the title of this issue to make it a bit more explicit.)

As I mentioned above https://github.com/graphql/graphql-playground just passes whatever users put into the ‘headers’ as a json object into that payload. Which I find a bit weird, since it kind of conflates http headers and this payload field. But that would work for us. Any other way to configure the payload would also work, though.

If I find the time, would you be willing to review a PR that added this? Pending a decision on how this should be supported in graphiql.

[acao]

This is possible by passing a custom graphql-ws client instance:

https://github.com/graphql/graphiql/blob/main/packages/graphiql-toolkit/docs/create-fetcher.md#custom-wsclient-example-using-graphql-ws