I'm trying to get Apollo working on a JS target. The same code on Android/JVM works fine, on JS it t...

# apollo-kotlin

[Sean Proctor]

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 <subscriptionName>". Is there anything JS-specific with subscriptions that I should know?

[bod]

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]

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

[Sean Proctor]

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]

Got to love the coroutines stacktraces 😬 ....

[mbonnin]

If I read the exception right, this is a SubscriptionOperationException which means your backend has returned an error so it should be seen in the Browser devtools

[mbonnin]

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

[mbonnin]

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

[Sean Proctor]

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]

hmm no there are no other logging levels than that

[Sean Proctor]

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

[bod]

ah! But you can see the messages sent/received?

[Sean Proctor]

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]

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]

Yes

[mbonnin]

Alright, maybe I dreamt it

[mbonnin]

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

[Sean Proctor]

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

[Sean Proctor]

The header isn't being added to the WS request.

[Sean Proctor]

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]

mmmm If you're calling addHeader() on JS, it should work similarly

[mbonnin]

Or is the client created in a different place on JS?

[Sean Proctor]

The headers aren't used in the browser: https://github.com/apollographql/apollo-kotlin/blob/main/libraries/apollo-runtime/[…]otlin/com/apollographql/apollo3/network/ws/JsWebSocketEngine.kt

[mbonnin]

Mmmm that feels wrong

[mbonnin]

Looks like there's some background stories to these lines 👀

[mbonnin]

Oh gosh... https://stackoverflow.com/a/4361358/752630

[mbonnin]

We should throw early at least

[Sean Proctor]

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]

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]

Thanks for the follow up. Definitely something to be aware of!