자바스크립트를 활용한 GraphQL Subscriptions를 위한 디버깅 방법

10 Nov 2023

graphql

GraphQL Subscriptions는 실시간 데이터를 전송하기 위해 사용되는 탁월한 기술입니다. 하지만 때로는 Subscriptions가 원하는 대로 작동하지 않을 수 있습니다. 이럴 때 디버깅은 매우 중요한 단계가 됩니다. 이번 글에서는 자바스크립트를 활용한 GraphQL Subscriptions 디버깅 방법에 대해 알아보겠습니다.

1. Apollo Devtools 사용하기

Apollo Devtools는 GraphQL 개발에 특화된 디버깅 도구입니다. 이 도구를 사용하면 클라이언트와 서버 간의 GraphQL 통신을 실시간으로 모니터링할 수 있습니다. Subscriptions가 발생하는 동안 전송되는 데이터와 오류 메시지를 캡처할 수 있어 디버깅에 매우 유용합니다.

아래는 Apollo Devtools의 사용 예시입니다.

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { ApolloProvider } from '@apollo/client/react';
import { ApolloLink, split } from '@apollo/client';
import { getMainDefinition } from '@apollo/client/utilities';
import { WebSocketLink } from '@apollo/client/link/ws';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const httpLink = new ApolloLink((operation, forward) => {
  operation.setContext({
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}` // 인증 토큰 설정
    }
  });
  return forward(operation);
});

const wsLink = new WebSocketLink({
  uri: 'wss://example.com/graphql-subscriptions', // Subscriptions의 WebSocket 엔드포인트
  options: {
    reconnect: true
  }
});

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

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

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

위의 코드에서 Apollo Devtools를 통해 GraphQL Subscriptions를 디버깅할 수 있습니다. Apollo Devtools는 브라우저 확장 프로그램으로 제공되며 설치 후 개발자 도구에서 사용할 수 있습니다.

2. 콘솔에 로그 남기기

디버깅을 위해 console.log()를 사용하는 것은 매우 유용한 방법입니다. 자바스크립트 코드에서 Subscriptions가 호출될 때 관련된 데이터와 상태를 콘솔에 출력하여 문제를 파악하는 데 도움이 됩니다.

import { PubSub } from 'apollo-server';

const pubsub = new PubSub();

const SUBSCRIPTION_TOPIC = 'mySubscriptionTopic';

// Subscription Resolver
const subscriptionResolvers = {
  mySubscription: {
    subscribe: () => pubsub.asyncIterator(SUBSCRIPTION_TOPIC),
    resolve: (payload) => {
      console.log('Payload:', payload); // Payload 로깅
      return payload;
    }
  }
};

위의 예시 코드에서는 Subscriptions가 호출될 때 payload 데이터를 콘솔에 출력합니다. 이를 통해 어떤 데이터가 전달되는지 확인할 수 있으며, 문제의 원인을 찾는 데 도움이 됩니다.

3. 오류 처리 및 메시지 출력

GraphQL Subscriptions에서 발생하는 오류는 적절하게 처리되어야 합니다. 디버깅을 위해 오류 핸들링 코드를 추가하고 오류 메시지를 출력하는 것이 좋습니다.

const subscriptionResolvers = {
  mySubscription: {
    subscribe: () => {
      const subscription = pubsub.asyncIterator(SUBSCRIPTION_TOPIC);
      subscription.return = () => {
        console.log('Subscription Ended'); // 종료 로깅
        return subscription.return.apply(subscription, arguments);
      };
      return subscription;
    },
    resolve: (payload) => {
      if (payload.error) {
        console.log('Error:', payload.error); // 오류 로깅
      }
      return payload;
    }
  }
};

위의 코드에서는 Subscriptions가 종료될 때 “Subscription Ended” 메시지를 콘솔에 출력하고, payload에 오류가 있는 경우 해당 오류를 콘솔에 출력합니다. 이를 통해 오류를 추적하고 해결할 수 있습니다.

GraphQL Subscriptions 디버깅은 매우 중요합니다. 적절한 도구와 로깅을 사용하여 Subscriptions가 예상대로 작동하는지 확인하고 문제를 신속하게 해결할 수 있습니다.

#GraphQL #Subscriptions