[typescript] 타입스크립트에서의 GraphQL 클라이언트 사용

22 Dec 2023

typescript

GraphQL은 강력하고 유연한 API를 구축하고 쿼리할 수 있는 새로운 방법을 제공합니다. 타입스크립트 환경에서 GraphQL을 사용하면 강력한 타입 시스템을 통해 클라이언트와 서버 사이의 커뮤니케이션을 보다 안전하게 만들 수 있습니다.

GraphQL 클라이언트 라이브러리 선택

타입스크립트 환경에서 GraphQL을 사용할 때 가장 일반적으로 사용되는 라이브러리 중 하나는 apollo-client입니다.

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({
  uri: 'YOUR_GRAPHQL_ENDPOINT',
});

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('token');
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

GraphQL 쿼리 작성

타입스크립트에서는 GraphQL 쿼리를 작성하기 위해 graphql-tag와 @graphql-codegen/cli와 같은 도구를 사용하여 GraphQL 쿼리를 일반적인 JavaScript로 쉽게 변환할 수 있습니다.

import { gql } from '@apollo/client';

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

export const ADD_USER = gql`
  mutation addUser($input: UserInput!) {
    addUser(input: $input) {
      id
      name
      email
    }
  }
`;

타입 안전성

타입스크립트와 GraphQL을 함께 사용하면 코드에서 발생할 수 있는 많은 버그를 미리 방지할 수 있습니다. 데이터의 구조와 타입이 항상 일치하는지 확인할 수 있으며, TypeScript의 강력한 타입 시스템을 활용하여 안정성을 높일 수 있습니다.

마치며

타입스크립트와 GraphQL을 함께 사용하면 안정적이고 유연한 클라이언트 애플리케이션을 쉽게 구축할 수 있습니다. apollo-client와 같은 라이브러리를 사용하여 GraphQL을 손쉽게 통합하고, 강력한 타입 시스템을 활용하여 코드의 안정성과 신뢰성을 높일 수 있습니다.

참고 자료: