GraphQL은 API를 위한 쿼리 언어입니다. 자바스크립트에서는 fetch API를 통해 GraphQL 서버에 데이터를 요청하고 처리할 수 있습니다. 이 글에서는 자바스크립트 fetch API와 GraphQL을 사용하여 데이터 쿼리를 처리하는 방법에 대해 알아보겠습니다.

Fetch API로 GraphQL 요청 보내기

먼저, fetch API를 사용하여 GraphQL 요청을 보내는 방법을 살펴보겠습니다. 다음은 GraphQL 서버에 요청을 보내는 기본적인 예제입니다.

fetch('http://graphqlserver.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer <token>'
  },
  body: JSON.stringify({
    query: `
      query {
        users {
          id
          name
          email
        }
      }
    `
  })
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

위 예제에서는 fetch 함수를 사용하여 GraphQL 서버인 http://graphqlserver.com/graphql로 POST 요청을 보내고, 요청 본문에는 GraphQL 쿼리를 JSON 형식으로 전송합니다. 요청에는 Content-Type 헤더를 application/json으로 설정하여 쿼리를 JSON으로 인코딩합니다. 또한, 필요한 경우에 Authorization 헤더에 인증 토큰을 추가할 수 있습니다.

GraphQL 서버는 요청을 처리하고 필요한 데이터를 응답합니다. 이 응답을 .then() 메서드로 처리하여 데이터를 활용할 수 있습니다. 이 예제에서는 응답 데이터를 콘솔에 출력하도록 하였습니다. 에러 처리를 위해 .catch() 메서드를 사용할 수도 있습니다.

GraphQL 쿼리 작성하기

GraphQL에서는 요청할 데이터의 구조를 쿼리로 정의합니다. 다음은 위 예제에서 사용된 GraphQL 쿼리입니다.

query {
  users {
    id
    name
    email
  }
}

위 쿼리는 users 라는 필드로부터 id, name, email 필드를 가져옵니다. 실제로 원하는 데이터의 구조에 따라 쿼리를 작성할 수 있습니다. 필요한 필드를 선택하여 가져오거나, 하위 오브젝트의 필드를 통해 관련된 데이터를 가져올 수 있습니다.

GraphQL 응답 처리하기

GraphQL 서버에서는 클라이언트의 요청에 따라 선택한 필드와 데이터를 응답합니다. 자바스크립트에서는 위 예제에서처럼 .then() 메서드로 응답 데이터를 처리할 수 있습니다. 응답 데이터는 JSON 형식으로 반환되므로, JSON을 파싱하여 필요한 값을 추출할 수 있습니다.

위 예제에서는 응답 데이터를 콘솔에 출력하도록 하였지만, 이 데이터를 다양한 방식으로 활용할 수 있습니다. 예를 들어, DOM에 데이터를 렌더링하거나, 다른 API에 전달하여 추가 작업을 수행할 수 있습니다.

결론

이번 글에서는 자바스크립트 fetch API와 GraphQL을 사용하여 데이터 쿼리를 처리하는 방법에 대해 알아보았습니다. fetch API를 사용하여 GraphQL 서버에 요청을 보내고, 응답 데이터를 처리하는 방법을 다루었습니다. GraphQL은 다양한 클라이언트 플랫폼에서 사용할 수 있는 강력한 쿼리 언어이므로, 자바스크립트 프로젝트에서 활용해보시기 바랍니다.