NestJS와 Graphql Subscription

NestJS에서 Subscriptions 구현하기

Graphql Subscription을 NestJS에서 구현하여 실시간으로 message가 변경되는 프로그램을 작성해보았습니다. 

 

Graphql Subscription 이란?

https://nayoon030303.tistory.com/43

GraphQL subscription

 

Graphql의 Query, Mutation와 마찬가지로 기본적으로 데이터를 조회하기 위해서 사용됩니다. 

하지만 http 통신이 아닌 WebSocket을 기반으로 서버로부터 지속적인 업데이트를 받을 수 있습니다. 

즉 실시간 통신 애플리케이션을 만들 때 사용됩니다. 

 

코드

id와 message를 가진 msg라는 객체가 있습니다. 

setMessage를 할 때마다 입력된 message로 현재 message가 변경됩니다. 

 

// app.service.ts
import { Injectable } from '@nestjs/common';
import { MessageType } from './property.object.type';

@Injectable()
export class AppService {
  private message = 'Hello World';
  private id = 1;

  getMessage(): MessageType {
    const msg: MessageType = {
      id: this.id,
      message: this.message,
    };

    return msg;
  }

  setMessage(msg) {
    this.message = msg;
    const property = {
      id: this.id,
      message: this.message,
    };
    return property;
  }
}

 

msg를 조회하는 getMessage라는 Query

msg의 message를 변경하는 setMessage라는 Mutation

msg가 변경될 때마다 정보를 보내는 messageChanged라는 Subscription 이 있습니다.

Subscription은 'messageChanged'라는 메시지가 불리기 전까지 대기하고 있습니다. 

변경이 일어날 때(Mutation이 불릴 때)마다 'messageChanged'라는 메시지가 불리고 newMessage가 pubsub 객체에 들어갑니다. 

//app.resolver.ts
import { Args, Mutation, Query, Resolver, Subscription } from '@nestjs/graphql';
import { PubSub } from 'graphql-subscriptions';
import { AppService } from './app.service';
import { MessageType } from './property.object.type';

@Resolver('App')
export class AppResolver {
  constructor(private readonly appService: AppService) {}
  pubSub = new PubSub();
  
  @Query(() => MessageType)
  async getMessage() {
    return await this.appService.getMessage();
  }

  @Mutation(() => MessageType)
  async setMessage(
    @Args('msg', { type: () => String, nullable: false }) msg?: string,
  ) {
    const newMessage = await this.appService.setMessage(msg);
    this.pubSub.publish('messageChanged', { messageChanged: newMessage });
    return newMessage;
  }

  @Subscription(() => MessageType, {
    filter: (payload, variables) => payload.messageChanged.id === variables.id,
  })
  messageChanged(
    @Args('id', { type: () => Number, nullable: false }) id?: number,
  ) {
    return this.pubSub.asyncIterator('messageChanged');
  }
}

 

코드를 보시다 보면 Subscription만 다른 Query와 Mutation과 다르게 타입 선언 부분에 한 객체가 들어갔습니다. 

@Subscription(() => MessageType, {
    filter: (payload, variables) => payload.messageChanged.id === variables.id,
 })

이 코드를 살펴보면 filter는 payload와 variables라는 2개의 객체를 인자로 받습니다. payload는 newMessage 즉 pubsub.publish로 들어간 객체를 생각하시면 됩니다. variables는 아래 id:1 부분이라고 생각하시면 됩니다.

subscription messageChanged{
	messageChanged(id:1){
    	msg
    }
}

 

payload.messageChanged.id 와 varaibles.id가 동일할 경우에만 subscription이 값을 반환합니다. 

만약 id가 1이 아닌 2,3,4는 변경된 응답을 받을 수 없는 것입니다. 

 

자세한 코드가 보고 싶으시면 아래 깃 허브 주소로 들어가시면 됩니다. 

https://github.com/nayoon030303/nestjs-gql-subscription

GitHub - nayoon030303/nestjs-gql-subscription: nestjs에서 gql subscription을 구현하고 filter를 test