일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- Query
- 모던 자바스크립트
- typescript
- linux
- 자바스크립트
- html
- 자바스크립트의 역사
- vanila js
- 피보나치 수
- 실패율
- mutation
- node
- js
- JavaStritp
- 카카오
- 코딩테스트
- RestAPI
- REST API
- 백준
- await
- nestjs
- kakao
- Bandit
- ROT13
- graphql
- tr명령어
- 코딩태스트
- 프로그래머스
- typeorm
- javascript
- Today
- Total
꿀 떨어지는 코딩 양봉장
NestJS와 Graphql Subscription 본문
NestJS에서 Subscriptions 구현하기
Graphql Subscription을 NestJS에서 구현하여 실시간으로 message가 변경되는 프로그램을 작성해보았습니다.
Graphql Subscription 이란?
https://nayoon030303.tistory.com/43
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
'Language > NestJS' 카테고리의 다른 글
NestJS Lifecycle Events (0) | 2023.08.20 |
---|---|
Authentication(인증) & Authorization(허가)가 무엇인가? (0) | 2022.02.17 |