GraphQL Subscriptions를 이용한 자바스크립트 실시간 투표 애플리케이션 개발

10 Nov 2023

graphql

이번 기술 블로그에서는 GraphQL Subscriptions를 이용하여 자바스크립트로 실시간 투표 애플리케이션을 개발하는 방법을 알아보겠습니다.

GraphQL Subscriptions란?

GraphQL Subscriptions는 GraphQL의 한 기능으로, 클라이언트와 서버 간의 실시간 데이터 푸시를 가능하게 합니다. 이를 통해 실시간 채팅, 실시간 알림, 실시간 대시보드 등 다양한 종류의 실시간 애플리케이션을 구현할 수 있습니다.

개발 환경 설정

GraphQL Subscriptions를 사용하기 위해서는 Node.js와 GraphQL 서버가 필요합니다. 먼저 Node.js를 설치하고, GraphQL 서버를 구성합니다. 다음으로 graphql-yoga나 apollo-server와 같은 GraphQL 서버를 설치합니다.

const { ApolloServer, PubSub } = require('apollo-server');
const pubsub = new PubSub();

const typeDefs = `  
  type Query {
    hello: String
  }

  type Mutation {
    vote(option: String!): String
  }

  type Subscription {
    voteCount: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello World!',
  },
  Mutation: {
    vote: (_, { option }) => {
      // 투표 처리 로직 구현
      // ...

      pubsub.publish('VOTE_COUNT', { voteCount: '10' });
      return 'Vote success!';
    },
  },
  Subscription: {
    voteCount: {
      subscribe: () => pubsub.asyncIterator('VOTE_COUNT'),
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`)
});

위 예제 코드는 graphql-yoga와 apollo-server를 사용해 간단한 GraphQL 서버를 설정한 것입니다. typeDefs에는 GraphQL 스키마를 정의하고, resolvers에는 쿼리와 뮤테이션의 동작을 구현합니다. Subscription 타입을 정의하여 클라이언트에 실시간 데이터를 푸시할 수 있습니다. pubsub 객체는 GraphQL Subscriptions에 필요한 Publish-Subscribe 메커니즘을 제공합니다.

클라이언트 구현

클라이언트에서는 GraphQL Subscriptions를 구독하여 실시간 데이터를 받아올 수 있습니다. 이를 통해 실시간 투표 결과를 갱신하고, 사용자에게 실시간으로 알림을 보낼 수 있습니다.

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';

const client = new ApolloClient({
  link: new WebSocketLink({
    uri: 'ws://localhost:4000/',
    options: {
      reconnect: true,
    },
  }),
  cache: new InMemoryCache(),
});

client.subscribe({
  query: gql`
    subscription {
      voteCount
    }
  `,
}).subscribe({
  next: (result) => {
    console.log(result.data.voteCount);
    // 투표 결과를 처리하는 로직 구현
    // ...
  },
});

위 예제 코드는 별도의 클라이언트 코드입니다. ApolloClient 객체를 생성하고, WebSocketLink를 통해 GraphQL 서버의 실시간 데이터를 구독합니다. subscribe 메서드를 호출하여 투표 결과를 실시간으로 받아올 수 있습니다.

마치며

GraphQL Subscriptions를 이용한 자바스크립트 실시간 투표 애플리케이션 개발에 대해 알아보았습니다. GraphQL Subscriptions를 이용하면 간편하게 실시간 데이터를 푸시할 수 있어 다양한 종류의 실시간 애플리케이션을 구현할 수 있습니다. 더 자세한 내용은 GraphQL Subscriptions 문서를 참고하시기 바랍니다.

#GraphQL #JavaScript