쿠팡이츠, Subscriptions를 활용한 실시간 애플리케이션2

들어가며

이번편은 지난 Subscriptions를 활용한 실시간 애플리케이션에 이어서 GraphQL Subscriptions의 필터링 및 페이로드 변경과 Altair GraphQL Client를 이용한 테스트에 대해서 간략하게 소개하고 Subscriptions를 마무리 하고자 합니다.

GraphQL Subscriptions 필터링 및 페이로드 변경

GraphQL Subscriptions는 필터링 및 페이로드 변형을 통해 특정 조건에 맞는 이벤트만 전달하거나 데이터를 변형하여 클라이언트로 반환할 수 있습니다.

필터링

filter 옵션을 사용하여 특정 조건에 맞는 구독만을 허용할 수 있습니다. 필터링 함수의 매개변수는 다음과 같습니다.

• payload: 이벤트 발행 시 전달된 데이터 (예: pubSub.publish의 두 번째 인자)
• variables: 해당 구독에서 전달된 변수
• context: GraphQL 요청의 컨텍스트

예제 코드

아래 예제에서는 somethingChanged 이벤트에서 특정 ID를 가진 데이터만 구독하도록 필터링합니다.

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

const pubsub = new PubSub();

@Resolver()
export class ExampleResolver {
  @Subscription(returns => String, {
    filter: (payload, variables, context) => {
      // 이벤트 페이로드의 id가 구독 변수의 id와 일치하는 경우에만 true 반환
      return payload.somethingChanged.id === variables.id;
    },
  })
  somethingChanged(@Args('id') id: string) {
    return pubsub.asyncIterator('SOMETHING_CHANGED');
  }
}

코드 설명:

• @Subscription 데코레이터:
  • returns: 반환할 데이터의 타입을 GraphQL에서 지정합니다. 예제에서는 String 타입을 사용했습니다.
  • filter: 특정 조건에 맞는 이벤트만 전달하기 위한 함수입니다.
    • payload: 이벤트 페이로드로, 여기서는 somethingChanged 객체가 전달됩니다.
    • variables: 해당 구독에서 전달된 id 변수입니다.
    • context: GraphQL 요청의 컨텍스트로, 사용자의 인증 정보 등이 포함될 수 있습니다.
• somethingChanged 메서드:
  • 구독할 이벤트의 asyncIterator를 반환합니다.
  • 이벤트 이름을 통해 해당 이벤트를 구독합니다. 여기서는 SOMETHING_CHANGED 이벤트를 구독합니다.

페이로드 변경 (resolve)

resolve 옵션을 사용하여 이벤트 페이로드를 변형하여 클라이언트에 반환할 수 있습니다.

예제 코드

아래 예제에서는 somethingChanged 이벤트에서 반환된 데이터를 클라이언트가 원하는 형태로 변형합니다.

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

const pubsub = new PubSub();

@Resolver()
export class ExampleResolver {
  @Subscription(returns => String, {
    resolve: value => value.transformedData, // value 객체에서 원하는 데이터를 변형하여 반환
  })
  somethingChanged() {
    return pubsub.asyncIterator('SOMETHING_CHANGED');
  }
}

코드 설명:

• @Subscription 데코레이터:
  • returns: 반환할 데이터의 타입을 지정합니다. 예제에서는 String 타입을 사용했습니다.
  • resolve: 이벤트 페이로드를 변형하기 위한 함수로, 원하는 데이터를 반환합니다.
    • value: pubSub.publish를 통해 발행된 이벤트 페이로드로, 여기서는 value.transformedData를 반환합니다.

예시 응용: 필터링과 페이로드 변형을 함께 사용하기

필터링과 페이로드 변형을 함께 사용하여 이벤트를 필터링하고, 원하는 형태로 데이터를 변형할 수 있습니다.

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

const pubsub = new PubSub();

@Resolver()
export class ExampleResolver {
  @Subscription(returns => String, {
    filter: (payload, variables) => {
      return payload.somethingChanged.id === variables.id;
    },
    resolve: value => value.transformedData,
  })
  somethingChanged(@Args('id') id: string) {
    return pubsub.asyncIterator('SOMETHING_CHANGED');
  }
}

코드 설명:

• 필터링 함수:
  • payload.somethingChanged.id와 variables.id를 비교하여 일치하는 경우에만 true를 반환합니다.
• 페이로드 변형 함수:
  • value 객체에서 transformedData를 반환하여 클라이언트로 전달합니다.
    
    

Altair GraphQL Client를 이용한 테스트

Altair GraphQL Client를 사용하면 쉽게 GraphQL Subscriptions를 테스트할 수 있습니다. 웹소켓 프로토콜을 graphql-ws로 설정하고, CONNECTION PARAMETERS에 토큰 정보를 JSON 형식으로 입력하면 됩니다.

1. Set Headers: x-jwt 토큰 설정
2. Subscription URL: ws://localhost:3000/graphql
3. Subscription Type: WebSocket (graphql-ws)
4. CONNECTION PARAMETERS (JSON): { "x-jwt": "your-jwt-token" }
   
   

마치며

GraphQL Subscriptions는 실시간 데이터를 필요로 하는 애플리케이션에서 강력한 기능을 제공합니다. 이번 포스팅에서는 필터링 및 페이로드 변경 그리고 Altair GraphQL Client를 이용한 테스트를 살펴보았습니다.

Altair GraphQL Client 공식 웹사이트