I m trying to get Apollo working on a JS target The same cod

Question

I m trying to get Apollo working on a JS target The same code on Android JVM works fine on JS it throws an exception SubscriptionOperationException Operation error lt subscriptionName gt Is there anything JS specific with subscriptions that I should know

bod · Answer

No subscriptions should work the same on JS Are you able to see the network traffic to see if anything doesn t look right Or any other info in the logs

Sean Proctor · Answer

The logs are pretty useless I ll check network traffic and see if there s anything interesting

Sean Proctor · Answer

```Operation error syncAccount SubscriptionOperationException Operation error syncAccount at WebSocketNetworkTransport$execute$o$collect$slambda 1 doResume 5yljmg k$ webpack internal kotlin apollo kotlin apollo runtime js 4950 23 at WebSocketNetworkTransport$execute$o$collect$slambda 1 invoke kvy33q k$ webpack internal kotlin apollo kotlin apollo runtime js 4915 16 at sam$kotlinx coroutines flow FlowCollector$0 3 l as function 1 webpack internal kotlin apollo kotlin apollo runtime js 5003 16 at sam$kotlinx coroutines flow FlowCollector$0 3 emit 1fbrsb k$ webpack internal kotlin apollo kotlin apollo runtime js 5357 17 at SafeCollector emit 1fbrsb k$ webpack internal kotlin kotlinx coroutines kotlinx coroutines core js ir js 20332 29 at WebSocketNetworkTransport$execute$slambda 1 doResume 5yljmg k$ webpack internal kotlin apollo kotlin apollo runtime js 5780 63 at WebSocketNetworkTransport$execute$slambda 1 invoke jwaue4 k$ webpack internal kotlin apollo kotlin apollo runtime js 5740 16 at no name provided qut3iv l as $transform 1 webpack internal kotlin apollo kotlin apollo runtime js 5822 16 at $emitCOROUTINE$1 doResume 5yljmg k$ webpack internal kotlin apollo kotlin apollo runtime js 2394 51 at no name provided qut3iv emit 1fbrsb k$ webpack internal kotlin apollo kotlin apollo runtime js 2439 16 ```

mbonnin · Answer

Got to love the coroutines stacktraces grimacing

mbonnin · Answer

If I read the exception right this is a <https github com apollographql apollo kotlin blob a4d5f82888218fddf1d70ee9bdbbfe17befb04a2 libraries apollo api src commonMain kotlin com apollographql apollo3 exception Exceptions kt L31|SubscriptionOperationException> which means your backend has returned an error so it should be seen in the Browser devtools

mbonnin · Answer

I think devtools show websocket data If you re doing node I have no idea

mbonnin · Answer

Might be a case of a missing header in the initial handshake or something like this

Sean Proctor · Answer

Looking at the network over the wire was useless looking in devtools I only see a ws connection to <ws localhost 8080 ws> I have no idea where that could come from If that s what apollo is using then I have a clear answer as what s gone wrong Is there an easy way to get some debug messages from apollo

bod · Answer

hmm no there are no other logging levels than that

Sean Proctor · Answer

yeah that was something else looking at the WS request in devtools doesn t tell me much

bod · Answer

ah But you can see the messages sent received

Sean Proctor · Answer

I can see that that the server responded ```HTTP 1 1 101 WebSocket Protocol Handshake Date Thu 09 Feb 2023 12 15 45 GMT Connection upgrade Upgrade websocket Sec WebSocket Accept CJgK75ri8M62LH3xkkdXjZpCWgk= Sec WebSocket Protocol graphql ws```

mbonnin · Answer

Are you using Chrome I m almost sure I was able to see the different messages on the websocket after that initial handshake

Sean Proctor · Answer

Yes

mbonnin · Answer

Alright maybe I dreamt it

mbonnin · Answer

Can you catch the exception If the server responded something it should be in `exception payload`

Sean Proctor · Answer

Ah ha Progress It looks like it s not authenticating the same with JS

Sean Proctor · Answer

The header isn t being added to the WS request

Sean Proctor · Answer

My client initialization looks like this ```ApolloClient Builder httpServerUrl httpServeUrl addHttpInterceptor AuthorizationInterceptor token subscriptionNetworkTransport WebSocketNetworkTransport Builder serverUrl webSocketServeUrl addHeader Authorization Bearer $ token value build build ``` Works fine on Android I guess I can only blame myself here

mbonnin · Answer

mmmm If you re calling `addHeader ` on JS it should work similarly

mbonnin · Answer

Or is the client created in a different place on JS

Sean Proctor · Answer

The headers aren t used in the browser <https github com apollographql apollo kotlin blob main libraries apollo runtime src jsMain kotlin com apollographql apollo3 network ws JsWebSocketEngine kt L96|https github com apollographql apollo kotlin blob main libraries apollo runtime otlin com apollographql apollo3 network ws JsWebSocketEngine kt>

mbonnin · Answer

Mmmm that feels wrong

mbonnin · Answer

Looks like there s some background stories to these lines eyes

mbonnin · Answer

Oh gosh <https stackoverflow com a 4361358 752630>

mbonnin · Answer

We should throw early at least

Sean Proctor · Answer

I m trying to figure out how hasura expects me to authenticate in this case If I remember well they have a bit of a weird implementation

Sean Proctor · Answer

Thanks so much for your help Chased down the issue Apparently Hasura accepts the authorization in either place so this works on all platforms ```ApolloClient Builder httpServerUrl httpServeUrl addHttpInterceptor AuthorizationInterceptor token webSocketServerUrl webSocketServeUrl wsProtocol SubscriptionWsProtocol Factory connectionPayload = mapOf headers to mapOf Authorization to Bearer $ token value build ```

mbonnin · Answer

Thanks for the follow up Definitely something to be aware of