GraphQL Subscriptions를 활용한 자바스크립트 데이터 분석 시스템 개발하기

10 Nov 2023

graphql

GraphQL Subscriptions는 GraphQL 쿼리를 통해 실시간 데이터 업데이트를 수신하는 기능을 제공하는 기술입니다. 이를 통해 웹 애플리케이션에서 실시간 데이터 분석 시스템을 개발할 수 있습니다.

자바스크립트로 GraphQL Subscriptions 개발하기

GraphQL Subscriptions를 활용하여 자바스크립트로 데이터 분석 시스템을 개발하는 방법을 알아보겠습니다. 먼저, 필요한 패키지를 설치해야 합니다.

npm install graphql-subscriptions

설치가 완료되면 다음과 같이 GraphQL Schema를 정의합니다.

import { PubSub, withFilter } from 'graphql-subscriptions';

const pubsub = new PubSub();

const typeDefs = `
  type Query {
    ...
  }

  type Subscription {
    dataUpdated: Data
  }

  type Data {
    id: ID!
    value: Int!
  }
`;

const resolvers = {
  Query: {
    ...
  },
  Subscription: {
    dataUpdated: {
      subscribe: () => pubsub.asyncIterator('DATA_UPDATED')
    }
  }
};

위의 코드에서 pubsub 객체는 실시간 데이터 업데이트를 관리하는 데 사용됩니다. Subscription 타입에는 dataUpdated 필드가 있으며, 이를 통해 데이터 업데이트를 구독할 수 있습니다.

데이터 업데이트를 발행하기 위해 다음과 같이 코드를 작성합니다.

const NEW_DATA = 'NEW_DATA';

setInterval(() => {
  const newData = {
    id: '1',
    value: Math.random() * 100
  };
  
  pubsub.publish(NEW_DATA, { dataUpdated: newData });
}, 1000);

위의 코드는 1초마다 새로운 데이터를 생성하고 pubsub.publish 메서드를 사용하여 dataUpdated 필드를 구독 중인 클라이언트에게 데이터를 발행합니다.

마지막으로, 클라이언트에서 데이터를 수신하기 위해 다음과 같이 코드를 작성할 수 있습니다.

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

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

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

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

client.subscribe({
  query: gql`
    subscription {
      dataUpdated {
        id
        value
      }
    }
  `
}).subscribe({
  next(data) {
    const newData = data.data.dataUpdated;
    console.log(`New data received: ${newData.id}, ${newData.value}`);
  },
  error(err) {
    console.error('Subscription error', err);
  },
});

위의 코드는 Apollo Client를 사용하여 GraphQL Subscription을 구독하고, 데이터가 업데이트될 때마다 해당 데이터를 콘솔에 출력합니다.

GraphQL Subscriptions를 활용하면 실시간으로 데이터를 분석하는 자바스크립트 기반의 시스템을 쉽게 개발할 수 있습니다. 이를 통해 웹 애플리케이션의 실시간 데이터 업데이트 요구사항에 유연하게 대응할 수 있습니다.

#references

#GraphQL #Subscriptions