자바스크립트를 활용한 GraphQL Subscriptions를 위한 에러 핸들링 방법

10 Nov 2023

javascript

GraphQL Subscriptions는 실시간 데이터 업데이트를 위한 효율적인 방법입니다. 자바스크립트 환경에서 GraphQL Subscriptions를 구현할 때, 에러 핸들링은 중요한 과제입니다. 에러가 발생할 경우 적절한 방법으로 처리하여 시스템의 안정성을 보장해야 합니다. 이 글에서는 자바스크립트를 활용한 GraphQL Subscriptions 에러 핸들링 방법에 대해 알아보겠습니다.

1. Subscription에서 에러 핸들링

GraphQL Subscriptions에서 에러를 핸들링하기 위해서는 여러가지 방법이 있습니다. 가장 일반적인 방법은 subscribe 함수 내에서 에러를 처리하는 것입니다. 다음은 예시 코드입니다.

const { PubSub, withFilter } = require('graphql-subscriptions');
const pubsub = new PubSub();

const SOMETHING_CHANGED = 'SOMETHING_CHANGED';

const resolvers = {
  Subscription: {
    somethingChanged: {
      subscribe: withFilter(
        () => pubsub.asyncIterator(SOMETHING_CHANGED),
        (payload, variables) => {
          // 필터링 조건을 추가하여 특정 정보만 구독
          return payload.filter === variables.id;
        }
      ),
      resolve: payload => {
        // 에러 핸들링을 위한 로직 추가
        if (payload.error) {
          throw new Error(payload.error.message);
        }
        return payload.data;
      },
    },
  },
};

위의 코드에서 somethingChanged 서브스크립션에서는 subscribe 함수 내에서 필요에 따라 에러를 처리할 수 있습니다. 예시 코드에서는 payload에 에러 정보가 포함되어 있을 경우 throw new Error()를 통해 에러를 발생시킵니다.

2. 에러를 Subscription 클라이언트로 전달

Subscription 클라이언트로 에러를 전달하기 위해서는 클라이언트 측에서 에러를 구독해야 합니다. 예시 코드를 통해 알아보겠습니다.

import { SubscriptionClient } from 'subscriptions-transport-ws';
import { ApolloClient } from 'apollo-client';
import { split } from 'apollo-link';
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { getMainDefinition } from 'apollo-utilities';
import { InMemoryCache } from 'apollo-cache-inmemory';

const wsClient = new SubscriptionClient('ws://localhost:4000/graphql', {
  reconnect: true,
});

const wsLink = new WebSocketLink(wsClient);

const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql',
});

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

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

const SOMETHING_CHANGED = gql`
  subscription SomethingChanged {
    somethingChanged {
      id
      message
      error
    }
  }
`;

const subscription = client
  .subscribe({ query: SOMETHING_CHANGED })
  .subscribe({
    next: ({ data }) => {
      // 데이터를 처리하는 로직
      console.log(data);
    },
    error: (err) => {
      // 에러를 처리하는 로직
      console.error(err);
    },
  });

위의 코드에서 SubscriptionClient를 생성하고 WebSocketLink를 통해 GraphQL Subscriptions에 연결합니다. 그리고 subscribe 함수를 통해 데이터를 구독합니다. subscribe 함수에서는 next 콜백 함수를 통해 데이터를 처리하고, error 콜백 함수를 통해 에러를 처리합니다.

마무리

GraphQL Subscriptions를 자바스크립트에서 구현할 때 에러 핸들링은 필수적인 과정입니다. subscribe 함수 내에서 에러를 처리하고, 클라이언트 측에서도 에러를 구독하여 적절히 처리해야 합니다. 이를 통해 안정적인 GraphQL Subscriptions를 구현할 수 있습니다. 추가적인 정보는 GraphQL Subscriptions 문서를 참고하세요.

#tech #javascript