GraphQL Subscriptions를 활용한 실시간 대시보드 개발

10 Nov 2023

graphql

서론

실시간 데이터 업데이트는 현대 웹 애플리케이션에서 중요한 요소입니다. 사용자는 최신 정보를 실시간으로 확인하고, 상호작용을 즉시 반영하는 기능을 원합니다. 이러한 요구를 충족하기 위해 GraphQL Subscriptions를 사용하여 실시간 대시보드를 개발하는 방법을 알아보겠습니다.

GraphQL Subscriptions란?

GraphQL Subscriptions는 GraphQL 스펙의 일부로, 서버와 클라이언트 간의 실시간 데이터 통신을 위한 기능입니다. 전통적인 REST API와는 달리, 클라이언트가 서버로 데이터를 요청하는 것뿐만 아니라, 서버가 클라이언트에게 데이터 변경 사항을 즉시 알릴 수 있게 합니다. 이를 통해 실시간 업데이트를 구현할 수 있습니다.

실시간 대시보드 개발을 위한 절차

1. GraphQL Subscription 파이썬 서버 설정

먼저, GraphQL Subscription을 지원하는 서버를 설정해야 합니다. 이를 위해 Apollo Server를 사용할 수 있습니다. Apollo Server는 Node.js 기반의 GraphQL 서버입니다.

const { ApolloServer, PubSub } = require('apollo-server');
const { createServer } = require('http');

const pubsub = new PubSub();

const typeDefs = `
  type Subscription {
    dashboardData: DashboardData
  }

  type DashboardData {
    value: Int
  }
`;

const resolvers = {
  Subscription: {
    dashboardData: {
      subscribe: () => pubsub.asyncIterator(['DASHBOARD_DATA'])
    }
  }
};

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

const httpServer = createServer(server.getMiddleware());
server.installSubscriptionHandlers(httpServer);

httpServer.listen(4000, () => {
  console.log(`Server ready at http://localhost:4000/graphql`);
  console.log(`Subscriptions ready at ws://localhost:4000/graphql`);
});

위의 예시에서는 Apollo Server와 PubSub, 그리고 WebSocket을 사용하여 GraphQL Subscription 서버를 설정하고 있습니다. dashboardData를 구독(subscribe)하는 클라이언트에게 최신 대시보드 데이터를 전송할 수 있습니다.

2. 클라이언트 구현

클라이언트에서는 WebSocket을 통해 서버로부터 실시간 데이터 업데이트를 받아와야 합니다. Apollo Client를 사용하여 GraphQL Subscription을 구독하는 클라이언트를 구현할 수 있습니다. 아래는 예시 코드입니다.

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

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

const httpLink = new ApolloLink((operation, forward) => {
  operation.setContext({
    headers: {
      Authorization: `Bearer ${localStorage.getItem('accessToken')}`
    }
  });
  return forward(operation);
});

const link = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
  },
  wsLink,
  httpLink
);

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

const DASHBOARD_DATA_SUBSCRIPTION = gql`
  subscription {
    dashboardData {
      value
    }
  }
`;

const subscription = client.subscribe({ query: DASHBOARD_DATA_SUBSCRIPTION });

subscription.subscribe({
  next: (data) => {
    console.log(data);
    // 대시보드 데이터 업데이트 처리
  },
  error: (error) => {
    console.error(error);
  }
});

위의 예시에서는 Apollo Client를 사용하여 GraphQL Subscription을 설정하고 있습니다. dashboardData를 구독하여 실시간으로 업데이트된 데이터를 수신 받아 처리할 수 있습니다.

결론

GraphQL Subscriptions를 활용하면 실시간 대시보드와 같은 기능을 쉽게 개발할 수 있습니다. 서버와 클라이언트 간의 실시간 데이터 통신을 위한 고수준의 API를 제공하여 개발 생산성을 높일 수 있습니다.