GraphQL은 데이터를 효율적으로 관리하고 API를 유연하게 구축하기 위한 쿼리 언어입니다. 타입스크립트는 정적 타입을 제공하여 개발자가 코드를 안전하게 유지하고 유지보수할 수 있도록 도와줍니다. 이 블로그 포스트에서는 타입스크립트를 사용하여 GraphQL을 프론트엔드에서 어떻게 개발하는지 알아보겠습니다.

1. GraphQL 클라이언트 라이브러리 설치

가장 먼저 필요한 것은 GraphQL 클라이언트 라이브러리를 설치하는 것입니다. Apollo Client는 React 애플리케이션에서 GraphQL을 사용하는 데 널리 사용되는 라이브러리입니다. 타입스크립트와 함께 Apollo Client를 설치하는 방법은 다음과 같습니다.

npm install @apollo/client graphql

2. GraphQL 스키마 정의

GraphQL에서는 스키마를 사용하여 데이터 모델을 정의합니다. 타입스크립트를 사용하여 GraphQL 스키마를 정의할 때는 graphql-codegen과 함께 @graphql-codegen/typescript 플러그인을 사용하여 타입 정의를 생성할 수 있습니다.

npm install @graphql-codegen/cli @graphql-codegen/typescript

그리고 codegen.yml 파일을 프로젝트 루트에 생성하여 다음과 같은 설정을 추가합니다.

schema: http://localhost:4000/graphql
documents: 'src/**/*.graphql'
generates:
  src/generated/graphql.ts:
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'

3. GraphQL 쿼리 및 뮤테이션 작성

Apollo Client를 사용하여 GraphQL 쿼리와 뮤테이션을 작성할 때는 타입스크립트로 타입 안전성을 확보할 수 있습니다. 예를 들어, 다음과 같이 사용자 정보를 가져오는 GraphQL 쿼리를 작성할 수 있습니다.

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

export const GET_USER = gql`
  query GetUser($userId: ID!) {
    user(id: $userId) {
      id
      name
      email
    }
  }
`;

4. GraphQL 쿼리 실행

마지막으로, 작성한 GraphQL 쿼리를 실행하여 데이터를 가져오는 방법을 알아봅시다.

import { useQuery } from '@apollo/client';
import { GET_USER } from './queries';

const UserProfile = ({ userId }) => {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { userId },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <p>Name: {data.user.name}</p>
      <p>Email: {data.user.email}</p>
    </div>
  );
};

타입스크립트를 사용하여 GraphQL을 프론트엔드에서 개발하는 방법을 알아보았습니다. 타입 안전성을 확보하면서 GraphQL을 사용하여 데이터를 효율적으로 관리할 수 있습니다.