GraphQL은 클라이언트가 데이터를 효율적으로 요청하기 위한 질의 언어입니다. GraphQL API는 RESTful API보다 유연하며, 필요한 필드만 요청하고 응답으로 받을 수 있습니다. 이번 블로그 포스트에서는 자바스크립트의 fetch API를 사용하여 GraphQL API를 호출하는 방법을 알아보겠습니다.

fetch API란?

fetch API는 자바스크립트의 내장된 웹 API로, 네트워크 리소스를 비동기적으로 가져오기 위해 사용됩니다. RESTful API 호출뿐만 아니라 GraphQL API 호출에도 자주 사용됩니다. fetch API를 사용하면 HTTP 요청을 보내고 응답을 처리하는 과정을 간단하게 구현할 수 있습니다.

GraphQL API 호출하기

GraphQL API를 호출하기 위해서는 앞서 언급한 fetch API를 사용해야 합니다. 다음은 GraphQL API 호출의 기본적인 구조입니다.

fetch('<API_URL>', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query: '<GRAPHQL_QUERY>' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

위 코드에서 <API_URL>에는 GraphQL API의 엔드포인트 URL을 입력합니다. <GRAPHQL_QUERY>에는 요청할 필드와 변수 등을 포함하는 GraphQL 질의를 작성합니다.

예를 들어, GitHub의 GraphQL API를 호출하여 사용자 정보를 가져오는 예제를 살펴보겠습니다.

fetch('https://api.github.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer <YOUR_ACCESS_TOKEN>'
  },
  body: JSON.stringify({ query: 'query { viewer { login name } }' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

위 코드에서 <YOUR_ACCESS_TOKEN>에는 개인 액세스 토큰을 입력해야 합니다. 본인의 GitHub 계정으로 로그인한 후 Personal access tokens에서 생성할 수 있습니다.

이 예제에서는 viewer 객체의 login과 name 필드를 요청하고, 해당 정보를 가져와서 콘솔에 출력합니다.

요약

이번 포스트에서는 자바스크립트의 fetch API를 사용하여 GraphQL API를 호출하는 방법을 알아보았습니다. fetch API를 사용하면 GraphQL API와 간단하게 통신할 수 있으며, 필요한 데이터만 요청하고 받을 수 있습니다.

GraphQL을 사용하면 복잡한 데이터 요구사항에 대처할 수 있으며, fetch API를 통해 JavaScript로 손쉽게 이를 구현할 수 있습니다.

더 많은 GraphQL 관련 정보와 예제는 공식 GraphQL 웹사이트를 참고하시기 바랍니다.