자바스크립트를 활용한 GraphQL Subscriptions 메시지 큐 시스템 구축하기

10 Nov 2023

graphql

1. GraphQL Subscriptions이란?

GraphQL Subscriptions은 실시간 데이터 업데이트를 위한 GraphQL 스키마의 일부로, 클라이언트와 서버 사이에서 실시간 푸시 기능을 제공합니다. 이를 통해 서버에서 발생한 이벤트에 대한 구독을 설정하여 데이터 변경 사항을 실시간으로 수신할 수 있습니다.

2. 메시지 큐 시스템의 필요성

메시지 큐 시스템은 비동기 통신을 위해 사용되며, 시스템 간의 메시지 교환을 관리하는데 도움을 줍니다. 클라이언트와 서버 사이의 통신에서 발생한 메시지를 큐에 저장하고, 필요할 때마다 메시지를 처리하는 방식으로 작동합니다. 메시지 큐 시스템을 사용하면 서버와 클라이언트 간의 효율적인 통신이 가능해집니다.

3. GraphQL Subscriptions으로 메시지 큐 시스템 구축하기

3.1. 서버 측 코드 작성하기

서버 측에서는 GraphQL Subscriptions을 사용하여 메시지 큐 시스템을 구축할 수 있습니다. 다음은 예제 코드입니다.

// 필요한 패키지 가져오기
const { ApolloServer, gql } = require('apollo-server');
const { PubSub } = require('graphql-subscriptions');

// PubSub 인스턴스 생성
const pubsub = new PubSub();

// GraphQL 스키마 정의
const typeDefs = gql`
  type Message {
    id: ID!
    content: String!
  }

  type Query {
    messages: [Message]
  }

  type Mutation {
    sendMessage(content: String!): Message
  }

  type Subscription {
    newMessage: Message
  }
`;

// 리졸버 함수 정의
const resolvers = {
  Query: {
    messages: () => [...messages]
  },
  Mutation: {
    sendMessage: (_, { content }) => {
      const message = { id: messages.length + 1, content };
      messages.push(message);
      pubsub.publish('NEW_MESSAGE', { newMessage: message });
      return message;
    }
  },
  Subscription: {
    newMessage: {
      subscribe: () => pubsub.asyncIterator('NEW_MESSAGE')
    }
  }
};

// Apollo Server 인스턴스 생성
const server = new ApolloServer({ typeDefs, resolvers });

// 서버 시작
server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

3.2. 클라이언트 측 코드 작성하기

클라이언트 측에서는 Apollo Client를 사용하여 GraphQL Subscriptions을 구현할 수 있습니다. 다음은 예제 코드입니다.

// 필요한 패키지 가져오기
import { ApolloClient, InMemoryCache, gql, split } from '@apollo/client';
import { getMainDefinition } from '@apollo/client/utilities';
import { WebSocketLink } from '@apollo/client/link/ws';

// WebSocket 연결 설정
const wsLink = new WebSocketLink({
  uri: 'ws://localhost:4000/graphql',
  options: {
    reconnect: true
  }
});

// HTTP 연결 설정
const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql'
});

// 연결 설정 분기
const link = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink
);

// Apollo Client 인스턴스 생성
const client = new ApolloClient({
  link,
  cache: new InMemoryCache()
});

// GraphQL Subscription 실행
const subscription = gql`
  subscription {
    newMessage {
      id
      content
    }
  }
`;

client
  .subscribe({ query: subscription })
  .subscribe({
    next(data) {
      console.log(data);
    }
  });

4. 결론

이번 포스트에서는 자바스크립트를 활용하여 GraphQL Subscriptions을 사용한 메시지 큐 시스템을 구축하는 방법에 대해 알아보았습니다. GraphQL Subscriptions을 통해 실시간 데이터 업데이트를 구현하고, 메시지 큐 시스템을 활용하여 효율적인 클라이언트-서버 통신을 가능케 할 수 있습니다.

#GraphQL #Subscriptions

목차