GraphQL은 데이터를 효율적으로 가져오기 위한 쿼리 언어입니다. fetch API는 웹 브라우저에서 HTTP 요청을 보내는 데 사용되는 기본 API입니다. 자바스크립트에서 fetch API를 사용하여 GraphQL API를 호출하는 방법에 대해 알아보겠습니다.

fetch API를 사용하여 GraphQL API 호출하기

GraphQL API를 호출하기 위해 fetch API를 사용하려면 다음과 같은 단계를 따라야 합니다.

1. GraphQL API의 엔드포인트 URL을 설정합니다.
2. 요청할 GraphQL 쿼리를 작성합니다.
3. fetch API를 사용하여 HTTP POST 요청을 보냅니다.
4. 응답을 처리합니다.

다음은 간단한 예제 코드입니다.

// 1. GraphQL API의 엔드포인트 URL 설정
const url = 'https://example.com/graphql';

// 2. 요청할 GraphQL 쿼리 작성
const query = `
  query {
    getUsers {
      id
      name
      email
    }
  }
`;

// 3. fetch API를 사용하여 HTTP POST 요청 보내기
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ query })
})
  .then(response => response.json())
  .then(data => {
    // 4. 응답 처리
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위의 코드에서는 GraphQL API의 엔드포인트 URL을 url 변수에 설정하고, 요청할 GraphQL 쿼리를 query 변수에 작성합니다. 그런 다음 fetch API를 사용하여 해당 URL에 HTTP POST 요청을 보냅니다. fetch API는 Promise를 반환하며, 응답이 성공하면 JSON을 파싱하여 데이터를 얻을 수 있습니다. 응답 데이터는 data 변수에 저장되며, 이를 콘솔에 출력하는 예제를 보여주고 있습니다.

이렇게 자바스크립트 fetch API를 사용하여 GraphQL API를 호출할 수 있습니다. GraphQL API에 맞게 요청을 작성하고, fetch API의 옵션을 설정하여 요청을 보낼 수 있습니다. 응답을 적절하게 처리하면 API로부터 필요한 데이터를 효율적으로 가져올 수 있습니다.