Colin's Blog
자바스크립트를 활용한 GraphQL Subscriptions를 위한 푸시 알림 시스템

GraphQL은 API를 구축하고 데이터를 쿼리하는 데 사용되는 강력한 쿼리 언어입니다. GraphQL Subscriptions는 실시간으로 업데이트를 수신하고 서버로부터 푸시 알림을 받을 수 있는 기능을 제공합니다. 자바스크립트를 사용하여 GraphQL Subscriptions를 활용하면 효과적으로 푸시 알림 시스템을 구축할 수 있습니다.

GraphQL Subscriptions란?

GraphQL Subscriptions는 클라이언트와 서버 사이의 실시간 통신을 가능하게 하는 GraphQL의 기능입니다. 이를 통해 클라이언트는 구독(subscription)을 만들어 서버로부터 실시간 업데이트를 수신할 수 있습니다. 예를 들어, 새로운 채팅 메시지를 실시간으로 받거나 실시간 주식 시세를 확인하는 등의 기능을 구현할 수 있습니다.

푸시 알림 시스템 구축하기

GraphQL Subscriptions를 사용하여 푸시 알림 시스템을 구축하는 단계는 다음과 같습니다.

1. 서버 설정

GraphQL Subscriptions를 사용하기 위해 우선 서버를 설정해야 합니다. 대부분의 GraphQL 서버 라이브러리는 이미 Subscriptions를 지원하고 있습니다. 예를 들어, Apollo Server, Graphene 등이 있습니다. 해당 라이브러리의 문서를 참고하여 서버를 설정해야 합니다.

2. 구독 정의하기

클라이언트가 푸시 알림을 받고 싶은 이벤트를 구독해야 합니다. GraphQL Schema에서 이벤트와 관련된 필드를 정의하고 해당 필드에 대한 구독을 생성합니다. 예를 들어, 메시지 생성 이벤트에 대한 구독을 생성하기 위해 다음과 같은 스키마를 정의할 수 있습니다.

type Subscription {
  newMessage: Message
}

3. 클라이언트에서 구독하기

클라이언트는 구독을 생성하여 서버로부터 실시간 업데이트를 수신해야 합니다. 자바스크립트 클라이언트에서는 subscriptions-transport-ws 같은 라이브러리를 사용하여 WebSocket 연결을 사용할 수 있습니다. 해당 라이브러리를 설치하고 클라이언트에서 구독을 생성하는 코드를 작성해야 합니다.

import { SubscriptionClient } from 'subscriptions-transport-ws';
import { ApolloClient, createNetworkInterface } from 'apollo-client';

const networkInterface = createNetworkInterface({
  uri: 'http://localhost:4000/graphql',
});

const wsClient = new SubscriptionClient('ws://localhost:4000/subscriptions', {
  reconnect: true,
});

const apolloClient = new ApolloClient({
  networkInterface,
  dataIdFromObject: (result) => result.id,
});

networkInterface.use([{
  applyMiddleware(req, next) {
    req.options.headers = {
      ...req.options.headers,
      authorization: 'Bearer your-auth-token',
    };
    next();
  },
}]);

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient,
);

apolloClient.networkInterface = networkInterfaceWithSubscriptions;

4. 실시간 업데이트 처리하기

클라이언트가 구독을 생성하면 서버로부터 실시간으로 업데이트를 수신할 수 있습니다. 이 업데이트를 처리하고 화면에 푸시 알림을 보여주는 코드를 작성해야 합니다.

예를 들어, React와 Apollo Client를 사용하여 업데이트를 처리하는 코드는 다음과 같습니다.

import React from 'react';
import { graphql, ApolloConsumer } from 'react-apollo';
import gql from 'graphql-tag';

const MESSAGE_SUBSCRIPTION = gql`
  subscription {
    newMessage {
      id
      text
    }
  }
`;

class MessageList extends React.Component {
  componentDidMount() {
    this.props.subscribeToNewMessages();
  }

  render() {
    return (
      <ul>
        {this.props.messages.map(message => (
          <li key={message.id}>{message.text}</li>
        ))}
      </ul>
    );
  }
}

export default graphql(MESSAGE_SUBSCRIPTION, {
  props: ({ data: { newMessage, loading, subscribeToMore } }) => ({
    messages: newMessage,
    loading,
    subscribeToNewMessages: () => {
      subscribeToMore({
        document: MESSAGE_SUBSCRIPTION,
        updateQuery: (prev, { subscriptionData }) => {
          if (!subscriptionData.data) return prev;

          const newMessage = subscriptionData.data.newMessage;
          return Object.assign({}, prev, {
            newMessage: [...prev.newMessage, newMessage],
          });
        },
      });
    },
  }),
})(MessageList);

위의 코드에서는 subscribeToMore 함수를 사용하여 실시간 업데이트를 처리하고, 업데이트가 있을 때마다 MessageList 컴포넌트를 다시 렌더링합니다.

결론

GraphQL Subscriptions를 이용하여 자바스크립트를 활용한 푸시 알림 시스템을 구축하는 방법을 알아보았습니다. GraphQL Subscriptions를 사용하면 실시간으로 업데이트를 수신하고 푸시 알림을 받을 수 있으므로, 실시간 기능이 필요한 웹 애플리케이션 개발에 유용하게 활용할 수 있습니다.

#GraphQL #JavaScript

© 2018 Colin. All rights reserved.