[typescript] 타입스크립트로의 GraphQL 오류 처리

GraphQL은 클라이언트와 서버 간의 데이터 통신을 위한 강력한 쿼리 언어입니다. 타입스크립트를 사용하여 GraphQL을 구현하면서, 발생할 수 있는 오류를 처리하는 방법에 대해 알아보겠습니다.

오류 처리의 중요성

GraphQL 쿼리 중에 발생하는 오류는 클라이언트에게 제대로 된 응답을 제공하는 데 중요합니다.

타입스크립트와 GraphQL 오류 처리

타입스크립트를 사용하여 GraphQL을 구현할 때, 오류 처리를 위한 몇 가지 패턴을 사용할 수 있습니다.

1. GraphQL 오류 타입 정의하기

먼저, GraphQL에서 발생할 수 있는 여러 종류의 오류를 타입스크립트로 정의합니다.

interface GraphQLError {
  message: string;
  locations?: { line: number; column: number }[];
  path?: string[];
}

interface GraphQLResponse {
  data: any;
  errors?: GraphQLError[];
}

2. 서버에서 오류 처리하기

서버에서는 발생한 오류를 적절히 처리하여 클라이언트에게 응답합니다. 이때, GraphQLResponse 내의 errors 필드에 오류 정보를 포함시킵니다.

import { RequestHandler } from 'express';
import { execute, parse } from 'graphql';
import { schema } from './schema';

export const graphqlHandler: RequestHandler = (req, res) => {
  const { query, variables } = req.body;
  
  execute({
    schema,
    document: parse(query),
  })
    .then((result) => {
      if (result.errors) {
        const response: GraphQLResponse = {
          data: null,
          errors: result.errors,
        };
        res.json(response);
      } else {
        res.json(result);
      }
    })
    .catch((error) => {
      // Handle server errors
      res.status(500).send('Internal server error');
    });
};

3. 클라이언트에서 오류 처리하기

클라이언트에서는 받은 응답을 처리하여 오류가 있는 경우 적절히 표시해야 합니다. 이때, 받은 응답의 errors 필드를 확인하여 오류 정보를 처리합니다.

fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ query, variables }),
})
  .then((response) => response.json())
  .then((result) => {
    if (result.errors) {
      // Handle client-side errors
      console.error(result.errors);
    } else {
      // Process the data
      console.log(result.data);
    }
  })
  .catch((error) => {
    // Handle network errors
    console.error(error);
  });

결론

타입스크립트를 사용하여 GraphQL을 구현할 때, 명확하고 안정적인 오류 처리는 매우 중요합니다. 서버와 클라이언트 양쪽에서 오류를 적절히 처리하여 사용자에게 편리한 경험을 제공할 수 있습니다.

참고 자료