자바스크립트를 활용한 GraphQL Subscriptions를 위한 배포 전략

10 Nov 2023

graphql

GraphQL은 API 개발을 위한 강력한 도구이며, Subscriptions를 통해 실시간 데이터 푸시를 구현하는 것도 가능합니다. 여기서는 자바스크립트를 활용하여 GraphQL Subscriptions를 개발하고 배포하는 전략에 대해 알아보겠습니다.

1. 환경 설정

첫 번째 단계로, GraphQL Subscriptions를 개발하고 배포하기 위해 서버 환경을 설정해야 합니다. 이를 위해 Node.js와 Express.js를 사용하여 GraphQL 서버를 구성합니다. npm을 통해 필요한 라이브러리를 설치하고, 서버와 클라이언트에 필요한 의존성을 관리합니다.

const express = require('express');
const { ApolloServer, PubSub } = require('apollo-server-express');
// 필요한 라이브러리를 import 합니다.

const app = express();
const pubsub = new PubSub();

const typeDefs = `
  type Subscription {
    messageSent: String!
  }
`;

const resolvers = {
  Subscription: {
    messageSent: {
      subscribe: () => pubsub.asyncIterator(['MESSAGE_SENT']),
    },
  },
};

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

server.applyMiddleware({ app });

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

2. 실시간 데이터 푸시

두 번째 단계는 GraphQL Subscriptions를 사용하여 실시간 데이터 푸시를 구현하는 것입니다. pubsub 객체를 사용하여 메시지를 발행하고, 이를 구독하는 클라이언트에게 데이터를 전달합니다.

// ...

const MESSAGE_SENT = 'MESSAGE_SENT';

const resolvers = {
  Mutation: {
    sendMessage: (_, { message }) => {
      pubsub.publish(MESSAGE_SENT, { messageSent: message });
      return true;
    },
  },
  Subscription: {
    messageSent: {
      subscribe: () => pubsub.asyncIterator([MESSAGE_SENT]),
    },
  },
};

// ...

위의 예제에서는 sendMessage 뮤테이션을 통해 메시지를 발행하고, messageSent 구독을 통해 클라이언트에게 전달합니다.

3. 배포 전략

마지막으로, 자바스크립트로 개발한 GraphQL Subscriptions를 배포하는 전략에 대해 알아보겠습니다. 여러 옵션이 있지만, 아래의 전략을 따를 수 있습니다.

3.1. 서버 호스팅

GraphQL Subscriptions는 서버가 액티브 상태를 유지해야 하므로, 호스팅 서비스를 사용하여 서버를 배포합니다. Heroku, AWS, Azure 등의 클라우드 호스팅 서비스를 고려할 수 있습니다. 서버 배포 시에는 서버 설정, 도메인 연결, SSL 인증서 등을 고려해야 합니다.

3.2. 클라이언트 개발

클라이언트 개발 시, Apollo Client와 같은 GraphQL 클라이언트 라이브러리를 사용하여 GraphQL Subscriptions를 구독할 수 있습니다. 클라이언트에서 소켓 연결을 유지하고, 구독을 위해 subscribe 함수를 사용합니다.

import { ApolloClient, InMemoryCache, ApolloProvider, useSubscription, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

const SUBSCRIBE_MESSAGES = gql`
  subscription {
    messageSent
  }
`;

function MessageComponent() {
  const { data } = useSubscription(SUBSCRIBE_MESSAGES);

  if (data) {
    // 데이터 처리 로직 작성
  }

  return (
    // 컴포넌트 렌더링 로직 작성
  );
}

function App() {
  return (
    <ApolloProvider client={client}>
      <MessageComponent />
    </ApolloProvider>
  );
}

위의 예제는 Apollo Client를 사용하여 messageSent 구독을 수행하는 클라이언트 코드입니다.

결론

자바스크립트를 활용한 GraphQL Subscriptions를 배포하기 위해서는 환경 설정, 실시간 데이터 푸시, 배포 전략이 필요합니다. 위의 단계를 따라가면 GraphQL Subscriptions를 원활하게 개발하고 배포할 수 있습니다. 자세한 내용은 공식 문서 및 온라인 자료를 참조하시기 바랍니다.

#GraphQL #Subscriptions