[nodejs] GraphQL Subscriptions 구현

18 Dec 2023

nodejs

GraphQL Subscriptions는 클라이언트 애플리케이션과 서버 간에 실시간 데이터를 주고받기 위한 기술입니다. 이를 통해 서버에서 발생하는 데이터 변경 사항을 즉시 클라이언트로 전달할 수 있습니다.

GraphQL Subscriptions 구현하기

1. GraphQL Subscription 지원 라이브러리 선택

Node.js에서 GraphQL Subscriptions를 구현하기 위해 apollo-server와 graphql-subscriptions 라이브러리를 사용할 수 있습니다.

const { ApolloServer, PubSub } = require('apollo-server');
const { GraphQLScalarType, Kind } = require('graphql');
const { SubscriptionServer } = require('subscriptions-transport-ws');
const { execute, subscribe } = require('graphql');
const http = require('http');
const ws = require('ws');

// Create an HTTP server
const httpServer = http.createServer();

// Create a WebSocket server
const wsServer = new ws.Server({
  server: httpServer,
});

const pubsub = new PubSub();

2. GraphQL Schema에 Subscription 타입 추가

GraphQL 스키마에 Subscription 타입을 정의하여 실시간 데이터를 구독할 수 있는 기능을 추가해야 합니다.

const typeDefs = `
  type Query {
    # ...
  }

  type Mutation {
    # ...
  }

  type Subscription {
    newPost: Post
  }

  type Post {
    id: ID!
    title: String
    body: String
  }
`;

3. Subscription Resolver 추가

Subscription 타입에 대한 Resolver를 작성하여 실시간 데이터를 제공합니다.

const resolvers = {
  Query: {
    // ...
  },
  Mutation: {
    // ...
  },
  Subscription: {
    newPost: {
      subscribe: () => pubsub.asyncIterator(['NEW_POST']),
    },
  },
};

4. Subscription Trigger

새로운 데이터가 생성될 때마다 해당 데이터를 Subscription으로 발행하여 클라이언트에게 전달합니다.

const createPost = (parent, args, context, info) => {
  const newPost = { id: '1', title: args.title, body: args.body };
  pubsub.publish('NEW_POST', { newPost });
  return newPost;
};

5. Subscription 서버 시작

서버를 시작할 때, Subscription 서버도 같이 시작하도록 설정합니다.

const server = new ApolloServer({
  typeDefs,
  resolvers,
  subscriptions: {
    path: '/subscriptions',
  },
});

server.applyMiddleware({ app });
SubscriptionServer.create(
  { execute, subscribe, schema: server.schema },
  { server: httpServer, path: server.subscriptionsPath }
);

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

결론

GraphQL Subscriptions를 구현하여 서버와 클라이언트 간에 실시간 데이터를 전송할 수 있게 되었습니다. 이를 통해 양방향 통신을 효율적으로 구현할 수 있으며, 사용자 경험을 향상시킬 수 있습니다.

참고 문서: