Why subscriptions enable real-time data in GraphQL - Visual Breakdown

Concept Flow - Why subscriptions enable real-time data

Client sends subscription request

↓

Server keeps connection open

↓

Server listens for data changes

↓

When data changes, server sends update

↓

Client receives real-time update

↓

Client updates UI or state

↓

Connection stays open for more updates

The client asks the server to watch data. The server keeps the connection open and sends updates whenever data changes, so the client gets real-time information.

Execution Sample

GraphQL

subscription {
  messageAdded {
    id
    content
    author
  }
}

This subscription listens for new messages and receives their id, content, and author as soon as they are added.

Execution Table

Step	Action	Server State	Client State	Data Sent
1	Client sends subscription request	Connection open, listening for messageAdded events	Waiting for updates	None
2	No new messages yet	Still listening, no events triggered	Waiting for updates	None
3	New message added to server	Detected new messageAdded event	Receives new message data	{"id": "1", "content": "Hello!", "author": "Alice"}
4	Client updates UI with new message	Connection still open	UI shows new message	None
5	Another message added	Detected second messageAdded event	Receives second message data	{"id": "2", "content": "Hi Alice!", "author": "Bob"}
6	Client updates UI with second message	Connection still open	UI shows second message	None
7	Client or server closes connection	Connection closed	No longer receiving updates	None

💡 Subscription ends when client or server closes the connection

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
connection	closed	open	open	closed
receivedMessages	[]	[{"id": "1", "content": "Hello!", "author": "Alice"}]	[{"id": "1", "content": "Hello!", "author": "Alice"}, {"id": "2", "content": "Hi Alice!", "author": "Bob"}]	[{"id": "1", "content": "Hello!", "author": "Alice"}, {"id": "2", "content": "Hi Alice!", "author": "Bob"}]

Key Moments - 3 Insights

Why does the server keep the connection open during a subscription?

The server keeps the connection open to send updates immediately when data changes, as shown in execution_table steps 1 to 6.

What happens if no new data arrives after the subscription starts?

The client waits without receiving data, as seen in step 2 where the server listens but no data is sent.

How does the client get real-time updates?

The server sends data instantly when changes happen, and the client updates its state, shown in steps 3 and 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the client state at step 2?

A UI shows new message

B Waiting for updates

C Connection closed

D Sending subscription request

💡 Hint

Check the 'Client State' column at step 2 in the execution_table.

At which step does the client receive the first real-time message data?

A Step 3

B Step 5

C Step 1

D Step 7

💡 Hint

Look at the 'Data Sent' column to find when the first message data is sent.

If the server stopped sending updates, what would the client state be after step 2?

A UI shows new message

B Connection closed

C Waiting for updates

D Sending subscription request

💡 Hint

Refer to step 2 where no new messages have arrived yet.

Concept Snapshot

GraphQL subscriptions keep a connection open between client and server.
The server sends data updates instantly when changes happen.
Clients receive real-time data without asking repeatedly.
This enables live features like chat or notifications.
Subscription ends when connection closes.

Full Transcript

GraphQL subscriptions allow clients to get real-time data by keeping a connection open to the server. The client sends a subscription request, and the server listens for data changes. When new data appears, the server sends it immediately to the client. The client updates its display or state with this new data. This process continues until the client or server closes the connection. This way, clients get live updates without needing to ask repeatedly, making apps feel fast and responsive.