Send custom headers please

[chris-carrington]

I would love to run graphql-ws on glitch.com, I am following this tutorial of getting websockets running on glitch.com https://youtu.be/eLPhUFHKm0M?t=355 & at the timestamp in the video (5:55) it says that a header of a user-agent is necessary to get websockets to run on glitch.com.

I would love a way to send a user-agent header just ike in the video via graphql-ws please!

[enisdenjo]

Hey there, setting custom headers is not possible in browsers; however, the User-Agent header is automatically set there anyway.

Passing custom headers with Node's ws library is possible though, but not recommended (given the lack of documentation around it). Here's how you can make a WebSocket implementation with custom headers and pass it to graphql-ws:

import WebSocket from 'ws'; // yarn add ws
import { createClient } from 'graphql-ws';

class MyWebSocket extends WebSocket {
  constructor(address, protocols) {
    super(address, protocols, {
      headers: {
        // your headers go here
        'User-Agent': 'graphql-ws client',
      },
    });
  }
}

const client = createClient({
  url: 'ws://node.custom-headers:4000/graphql',
  webSocketImpl: MyWebSocket,
});

P.S. I added a "Client usage in Node with custom headers" recipe too.

[enisdenjo]

webSocketImpl is still a part of the ClientOptions, see documentation and also see source code.

[ahmedmohamedfci]

sorry, i had another issue other than webSocketImpl and i mixed them. thanks for your quick answer and references

[PopBot]

Thanks @enisdenjo! Got this working with React Native Hasura subscription websocket implementation today. I have spent hours investigating this issue, but this is currently the only way to authorize via JWT in headers.

[enisdenjo]

Actually Hasura expects the JWT in the connection_init message when using WebSockets, not in the upgrade headers. Also check out the Hasura subscriptions documentation.

[xzecakular]

I'm very glad that I stumbled upon this conversation, the second link Hasura subscriptions documentation actually nudged me in the right direction.

I'm including this minimalistic example that might help others:

const client = createClient({
  url: 'wss://...',
  connectionParams: async () => {
      const accessToken = await getToken() // obtain the token from auth
      // return an object with `headers`
      return {
          headers: {
              'x-hasura-role': 'user',
              authorization: `Bearer ${accessToken}`,
          }
      }
  }
})

Sidenote: I'm using URQL with graphql-ws to make GraphQL subscriptions to Hasura. This then plays nicely with URQL's subscriptionExchange.

Thanks @enisdenjo