이번 포스트에서는 타입스크립트를 사용하여 GraphQL 요청과 응답을 효과적으로 처리하는 방법에 대해 알아보겠습니다. GraphQL은 API를 쉽게 구축하고 사용할 수 있도록 해주는 쿼리 언어이며, 타입스크립트는 정적 타입 검사를 제공하여 안정적이고 확장 가능한 코드를 작성할 수 있게 해줍니다.

1. GraphQL 요청 처리하기

먼저, GraphQL 요청을 처리하는 방법에 대해 알아보겠습니다. 타입스크립트 환경에서는 axios나 fetch와 같은 HTTP 클라이언트를 사용하여 GraphQL 서버에 요청을 보낼 수 있습니다. 요청을 보내기 전, 요청할 쿼리를 정의하고 필요에 따라 변수를 함께 전달할 수 있습니다.

아래는 예시 코드입니다.

import axios from 'axios';

const query = `
  query GetUserInfo($userId: ID!) {
    user(id: $userId) {
      id
      name
      email
    }
  }
`;

const variables = {
  userId: '123',
};

axios.post('/graphql', {
  query,
  variables,
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

위 코드에서는 axios를 사용하여 /graphql 엔드포인트에 GraphQL query와 variables를 포함시켜 POST 요청을 보내고 있습니다.

2. GraphQL 응답 처리하기

다음으로, GraphQL 응답을 처리하는 방법에 대해 살펴보겠습니다. GraphQL 서버로부터 받은 응답은 데이터와 함께 잠재적인 에러 정보도 포함하고 있습니다. 따라서 타입스크립트에서는 이에 대한 처리를 적절히 해주어야 합니다.

아래는 예시 코드입니다.

interface UserData {
  id: string;
  name: string;
  email: string;
}

interface GraphQLResponse {
  data: {
    user: UserData;
  };
  errors: {
    message: string;
  }[];
}

axios.post('/graphql', {
  query,
  variables,
}).then((response: GraphQLResponse) => {
  if (response.errors) {
    console.error('GraphQL Error:', response.errors[0].message);
  } else {
    const userData = response.data.user;
    console.log(userData);
  }
}).catch(error => {
  console.error('Network Error:', error);
});

위 코드에서는 GraphQLResponse 인터페이스를 사용하여 응답을 타입 정의하고, 에러가 있을 경우 콘솔에 에러 메시지를 출력하고 정상적인 경우에는 사용자 데이터를 콘솔에 출력하고 있습니다.

결론

타입스크립트를 사용하여 GraphQL 요청과 응답을 처리하는 방법에 대해 살펴보았습니다. 타입스크립트의 정적 타입 검사를 통해 안정적이고 확장 가능한 코드를 작성할 수 있으며, GraphQL의 강력한 기능을 활용하여 효율적인 데이터 요청 및 응답 처리가 가능합니다.

참고문헌:

• GraphQL 공식 문서
• axios 라이브러리
• 타입스크립트 공식 문서