Subscriptions in NestJS - Mini Project: Build & Apply

Building a GraphQL Subscription with NestJS

📖 Scenario: You are creating a real-time chat application using NestJS and GraphQL. You want users to receive new messages instantly without refreshing the page.

🎯 Goal: Build a GraphQL subscription in NestJS that streams new chat messages to subscribed clients in real time.

📋 What You'll Learn

Create a simple message array to hold chat messages

Add a configuration variable for the subscription event name

Implement a subscription resolver using NestJS GraphQL decorators

Complete the subscription setup to broadcast new messages

💡 Why This Matters

🌍 Real World

Real-time chat apps, live notifications, and instant updates use subscriptions to push data to clients without refreshing.

💼 Career

Understanding subscriptions in NestJS is key for backend developers building interactive, real-time web applications.

1

Create the initial message data array

Create a constant array called messages with these exact objects: { id: 1, text: 'Hello' } and { id: 2, text: 'Welcome' }.

NestJS

// Create the messages array with two message objects
// Your code here

Need a hint?

Use const messages = [ ... ] with two objects inside the array.

2

Add a subscription event name constant

Add a constant string called NEW_MESSAGE_EVENT and set it to 'newMessage'.

NestJS

const messages = [
  { id: 1, text: 'Hello' },
  { id: 2, text: 'Welcome' }
];

// Define the subscription event name
// Your code here

Need a hint?

Use const NEW_MESSAGE_EVENT = 'newMessage'; to define the event name.

3

Implement the subscription resolver method

Inside a NestJS resolver class, create a method called newMessage decorated with @Subscription(() => Message) that returns an async iterator from pubSub.asyncIterator(NEW_MESSAGE_EVENT). Use pubSub as the PubSub instance.

NestJS

const messages = [
  { id: 1, text: 'Hello' },
  { id: 2, text: 'Welcome' }
];

const NEW_MESSAGE_EVENT = 'newMessage';

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

const pubSub = new PubSub();

@Resolver()
export class MessageResolver {
  // Add the subscription method here
  // Your code here
}

Need a hint?

Use @Subscription(() => Message) above the newMessage method and return pubSub.asyncIterator(NEW_MESSAGE_EVENT).

4

Complete the subscription by publishing new messages

Add a method called sendMessage that takes a text string, creates a new message object with an id one higher than the last message, pushes it to messages, and calls pubSub.publish(NEW_MESSAGE_EVENT, { newMessage: newMsg }).

NestJS

const messages = [
  { id: 1, text: 'Hello' },
  { id: 2, text: 'Welcome' }
];

const NEW_MESSAGE_EVENT = 'newMessage';

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

const pubSub = new PubSub();

@Resolver()
export class MessageResolver {
  @Subscription(() => Message)
  newMessage() {
    return pubSub.asyncIterator(NEW_MESSAGE_EVENT);
  }

  // Add sendMessage method here
  // Your code here
}

Need a hint?

Create sendMessage that adds a new message and publishes it with pubSub.publish.