Unsubscribing in GraphQL - Step-by-Step Execution

Concept Flow - Unsubscribing

Start Subscription

↓

Receive Data Stream

↓

Check Unsubscribe Request?

No→Continue Receiving

Yes↓

Stop Data Stream

↓

Clean Up Resources

↓

End

This flow shows how a GraphQL subscription starts, receives data, checks if the client wants to unsubscribe, and then stops and cleans up.

Execution Sample

GraphQL

subscription {
  newMessages {
    id
    content
  }
}

// Later client calls unsubscribe()

This subscription listens for new messages and later the client unsubscribes to stop receiving updates.

Execution Table

Step	Action	State	Result
1	Start subscription	Subscribed	Listening for newMessages
2	Receive new message	Subscribed	Data received: message with id and content
3	Client calls unsubscribe()	Unsubscribing	Stopping data stream
4	Clean up resources	Unsubscribed	No more data received
5	Attempt to receive data	Unsubscribed	No data received, subscription ended

💡 Client unsubscribed, so subscription stopped and no more data is received.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
subscriptionState	None	Subscribed	Subscribed	Unsubscribing	Unsubscribed	Unsubscribed
dataReceived	None	None	Message data	Message data	None	None

Key Moments - 2 Insights

Why does the subscription stop receiving data after unsubscribe is called?

Because at Step 3 in the execution_table, the client calls unsubscribe(), which changes the subscriptionState to 'Unsubscribing' and then 'Unsubscribed' at Step 4, stopping the data stream.

Can the client receive data after unsubscribing?

No, as shown in Step 5 of the execution_table, after unsubscribing, the subscriptionState is 'Unsubscribed' and no data is received.

Visual Quiz - 3 Questions

Look at the execution_table, what is the subscriptionState after Step 2?

A Unsubscribing

B Subscribed

C Unsubscribed

D None

💡 Hint

Check the 'State' column at Step 2 in the execution_table.

At which step does the client call unsubscribe()?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look for the action 'Client calls unsubscribe()' in the execution_table.

If the client never calls unsubscribe(), what would happen at Step 5?

A SubscriptionState would be 'Unsubscribing' and data would stop

B SubscriptionState would be 'Unsubscribed' and no data received

C SubscriptionState would be 'Subscribed' and data would continue to be received

D SubscriptionState would be 'None' and no data received

💡 Hint

Refer to the variable_tracker and execution_table showing subscriptionState changes.

Concept Snapshot

GraphQL subscriptions start by opening a data stream.
Client receives real-time data until it calls unsubscribe().
Unsubscribe stops the stream and cleans up resources.
After unsubscribing, no more data is received.
Always call unsubscribe to avoid resource leaks.

Full Transcript

This visual execution shows how a GraphQL subscription works and how unsubscribing stops the data stream. First, the subscription starts and listens for new messages. When a new message arrives, the client receives it. Later, the client calls unsubscribe(), which changes the subscription state to unsubscribing and then unsubscribed. This stops the data stream and cleans up resources. After unsubscribing, no more data is received. This process helps manage resources and avoid unnecessary data flow.