Unable to create subscription using GraphQLWebSocketClient

[kpostekk]

tl;dr
The current implementation of graphql-transport-ws in this library has a bug where initial flag is not sent.

Accroding to PR #330 I should be able to establish a WS connection with any GraphQL server that supports graphql-transport-ws.
Unfortunately, there is no mention in docs how to do it using the GraphQLWebSocketClient class.
Anyway, I have tried using one of my subscriptions from Mercurius server with following code.

const socket = new WebSocket('ws://localhost:3000/graphql')
socket.addEventListener('open', () => {
  const why = new GraphQLWebSocketClient(socket, {})
  why.rawSubscribe<SpeedSubscription>(
    `subscription {
      state {
        speed
      }
    }`,
    {
      error: (err) => console.error('gql-req', { err }),
      next: (data) => console.log('gql-req', { data }),
      complete: () => console.log('complete'),
    }
  )
})

Instead of continous communication, socket was immediately closed.

Implementing identical logic in graphql-ws was working as it should

const c = createClient({
  url: 'ws://localhost:3000/graphql',
})
c.subscribe(
  {
    query: `subscription {
      state {
        speed
      }
    }`,
  },
  {
    error: (err) => console.error('gql-ws', { err }),
    next: (data) => console.log('gql-ws', { data }),
    complete: () => console.log('complete'),
  }
)

I think implementation of graphql-transport-ws in previously mentioned PR has lack of initial flag.

[lyubo]

@kpostekk Please see recently added test file for a working subscription example

[kpostekk]

Gonna test it asap

[lyubo]

Gonna test it asap
It is browsable in PR #474, you can try to run it from my fork, but I think just looking at source would be enough.

[kpostekk]

After receiving "connection_ack" code does not send a query to server.

My implementation

export function useStateSubscription() {
  const config = useConfig()
  const socket = useMemo(
    () => new WebSocket(config.stateStreamer, 'graphql-transport-ws'),
    [config.stateStreamer]
  )
  const client = useMemo(() => new GraphQLWebSocketClient(socket, {}), [socket])

  useEffect(() => {
    if (socket.readyState !== WebSocket.OPEN) return
    const unsubscribe = client.rawSubscribe<
      RealtimeContentSubscription,
      RealtimeContentSubscriptionVariables
    >(RealtimeContentDocument, {
      next: (data) => console.log({ data }),
      complete: () => console.log('completed (gqlr)')
    })
    return unsubscribe
  }, [config.stateStreamer])
}

Received:

I think it's worth to mention the fact that connection is not closed, because server is wating for query.

Expected:

[kpostekk]

I also don't exclude bugs from my side. I think not including docs for WS isn't helpful tho.

[jasonkuhrt]

@kpostekk PR adding docs for web socket stuff is welcome!