타입스크립트(TypeScript)는 정적 타입을 지원하는 JavaScript의 확장 버전으로, GraphQL은 쿼리 언어 및 런타임입니다. 이 글에서는 타입스크립트에서 GraphQL API를 사용하는 방법에 대해 알아보겠습니다.

GraphQL API 연동

GraphQL API를 타입스크립트에서 사용하려면, 먼저 graphql-request나 apollo-client와 같은 GraphQL 클라이언트 라이브러리를 설치해야 합니다.

npm install graphql graphql-request

GraphQL 쿼리 작성

GraphQL로 데이터를 가져오기 위해서는 API에 보낼 쿼리를 작성해야 합니다. 타입스크립트에서는 gql 템플릿 리터럴을 사용하여 쿼리를 정의할 수 있습니다.

import { gql } from 'graphql-request';

const GET_USERS = gql`
  query {
    users {
      id
      name
    }
  }
`;

GraphQL 클라이언트 생성

다음으로, GraphQL 클라이언트를 생성하고 API 엔드포인트와 쿼리를 사용하여 데이터를 요청합니다.

import { request, GraphQLClient } from 'graphql-request';

const endpoint = 'https://example.com/graphql';
const client = new GraphQLClient(endpoint);

const fetchData = async () => {
  try {
    const data = await client.request(GET_USERS);
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

fetchData();

위 예제에서는 graphql-request 라이브러리를 사용하여 GraphQL 클라이언트를 생성하고, API 엔드포인트와 쿼리를 사용하여 데이터를 가져오고 있습니다.

결론

타입스크립트에서 GraphQL API를 사용하는 방법을 살펴보았습니다. graphql-request를 사용하여 쿼리를 작성하고 데이터를 가져오는 방법을 알아보았습니다. GraphQL을 사용하면 필요한 데이터만을 효율적으로 가져올 수 있으며, 타입스크립트의 정적 타입 지원을 통해 안정적인 코드를 작성할 수 있습니다.

더 많은 정보를 원하시면 GraphQL 공식 문서를 참고해보세요.