Subscription syntax in GraphQL - Step-by-Step Execution

Concept Flow - Subscription syntax

Client sends subscription request

↓

Server registers subscription

↓

Event occurs on server

↓

Server sends data update to client

↓

Client receives real-time data

↓

Repeat on new events

The client subscribes to a data stream, the server listens for events, and sends updates to the client in real-time.

Execution Sample

GraphQL

subscription OnMessageAdded {
  messageAdded {
    id
    content
    author
  }
}

This subscription listens for new messages and receives their id, content, and author when added.

Execution Table

Step	Action	Server State	Client State	Data Sent
1	Client sends subscription request OnMessageAdded	Subscription registered for messageAdded	Waiting for data	None
2	New message event occurs on server	Detects new message event	Waiting for data	None
3	Server sends messageAdded data to client	Subscription active	Receives message with id, content, author	{"id": 1, "content": "Hello", "author": "Alice"}
4	Client processes received data	Subscription active	Data displayed to user	Displayed message data
5	Another message event occurs	Detects new message event	Waiting for data	None
6	Server sends new messageAdded data	Subscription active	Receives new message data	{"id": 2, "content": "Hi!", "author": "Bob"}
7	Client processes new data	Subscription active	Data updated on screen	Displayed new message data
8	Client unsubscribes or connection closes	Subscription removed	No longer receiving data	None

💡 Subscription ends when client unsubscribes or connection closes

Variable Tracker

Variable	Start	After Step 3	After Step 6	Final
subscriptionStatus	Not registered	Active	Active	Removed
receivedData	None	{"id":1, "content":"Hello", "author":"Alice"}	{"id":2, "content":"Hi!", "author":"Bob"}	None
clientDisplay	Empty	Shows first message	Shows updated messages	Cleared or static

Key Moments - 3 Insights

Why does the client keep receiving data after the initial subscription request?

Because the subscription stays active on the server, sending data whenever the event occurs, as shown in execution_table steps 3 and 6.

What happens if the client closes the connection?

The server removes the subscription and stops sending data, as shown in execution_table step 8.

Does the client need to request data repeatedly?

No, the server pushes updates automatically after the subscription is registered, shown by the continuous data sent in steps 3 and 6.

Visual Quiz - 3 Questions

Look at the execution_table, what is the subscriptionStatus after step 3?

A Not registered

B Removed

C Active

D Pending

💡 Hint

Check the variable_tracker row for subscriptionStatus at After Step 3

At which step does the client first receive data?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at execution_table Data Sent column to see when data is first sent

If the client unsubscribes earlier, which step would be skipped?

A Step 3

B Step 6

C Step 8

D Step 1

💡 Hint

Unsubscribing stops further data, so no new data after first send (step 6)

Concept Snapshot

GraphQL subscriptions let clients listen for real-time data.
Syntax starts with 'subscription' keyword.
Server pushes updates when events happen.
Client receives data automatically until unsubscribed.
Useful for live updates like chat messages or notifications.

Full Transcript

GraphQL subscriptions allow a client to open a real-time connection to the server. The client sends a subscription request specifying the event to listen for. The server registers this subscription and waits for relevant events. When an event occurs, the server sends the updated data to the client immediately. The client receives and processes this data, updating the display or state. This cycle repeats for each new event until the client unsubscribes or closes the connection. This mechanism enables live data updates without repeated requests.