자바스크립트를 활용한 GraphQL Subscriptions를 위한 서버리스 아키텍처 구현 방법

10 Nov 2023

graphql

GraphQL은 API를 개발할 때 유연하고 효율적인 방법을 제공하여 많은 개발자들이 사용하고 있습니다. GraphQL은 실시간 데이터 업데이트를 지원하는 기능인 Subscriptions도 제공하며, 이는 웹 애플리케이션의 실시간 푸시 알림과 같은 기능을 구현하는 데 유용합니다. 이 기능을 지원하기 위해서는 서버리스 아키텍처를 구현하는 것이 좋습니다. 이번 블로그 포스트에서는 자바스크립트를 활용하여 GraphQL Subscriptions를 위한 서버리스 아키텍처를 구현하는 방법에 대해 알아보겠습니다.

1. AWS Lambda를 이용한 백엔드 구현

AWS Lambda는 서버리스 아키텍처를 구현하기 위한 매우 강력한 도구입니다. 자바스크립트를 사용하므로 GraphQL Subscriptions를 위한 백엔드를 구현하는 데 이상적입니다. 아래는 AWS Lambda를 사용하여 GraphQL Subscriptions를 위한 백엔드를 구현하는 코드의 예입니다.

const { createServer } = require('http');
const { execute, subscribe } = require('graphql');
const { SubscriptionServer } = require('subscriptions-transport-ws');
const { makeExecutableSchema } = require('graphql-tools');

// GraphQL 스키마를 정의합니다.
const typeDefs = `
  type Subscription {
    newPost: Post
  }
  
  type Post {
    id: ID!
    title: String!
    content: String!
    createdAt: String!
  }
`;

// Subscription 리졸버를 구현합니다.
const resolvers = {
  Subscription: {
    newPost: {
      subscribe: () => pubsub.asyncIterator('NEW_POST')
    }
  }
};

// GraphQL 스키마를 만듭니다.
const schema = makeExecutableSchema({
  typeDefs,
  resolvers
});

// 웹소켓 서버를 생성합니다.
const websocketServer = createServer((request, response) => {
  response.writeHead(404);
  response.end();
});

// 웹소켓 서버를 시작합니다.
websocketServer.listen(4000, () => {
  console.log('Websocket Server started on port 4000');
});

// Subscription 서버를 생성합니다.
new SubscriptionServer({
  execute,
  subscribe,
  schema
}, {
  server: websocketServer,
  path: '/subscriptions'
});

위 코드는 자바스크립트를 사용하여 GraphQL Subscriptions를 위한 백엔드를 구현하는 예시입니다. typeDefs에서는 GraphQL 스키마를 정의하고, resolvers에서는 Subscription 리졸버를 구현합니다. 이후 makeExecutableSchema를 사용하여 스키마와 리졸버를 결합합니다. 마지막으로 SubscriptionServer를 생성하여 웹소켓 서버를 시작하고, /subscriptions 경로에 대한 Subscription 서버를 실행합니다.

2. AWS AppSync를 이용한 클라이언트 구현

AWS AppSync는 서버리스 아키텍처에서 GraphQL Subscriptions를 구현하기 위한 서비스입니다. 클라이언트 애플리케이션에서 AppSync를 사용하여 서버와 실시간 데이터 업데이트를 주고받을 수 있습니다. 아래는 자바스크립트를 사용하여 AppSync를 이용한 클라이언트 구현의 예입니다.

import { ApolloClient, gql, InMemoryCache } from '@apollo/client';
import { createSubscriptionHandshakeLink } from 'aws-appsync-subscription-link';

// AppSync 클라이언트를 생성합니다.
const client = new ApolloClient({
  link: createSubscriptionHandshakeLink({
    url: 'https://your-appsync-endpoint/graphql',
    region: 'your-aws-region',
    auth: {
      type: 'API_KEY',
      apiKey: 'your-appsync-api-key'
    }
  }),
  cache: new InMemoryCache()
});

// Subscription을 구독합니다.
client.subscribe({
  query: gql`
    subscription {
      newPost {
        id
        title
        content
        createdAt
      }
    }
  `
}).subscribe({
  next: ({ data }) => {
    console.log('New post received:', data.newPost);
    // 실시간 데이터 업데이트를 처리하는 로직을 작성합니다.
  }
});

위 코드는 AppSync를 이용하여 서버와 GraphQL Subscriptions를 구현하는 예시입니다. ApolloClient를 사용하여 클라이언트를 생성하고, createSubscriptionHandshakeLink를 사용하여 AppSync 서버와 연결합니다. 이후 subscribe 메소드를 사용하여 Subscription을 구독하고, 실시간 데이터 업데이트를 처리하는 로직을 작성합니다.

결론

이번 블로그 포스트에서는 자바스크립트를 활용하여 GraphQL Subscriptions를 위한 서버리스 아키텍처를 구현하는 방법에 대해 알아보았습니다. AWS Lambda와 AWS AppSync를 이용하여 백엔드와 클라이언트를 구현하는 방법을 소개하였습니다. GraphQL Subscriptions를 활용하면 웹 애플리케이션에서 실시간 데이터 업데이트를 구현하는 데 매우 유용합니다. 자바스크립트와 서버리스 아키텍처를 활용하여 GraphQL Subscriptions를 구현해보세요!

#GraphQL #서버리스