소개

GraphQL은 훌륭한 쿼리 언어이지만, 클라이언트-서버 간의 실시간 통신을 위한 지원은 제공하지 않습니다. 이를 위해 GraphQL Subscriptions를 사용하여 실시간 업데이트를 구현할 수 있습니다. 즉, 서버에서 일어나는 이벤트를 클라이언트에게 자동으로 전달할 수 있습니다. 이번 블로그에서는 JavaScript를 사용하여 GraphQL Subscriptions를 위한 푸시 알림 시스템을 개발하는 방법에 대해 알아보겠습니다.

Step 1: GraphQL Subscriptions 설정

첫 번째 단계는 GraphQL Subscriptions를 설정하는 것입니다. GraphQL 서버에는 PubSub이라는 패키지를 사용하여 메시지를 발행하고 구독할 수 있는 기능을 추가해야합니다. PubSub 패키지는 메모리에 메시지를 저장하고 구독자에게 전달하는 역할을 합니다.

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

Step 2: GraphQL 스키마에 Subscription 타입 추가

두 번째 단계는 GraphQL 스키마에 Subscription 타입을 추가하는 것입니다. Subscription 타입은 클라이언트가 구독하고자 하는 이벤트를 정의합니다. 예를 들어, 새로운 메시지가 생성되었을 때 클라이언트에게 알림을 전달하고 싶다면, newMessage와 같은 이벤트를 정의할 수 있습니다.

const typeDefs = `
  type Query {
    ...
  }

  type Mutation {
    ...
  }

  type Subscription {
    newMessage: Message!
  }

  type Message {
    id: ID!
    content: String!
  }
`;

Step 3: Subscription 리졸버 구현

세 번째 단계는 Subscription 리졸버를 구현하는 것입니다. Subscription 리졸버는 클라이언트가 구독한 이벤트가 발생할 때마다 실행되고, 클라이언트에게 결과를 반환합니다. 이 예제에서는 newMessage 이벤트가 발생하면 새로운 메시지를 반환합니다.

const resolvers = {
  Query: {
    ...
  },

  Mutation: {
    ...
  },

  Subscription: {
    newMessage: {
      subscribe: () => pubsub.asyncIterator('NEW_MESSAGE'),
      resolve: (payload) => payload.message,
    },
  },
};

Step 4: 메시지 발행하기

네 번째 단계는 메시지를 발행하는 것입니다. 메시지를 발행하면 등록된 모든 구독자들에게 알림이 전달됩니다.

const createMessage = (content) => {
  const message = { id: uuid(), content };
  pubsub.publish('NEW_MESSAGE', { message });
  return message;
};

Step 5: 클라이언트에서 구독하기

마지막 단계는 클라이언트에서 이벤트를 구독하는 것입니다. 클라이언트는 GraphQL Subscription을 사용하여 서버로부터 실시간으로 업데이트를 받을 수 있습니다.

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

const client = new ApolloClient({
  link: ApolloLink.split(
    (operation) => {
      const { query } = operation;
      const { kind, operation: operationType } = getMainDefinition(query);
      return kind === 'OperationDefinition' && operationType === 'subscription';
    },
    new WebSocketLink(subscriptionClient),
    httpLink
  ),
  cache: new InMemoryCache(),
});

결론

이제 JavaScript를 사용하여 GraphQL Subscriptions를 위한 푸시 알림 시스템을 개발하는 방법을 알아보았습니다. 실시간으로 업데이트를 전달하고 싶을 때, GraphQL Subscriptions는 강력한 도구입니다. 자세한 내용은 공식 문서를 참조하세요.

#GraphQL #JavaScript