Subscriptions in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the required module for GraphQL subscriptions in NestJS.

NestJS

import { [1] } from '@nestjs/graphql';

Drag options to blanks, or click blank then click option'

ASubscription

BGraphQLModule

CResolver

DQuery

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'Subscription' instead of 'GraphQLModule'.

Using 'Query' which is for queries, not subscriptions.

The GraphQLModule is imported from @nestjs/graphql to enable GraphQL features including subscriptions.

2fill in blank

medium

Complete the code to define a subscription method in a NestJS resolver.

NestJS

@Subscription()
[1]() {
  return pubSub.asyncIterator('messageAdded');
}

Drag options to blanks, or click blank then click option'

Asubscribe

Basync

Cresolve

Dlisten

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'async' keyword without 'function' keyword.

Using 'resolve' which is for queries or mutations.

The @Subscription() decorator marks subscription resolver methods. The method returns pubSub.asyncIterator('messageAdded'). Conventionally, the method is named subscribe.

3fill in blank

hard

Fix the error in the subscription setup by completing the missing import.

NestJS

import { PubSub } from '[1]';

const pubSub = new PubSub();

Drag options to blanks, or click blank then click option'

Aapollo-server-express

B@nestjs/graphql

Cgraphql-subscriptions

Drxjs

Attempts:

3 left

💡 Hint

Common Mistakes

Importing PubSub from '@nestjs/graphql' which does not export it.

Using 'rxjs' which is for reactive programming but not for GraphQL PubSub.

The PubSub class used for subscriptions comes from the graphql-subscriptions package, which provides a simple event pub-sub mechanism.

4fill in blank

hard

Fill both blanks to correctly configure the GraphQLModule for subscriptions in NestJS.

NestJS

GraphQLModule.forRoot({
  installSubscriptionHandlers: [1],
  subscriptions: {
    'graphql-ws': [2]
  }
})

Drag options to blanks, or click blank then click option'

Atrue

Bfalse

C{}

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Setting installSubscriptionHandlers to false disables subscriptions.

Using null instead of an object for subscriptions config.

To enable subscriptions, installSubscriptionHandlers must be set to true. The subscriptions option can be configured with an empty object {} to use default settings for 'graphql-ws'.

5fill in blank

hard

Fill all three blanks to create a subscription resolver that publishes a message event.

NestJS

import { Resolver, [1] } from '@nestjs/graphql';
import { PubSub } from 'graphql-subscriptions';

const pubSub = new PubSub();

@Resolver()
export class MessageResolver {
  @[2]()
  messageAdded() {
    return pubSub.asyncIterator('messageAdded');
  }

  async addMessage(content: string) {
    await pubSub.[3]('messageAdded', { messageAdded: content });
  }
}

Drag options to blanks, or click blank then click option'

ASubscription

Cpublish

DQuery

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Query' decorator instead of 'Subscription'.

Calling 'subscribe' instead of 'publish' to send events.

The Subscription decorator marks the subscription method. The publish method of pubSub sends events to subscribers.

Practice

1. What is the main purpose of subscriptions in NestJS GraphQL?

easy

A. To perform database migrations

B. To send live updates automatically to clients

C. To handle HTTP GET requests

D. To serve static files

Solution

1. Step 1: Understand the role of subscriptions

   Subscriptions are designed to push live data updates to clients without the client needing to request repeatedly.

2. Step 2: Compare with other options

   HTTP GET requests, database migrations, and serving static files are unrelated to live data updates.

3. Final Answer:

   To send live updates automatically to clients -> Option B

4. Quick Check:

   Subscriptions = live updates [OK]

Hint: Subscriptions push live data updates automatically [OK]

Common Mistakes:

• Confusing subscriptions with HTTP request handling
• Thinking subscriptions manage database tasks
• Assuming subscriptions serve static content

2. Which decorator is used in NestJS to define a GraphQL subscription method?

easy

A. @Query

B. @Mutation

C. @Subscription

D. @Injectable

Solution

1. Step 1: Identify the decorator for subscriptions

   The @Subscription decorator marks a method as a GraphQL subscription resolver in NestJS.

2. Step 2: Differentiate from other decorators

   @Query is for queries, @Mutation for mutations, and @Injectable for services, not subscriptions.

3. Final Answer:

   @Subscription -> Option C

4. Quick Check:

   @Subscription decorator = subscriptions [OK]

Hint: Use @Subscription decorator for live data methods [OK]

Common Mistakes:

• Using @Query or @Mutation instead of @Subscription
• Confusing @Injectable with subscription decorators
• Omitting the decorator entirely

3. Given this subscription resolver snippet, what will be the output when a new message is published?

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

const pubSub = new PubSub();

@Resolver()
export class ChatResolver {
  @Subscription(() => String, {
    resolve: (payload) => `New message: ${payload.text}`,
  })
  messageAdded() {
    return pubSub.asyncIterator('messageAdded');
  }
}

// Somewhere else: pubSub.publish('messageAdded', { text: 'Hello!' });

medium

A. New message: Hello!

B. Hello!

C. messageAdded

D. Error: asyncIterator not found

Solution

1. Step 1: Understand the subscription resolver

   The resolver listens to 'messageAdded' events and uses the resolve function to format the payload text.

2. Step 2: Analyze the published payload

   The payload has { text: 'Hello!' }, so the resolve function returns 'New message: Hello!'.

3. Final Answer:

   New message: Hello! -> Option A

4. Quick Check:

   Resolve formats payload = 'New message: Hello!' [OK]

Hint: Resolve function formats payload text in subscription [OK]

Common Mistakes:

• Expecting raw payload without resolve formatting
• Confusing event name with output
• Assuming asyncIterator causes error

4. Identify the error in this subscription setup:

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

const pubSub = new PubSub();

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

// Missing pubSub.publish call elsewhere

medium

A. pubSub.asyncIterator called with wrong event name

B. Subscription method missing return statement

C. Incorrect decorator used for subscription

D. No events are published, so no updates sent

Solution

1. Step 1: Check subscription method correctness

   The method correctly returns pubSub.asyncIterator with the event name.

2. Step 2: Identify missing event publishing

   No call to pubSub.publish('newNotification', ...) means no events are emitted, so clients receive no updates.

3. Final Answer:

   No events are published, so no updates sent -> Option D

4. Quick Check:

   Missing publish call = no updates sent [OK]

Hint: Always publish events to trigger subscription updates [OK]

Common Mistakes:

• Forgetting to call pubSub.publish
• Using wrong event name in asyncIterator
• Omitting return in subscription method

5. You want to create a subscription that only sends updates to clients when the message's author matches their user ID. Which approach correctly implements this filter in NestJS subscriptions? A) Use pubSub.asyncIterator('messageAdded') directly without filtering. B) Use the filter option in the @Subscription decorator to compare payload author and user ID. C) Filter messages inside the resolver method after returning the async iterator. D) Use a separate query instead of subscription to filter messages.

hard

A. Use filter option in @Subscription to send only matching messages

B. Subscribe directly without filtering; client filters messages

C. Filter messages inside resolver after asyncIterator returns

D. Use query instead of subscription for filtering

Solution

1. Step 1: Understand subscription filtering

   NestJS supports a filter option in the @Subscription decorator to send events selectively based on payload and context.

2. Step 2: Evaluate options

   The filter option in the @Subscription decorator compares the message author with the client's user ID from context, sending only relevant updates. Subscribing directly without filtering sends all events to clients, filtering after the asyncIterator returns is not the standard approach, and using a query provides no live updates.

3. Final Answer:

   Use filter option in @Subscription to send only matching messages -> Option A

4. Quick Check:

   Filter option = selective subscription updates [OK]

Hint: Use @Subscription filter option to send selective updates [OK]

Common Mistakes:

• Not using filter option and sending all events
• Trying to filter after asyncIterator returns
• Using queries instead of subscriptions for live updates