React에서 GraphQL Subscription으로 실시간 데이터 처리하기

React 애플리케이션에서 실시간 데이터를 처리할 때 GraphQL Subscription은 매우 유용한 도구입니다. Subscription을 사용하면 서버에서 데이터가 변경될 때마다 클라이언트가 자동으로 업데이트를 받을 수 있어 사용자 경험을 크게 향상시킬 수 있습니다.

1. GraphQL Subscription 기본 개념

Subscription은 GraphQL 쿼리 방식 중 하나로, 클라이언트가 서버에 구독 요청을 보내면 서버에서 데이터 변동이 있을 때마다 실시간으로 업데이트를 푸시해줍니다. WebSocket 프로토콜을 주로 사용합니다.

2. React에서 Apollo Client 설정

React에서 GraphQL Subscription을 사용하려면 Apollo Client와 WebSocketLink를 함께 설정해야 합니다.

import { ApolloClient, InMemoryCache, split, HttpLink } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';
import { getMainDefinition } from '@apollo/client/utilities';

const httpLink = new HttpLink({
  uri: 'https://your-api.com/graphql',
});

const wsLink = new WebSocketLink({
  uri: 'wss://your-api.com/graphql',
  options: {
    reconnect: true
  }
});

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

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

3. Subscription 쿼리 작성과 React 컴포넌트에서 사용하기

실시간으로 받을 Subscription 쿼리를 작성하고, React 컴포넌트에서 useSubscription 훅을 통해 데이터를 받아옵니다.

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

const MESSAGE_SUBSCRIPTION = gql`
  subscription OnMessageAdded {
    messageAdded {
      id
      content
      user
    }
  }
`;

function MessageList() {
  const { data, loading, error } = useSubscription(MESSAGE_SUBSCRIPTION);

  if (loading) return <p>로딩 중...</p>;
  if (error) return <p>에러 발생: {error.message}</p>;

  return (
    <ul>
      {data.messageAdded.map(msg => (
        <li key={msg.id}>{msg.user}: {msg.content}</li>
      ))}
    </ul>
  );
}

4. 실전 팁

• Subscription 데이터가 누적되도록 캐시 정책을 잘 설정하세요.
• 오프라인 상태나 네트워크 끊김을 대비해 재접속 로직을 추가하는 것이 좋습니다.
• WebSocket 서버의 안정성과 보안 설정을 반드시 확인하세요.

이렇게 설정하면 React 앱에서 실시간으로 GraphQL 데이터를 편리하게 받아 처리할 수 있습니다.