WebSocket transport in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a WebSocket connection for GraphQL subscriptions.

GraphQL

const wsClient = new WebSocket('[1]');

Drag options to blanks, or click blank then click option'

Aftp://localhost:4000/graphql

Bhttp://localhost:4000/graphql

Cfile://localhost:4000/graphql

Dws://localhost:4000/graphql

Attempts:

3 left

💡 Hint

Common Mistakes

Using http:// instead of ws://

Using unsupported protocols like ftp:// or file://

The WebSocket URL must start with ws:// or wss:// for secure connections. Here, ws://localhost:4000/graphql is correct.

2fill in blank

medium

Complete the code to send a GraphQL subscription start message over WebSocket.

GraphQL

wsClient.send(JSON.stringify({ type: '[1]', id: '1', payload: { query: SUBSCRIPTION_QUERY } }));

Drag options to blanks, or click blank then click option'

Astart

Bquery

Cstop

Dconnection_init

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'query' instead of 'start' for subscription messages

Using 'connection_init' which is for connection setup, not starting subscriptions

The message type to start a subscription is start. This tells the server to begin sending subscription data.

3fill in blank

hard

Fix the error in the WebSocket message handler to correctly parse incoming data.

GraphQL

wsClient.onmessage = event => { const data = JSON.parse(event.[1]); console.log(data); };

Drag options to blanks, or click blank then click option'

Amessage

Bdata

Ctext

Dpayload

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to parse event.message or event.payload which do not exist

Not parsing the string before using it

The WebSocket event object has a data property containing the message as a string. We parse event.data.

4fill in blank

hard

Fill both blanks to correctly handle a GraphQL subscription stop message and close the WebSocket.

GraphQL

if (message.type === '[1]') { wsClient.[2](); }

Drag options to blanks, or click blank then click option'

Astop

Bstart

Cclose

DcloseConnection

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start' instead of 'stop' to end subscription

Calling a non-existent method like 'closeConnection()'

The message type to stop a subscription is stop. To close the WebSocket, call wsClient.close().

5fill in blank

hard

Fill all three blanks to initialize a WebSocket connection with connection_init message and send it.

GraphQL

const initMessage = { type: '[1]', payload: { headers: { Authorization: '[2]' } } }; wsClient.[3](JSON.stringify(initMessage));

Drag options to blanks, or click blank then click option'

Aconnection_init

BBearer token123

Csend

Dstart

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start' instead of 'connection_init' for initialization

Forgetting to use 'send' method to send the message

The connection initialization message type is connection_init. The Authorization header uses a bearer token string. To send the message, use wsClient.send().