connectionParams: {headers: } Has No Effect on Expo React Native

[ghost]

The below code has no effect on Expo React Native. I saw some comments on Issues and this param should work(apollographql/apollo-client#3967), but I do not know why it has no effect. Websocekt's 'headers' never changes.

const wsClient = new SubscriptionClient(`ws://localhost:5000/`, {
    reconnect: true,
    connectionParams: {
        headers: {
                 'user-agent': userAgent
           }
    }
});

[zero298]

Does using a WebSocketLink work per #511?

[ghost]

@zero298 No, I have tried that as well. Neither using WebSocketLink or SubscriptionClient works.

[AlpacaGoesCrazy]

connectionParams option does not change headers, it sends its contents with init message when websocket connection opens.

[Aryk]

I notice that there is a message sent called "connection_init". Is that part of the websocket spec, or is that specific to apollo?

[paulbakker]

I would expect the headers to be send in the upgrade request, but that's not happening as described above.

[raarts]

Same here. Also this package seems unmaintained.

[pimterry]

For anybody else wanting to send headers with subscription-transport-ws, this works for me in Node using https://github.com/websockets/ws (in my case via https://www.npmjs.com/package/universal-websocket-client):

const wsClient = new SubscriptionClient(`ws://localhost:5000/`, {
    wsOptionArguments: [{ // This are passed as extra arguments to the WebSocket constructor
        headers: {
             // Whatever headers you like
        }
    }]
}, WsClientConstructor);

It won't work in browsers of course, because you can't do this in browsers. AFAICT, there's no way to set custom headers on any websocket request. That's not to do with this library, it's a general browser restriction.

[rhyek]

I was looking for a way to manually set cookies on the upgrade request during integration testing (cookies are automatically sent in a browser environment). Thanks to @pimterry I managed to do it like this:

const wsLink = new WebSocketLink({
  webSocketImpl: WebSocket, // ws package
  uri: `ws://address/graphql`,
  options: {
    wsOptionArguments: [
      {
        headers: {
          cookie: cookieStr,
        },
      },
    ],
  },
});