Apollo Client와 함께 자바스크립트로 GraphQL Subscriptions를 위한 성능 튜닝 방법

10 Nov 2023

graphql

GraphQL Subscriptions은 실시간 데이터 업데이트를 위한 훌륭한 도구입니다. Apollo Client는 GraphQL Subscriptions를 지원하여 클라이언트 애플리케이션에서 쉽게 구현할 수 있게 도와줍니다. 하지만 대규모 애플리케이션에서는 성능 이슈가 발생할 수 있습니다. 따라서 이를 해결하기 위해 몇 가지 성능 튜닝 방법을 소개하겠습니다.

1. Subscription 단계 단순화하기

GraphQL Subscriptions는 구독하는 리소스의 변경사항을 효율적으로 전달하기 위해 푸시 방식으로 동작합니다. 그러나 많은 구독이 있는 경우, 각 구독에 대한 처리가 복잡해질 수 있습니다. 이를 해결하기 위해 Subscription 단계를 단순화하는 것이 좋습니다. 예를 들어, 데이터베이스에 변경사항이 발생할 때마다 모든 구독을 처리하기보다는, 변경사항이 발생한 구독들을 그룹화하여 한 번에 처리하는 방식을 고려해보세요.

const subscriptionManager = new SubscriptionManager({
  schema,
  pubsub,
  setupFunctions: {},
});

subscriptionManager.subscribe({
  query: 'Subscription TodoUpdated { todoUpdated { id } }',
  callback: (error, result) => {
    // 구독 이벤트 처리
  },
});

subscriptionManager.publish('TodoUpdated', { todoUpdated: { id: '1' }});

2. 중복 데이터 제거하기

GraphQL Subscriptions는 여러 클라이언트에서 동일한 데이터를 구독할 수 있습니다. 이러한 경우, 중복 데이터가 전송될 수 있습니다. 데이터 중복을 제거하면 네트워크 대역폭과 데이터 처리 시간을 절약할 수 있습니다. 중복 데이터를 감지하고 제거하는 로직을 구현하는 것이 좋습니다.

const existingData = {};

subscriptionManager.subscribe({
  query: 'Subscription TodoUpdated { todoUpdated { id } }',
  callback: (error, result) => {
    if (!existingData[result.id]) {
      // 구독 이벤트 처리
      existingData[result.id] = true;
    }
  },
});

3. 데이터 필터링하기

클라이언트는 실시간 업데이트를 구독할 때, 필요한 데이터만 수신하도록 필터링하는 것이 중요합니다. 불필요한 데이터의 송수신은 성능 저하를 가져올 수 있습니다. 필터링 옵션을 사용하여 원하는 데이터만 수신하거나, 서버 측에서 필터링 로직을 적용하는 것이 좋습니다.

subscriptionManager.subscribe({
  query: 'Subscription TodoUpdated($userId: ID!) { todoUpdated(userId: $userId) { id } }',
  variables: { userId: '1' },
  callback: (error, result) => {
    // 구독 이벤트 처리
  },
});

4. 네트워크 타임아웃 설정하기

네트워크 상태에 따라 실시간 업데이트가 지연되거나 실패할 수 있습니다. 이러한 경우 애플리케이션의 성능을 저하시킬 수 있습니다. 따라서 네트워크 타임아웃을 설정하여 적절한 대응 로직을 구현하는 것이 좋습니다.

const networkTimeout = setTimeout(() => {
  // 타임아웃 발생 시 처리 로직
}, 5000);

subscriptionManager.subscribe({
  query: 'Subscription TodoUpdated { todoUpdated { id } }',
  callback: (error, result) => {
    clearTimeout(networkTimeout);
    // 구독 이벤트 처리
  },
});

위에서 소개한 성능 튜닝 방법을 사용하여 Apollo Client와 함께 자바스크립트로 GraphQL Subscriptions의 성능을 향상시켜보세요.

참고 자료: