GraphQL Subscriptions를 이용한 자바스크립트 실시간 게시물 추천 기능 구현

10 Nov 2023

javascript

소개

이번 블로그 포스트에서는 GraphQL Subscriptions을 사용하여 자바스크립트로 실시간 게시물 추천 기능을 구현하는 방법에 대해 알아보겠습니다. GraphQL Subscriptions은 GraphQL의 훌륭한 기능 중 하나로, 서버에서 클라이언트로 실시간 데이터를 전송할 수 있는 기능입니다. 이를 활용하여 실시간으로 게시물을 추천하고, 사용자들에게 추천된 게시물을 보여줄 수 있습니다.

구현 단계

GraphQL Subscriptions를 지원하는 서버 구축
클라이언트에서 구독 기능 구현
실시간 게시물 추천 로직 구현
클라이언트에서 실시간으로 추천된 게시물을 받아와 화면에 표시

1. GraphQL Subscriptions를 지원하는 서버 구축

GraphQL Subscriptions를 사용하려면 서버가 Subscriptions를 지원해야 합니다. Apollo Server와 같은 GraphQL 서버 프레임워크를 사용할 수 있습니다. 다음은 Node.js와 Apollo Server를 이용한 간단한 서버의 예입니다.

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

const typeDefs = `
  type Query {
    hello: String
  }

  type Subscription {
    newRecommendation: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello, world!',
  },
  Subscription: {
    newRecommendation: {
      subscribe: () => pubsub.asyncIterator(['NEW_RECOMMENDATION']),
    },
  },
};

const pubsub = new PubSub();

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

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

2. 클라이언트에서 구독 기능 구현

클라이언트에서는 Apollo Client와 같은 GraphQL 클라이언트를 사용하여 서버의 Subscriptions에 구독할 수 있습니다. 아래는 Apollo Client를 사용한 예시입니다.

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

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

const subscription = gql`
  subscription {
    newRecommendation
  }
`;

client.subscribe({ query: subscription }).subscribe({
  next: ({ data }) => {
    console.log('New recommendation:', data.newRecommendation);
  },
});

3. 실시간 게시물 추천 로직 구현

서버에서는 새로운 게시물이 생성될 때마다 pubsub.publish('NEW_RECOMMENDATION', { newRecommendation: '게시물 추천 정보' })와 같은 방식으로 NEW_RECOMMENDATION 이벤트를 발행합니다. 클라이언트에서는 이 이벤트를 받아 실시간으로 추천 게시물 정보를 처리하면 됩니다.

4. 클라이언트에서 실시간으로 추천된 게시물을 받아와 화면에 표시

클라이언트에서는 구독을 설정하여 실시간으로 받은 추천 게시물을 화면에 표시할 수 있습니다. 예를 들어, React와 Apollo Client를 사용하는 경우, useSubscription 훅을 사용하여 Subscription을 구독하고, 데이터를 받아와 화면에 렌더링할 수 있습니다.

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

const NEW_RECOMMENDATION = gql`
  subscription {
    newRecommendation
  }
`;

const RecommendationFeed = () => {
  const { data } = useSubscription(NEW_RECOMMENDATION);

  return (
    <div>
      <h3>New recommendation:</h3>
      <p>{data?.newRecommendation}</p>
    </div>
  );
};

결론

GraphQL Subscriptions를 이용하여 자바스크립트로 실시간 게시물 추천 기능을 구현하는 방법에 대해 알아보았습니다. GraphQL에서는 클라이언트와 서버 간에 실시간 데이터 통신을 손쉽게 구현할 수 있으며, 이를 통해 더 동적이고 사용자 친화적인 기능을 개발할 수 있습니다. 자세한 내용은 Apollo GraphQL 및 GraphQL 공식 문서를 참조하시기 바랍니다.

[참고 자료]