Subscriptions in NestJS - Step-by-Step Execution

Concept Flow - Subscriptions

Client sends subscription request

↓

Server sets up subscription resolver

↓

Server listens for events/data changes

↓

Event occurs -> Server pushes update

↓

Client receives real-time data

↓

Client can unsubscribe anytime

↓

Subscription ends

This flow shows how a client subscribes to real-time data updates, the server listens and pushes updates, and the client receives them until unsubscribing.

Execution Sample

NestJS

import { Resolver, Subscription } from '@nestjs/graphql';
import { PubSub } from 'graphql-subscriptions';

const pubSub = new PubSub();

@Resolver()
export class MessageResolver {
  @Subscription(() => String)
  messageSent() {
    return pubSub.asyncIterator('messageSent');
  }
}

This code sets up a GraphQL subscription in NestJS that listens for 'messageSent' events and pushes string messages to subscribed clients.

Execution Table

Step	Action	Server State	Client State	Output
1	Client sends subscription request	Waiting for subscription	Request sent	No data yet
2	Server sets up subscription resolver	Subscription resolver ready	Waiting for data	No data yet
3	Server listens for 'messageSent' events	Listening for events	Subscribed	No data yet
4	Event 'messageSent' triggered with 'Hello!'	Event received	Receives update	'Hello!' sent to client
5	Client receives 'Hello!'	Idle, waiting for next event	Data updated: 'Hello!'	Client UI updates
6	Client unsubscribes	Subscription closed	Unsubscribed	No further updates
7	No more events sent	No active subscriptions	No active subscriptions	Subscription ended

💡 Client unsubscribes or connection closes, ending the subscription.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 6	Final
subscriptionActive	false	true	true	false	false
lastMessage	null	null	'Hello!'	'Hello!'	'Hello!'

Key Moments - 3 Insights

Why does the client not receive any data immediately after subscribing?

Because the subscription only pushes data when an event occurs (see Step 3 and 4 in execution_table). Until then, the client waits.

What happens if the client unsubscribes but the server still emits events?

The client will not receive updates after unsubscribing (Step 6), as the subscription is closed on the server side.

How does the server know which events to send to which clients?

The server uses the subscription resolver and PubSub asyncIterator to listen for specific events and push updates only to subscribed clients (Step 2 and 3).

Visual Quiz - 3 Questions

Look at the execution table, at which step does the client first receive data?

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

Check the 'Output' column for when 'Hello!' is sent to client.

According to variable_tracker, what is the value of 'subscriptionActive' after the client unsubscribes?

A false

B null

C true

D 'Hello!'

💡 Hint

Look at the 'After Step 6' column for 'subscriptionActive'.

If the server never triggers the 'messageSent' event, what will the client see?

A Error message

B Continuous data updates

C No data received

D Subscription ends immediately

💡 Hint

Refer to Steps 3 and 4 in execution_table where data is sent only on event.

Concept Snapshot

Subscriptions in NestJS GraphQL:
- Use @Subscription decorator in resolver
- Return pubSub.asyncIterator(eventName) to listen
- Client subscribes and waits for events
- Server pushes updates on event
- Client receives real-time data until unsubscribing

Full Transcript

Subscriptions in NestJS allow clients to receive real-time updates from the server. The client sends a subscription request, and the server sets up a subscription resolver that listens for specific events using PubSub. When an event occurs, the server pushes data to all subscribed clients. The client receives these updates and can unsubscribe anytime to stop receiving data. This flow enables live data communication, such as chat messages or notifications, in a simple and efficient way.