Error: WebSocket is already in CLOSING or CLOSED state

[Mangatt]

After switching from subscriptions-transport-ws in Apollo client, there is always error WebSocket is already in CLOSING or CLOSED state after initialization in browser console.

Further Information

• graphql-ws: 5.6.2
• @apollo/client: 3.5.10
• Chrome: 99.0.4844.51

const wsLink = new GraphQLWsLink(
	createClient({
		url: 'ws://localhost:4000',
		connectionParams: async () => ({
			credentials: 'include',
			authorization: await getAuthToken(),
		}),
	})
)

[enisdenjo]

Does it work without using the GraphQLWsLink? Create a graphql-ws client (const client = createClient({ ... })) and use it directly through client.subscribe.

If there's no problem then, consider opening an issue in apollo-client instead.

However, if it's still breaking, please provide more info - the full callstack of the Error (please provide it anyway), or ideally a minimal repro.

[Mangatt]

Callstack:

WebSocket is already in CLOSING or CLOSED state.
socket.onopen @ client.mjs:167

[Mangatt]

And yes, error is present even without GraphQLWsLink, when calling client.subscribe().

[Mangatt]

Just a thought - can this be possibly connected to async connectionParams? Because as of now I can get some subscriptions without error. Error appears randomly after browser reload, without changing anything in code.

[enisdenjo]

What's the WebSocket connection close code? You can see it in the Chrome's DevTools for the WebSocket connection.

Just a thought - can this be possibly connected to async connectionParams?

The connection process stalls until the connectionParams resolve, it could be that you're unsubscribing before connectionParams. This might cause the socket to close early. Can you please check that?

A screenshot of the WebSocket messages from Chrome's DevTools would be helpful too (if there are any).

Preferably, it would be of great help if you could offer a minimal repro.

[enisdenjo]

Oh and, does your connectionParams even resolve? Does it maybe throw instead?

const wsLink = new GraphQLWsLink(
	createClient({
		url: 'ws://localhost:4000',
		connectionParams: async () => ({
			credentials: 'include',
			authorization: await getAuthToken(),
		}),
+               on: {
+                 error: (err) => {
+                   console.log(err); // 👈 does this log?
+                 },
+               },
	})
)

Also, you've never shared the actual subscription error? Is there any in client.subscribe(<operation>, { error: (err) => { here } })?

[enisdenjo]

🎉 This issue has been resolved in version 5.6.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[enisdenjo]

Inspecting the callstack and taking a hint from your further comment - I suspect that the connectionParams is taking too long to resolve, causing the server to kick off the client respecting the connectionInitWaitTimeout.

To solve it, simply increase the timeout on the server or speed up the connectionParams.

The fix released in v5.6.3 stops execution after connectionParams if the connection was closed while waiting. Previously, the client was trying to send a message afterwards regardless, leading to the error in the browser's console.

[Mangatt]

Thanks, 5.6.3 have solved the problem.