WebSocket transport in GraphQL - Mini Project: Build & Apply

GraphQL WebSocket Transport Setup

📖 Scenario: You are building a real-time chat application that uses GraphQL subscriptions to receive live updates. To enable this, you need to set up WebSocket transport for your GraphQL server.

🎯 Goal: Set up the WebSocket transport configuration for a GraphQL server to handle subscription operations.

📋 What You'll Learn

Create a WebSocket transport configuration object named wsTransport with the URL "wss://chat.example.com/graphql".

Add a reconnect property set to true to enable automatic reconnection.

Define a connectionParams function that returns an object with an authToken property set to "abc123".

Export the wsTransport object as the default export.

💡 Why This Matters

🌍 Real World

Real-time applications like chat apps, live sports updates, or stock tickers use GraphQL subscriptions over WebSocket transport to receive live data.

💼 Career

Understanding WebSocket transport setup is essential for frontend and backend developers working with real-time GraphQL APIs.

1

Create WebSocket transport object

Create a constant called wsTransport and assign it an object with a url property set to "wss://chat.example.com/graphql".

GraphQL

# Your code here

Hint

Use const wsTransport = { url: "wss://chat.example.com/graphql" };

2

Add reconnect property

Add a reconnect property set to true inside the wsTransport object.

GraphQL

const wsTransport = {
  url: "wss://chat.example.com/graphql",
  // Add reconnect property here
};

Hint

Add reconnect: true inside the object.

3

Add connectionParams function

Add a connectionParams property to wsTransport that is a function returning an object with authToken set to "abc123".

GraphQL

const wsTransport = {
  url: "wss://chat.example.com/graphql",
  reconnect: true,
  // Add connectionParams function here
};

Hint

Use an arrow function that returns { authToken: "abc123" }.

4

Export the WebSocket transport

Export the wsTransport object as the default export using export default wsTransport;.

GraphQL

const wsTransport = {
  url: "wss://chat.example.com/graphql",
  reconnect: true,
  connectionParams: () => ({ authToken: "abc123" })
};
// Export wsTransport as default

Hint

Use export default wsTransport; at the end of the file.