Colin's Blog
GraphQL Subscriptions을 사용하여 실시간 데이터 업데이트

GraphQL은 API를 쉽게 만들고 사용할 수 있는 쿼리 언어이자 런타임입니다. GraphQL Subscriptions는 GraphQL을 사용하여 실시간 데이터 업데이트를 가능하게 해주는 기능입니다. 이 기능을 사용하면 클라이언트가 서버에 구독(subscribe)을 하게 되면, 서버에서 해당 데이터가 변경될 때마다 클라이언트에게 실시간으로 업데이트를 전달할 수 있습니다. 이는 실시간 알림, 채팅, 주문 추적 등 다양한 애플리케이션에서 유용하게 사용될 수 있습니다.

GraphQL Subscriptions의 작동 방식

GraphQL Subscriptions는 Pub-Sub (Publish-Subscribe) 패턴을 사용하여 작동합니다. 서버는 데이터가 변경되었음을 발행(publish)하고, 클라이언트는 해당 데이터에 대한 구독(subscribe)을 등록합니다. 그리고 서버는 데이터가 업데이트될 때마다 등록된 구독에 실시간으로 업데이트를 전달합니다.

GraphQL Subscriptions 구현하기

GraphQL Subscriptions을 구현하기 위해서는 몇 가지 단계를 따를 필요가 있습니다. 먼저, GraphQL 서버를 구성하고 Subscriptions을 사용할 수 있도록 설정해야 합니다. 그리고 데이터가 변경될 때마다 해당 구독을 업데이트하는 리졸버(resolver)를 작성해야 합니다.

1. GraphQL 서버 설정

먼저, GraphQL 서버를 구성하고 Subscriptions을 사용할 수 있도록 설정해야 합니다. 여러분이 사용하는 GraphQL 서버는 언어나 프레임워크에 따라 다를 수 있으니 해당 문서를 참고하세요.

2. Subscriptions 등록하기

클라이언트가 구독을 등록하려면 GraphQL Subscription 타입을 정의해야 합니다. 타입은 Subscription이라는 이름으로 작성되며, 필드는 업데이트를 받을 데이터와 관련된 필드여야 합니다.

type Subscription {
  newData: MyDataType
}

3. 리졸버 작성하기

리졸버는 데이터가 변경될 때마다 업데이트를 전달하는 역할을 합니다. 즉, 클라이언트가 구독한 데이터가 변경되면 리졸버가 호출되고, 리졸버는 구독자에게 해당 데이터를 전송합니다. 리졸버는 GraphQL 서버에서 구현해야 합니다. 다음은 JavaScript의 예시 코드입니다.

const { PubSub } = require('graphql-subscriptions');
const pubsub = new PubSub();

const resolvers = {
  Subscription: {
    newData: {
      subscribe: () => pubsub.asyncIterator(['NEW_DATA']),
    },
  },
  Mutation: {
    updateData: (root, args) => {
      // 데이터 업데이트 로직
      // 업데이트된 데이터를 발행
      pubsub.publish('NEW_DATA', { newData: args.updatedData });
      return args.updatedData;
    },
  },
};

// GraphQL 서버 설정에 리졸버 추가
const server = new ApolloServer({ typeDefs, resolvers });

위 예제 코드에서 updateData 뮤테이션은 데이터 업데이트를 위한 예시 함수입니다. 데이터가 업데이트되면 pubsub.publish를 사용하여 NEW_DATA 채널에 업데이트된 데이터를 발행합니다.

4. 클라이언트에서 구독 등록하기

클라이언트는 구독을 등록하여 실시간으로 데이터 업데이트를 받을 수 있습니다. 클라이언트는 GraphQL 클라이언트 라이브러리를 사용하여 구독을 등록할 수 있으며, 각 라이브러리에 따라 사용법이 다를 수 있습니다.

import { SubscriptionClient } from 'subscriptions-transport-ws';
import { ApolloClient } from 'apollo-client';
import { WebSocketLink } from 'apollo-link-ws';
import { InMemoryCache } from 'apollo-cache-inmemory';

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

const wsLink = new WebSocketLink(subscriptionClient);

const client = new ApolloClient({
  link: wsLink,
  cache: new InMemoryCache(),
});

위 예제 코드는 JavaScript와 Apollo Client를 사용하여 클라이언트에서 구독을 등록하는 방법을 보여줍니다. 클라이언트는 우선 SubscriptionClient를 생성하고, WebSocketLink와 함께 ApolloClient를 생성하여 서버와 연결합니다.

결론

GraphQL Subscriptions을 사용하면 실시간 데이터 업데이트를 쉽게 구현할 수 있습니다. 이를 통해 사용자에게 더 좋은 사용자 경험을 제공하고, 다양한 실시간 애플리케이션을 개발할 수 있습니다. GraphQL Subscriptions은 Pub-Sub 패턴을 기반으로 동작하며, 서버와 클라이언트 모두에서 구현해야 합니다.

© 2018 Colin. All rights reserved.