쿠팡이츠, GraphQL Code Generator 최신 사용법 가이드

들어가며

GraphQL Code Generator를 사용하여 React 프로젝트에서 Apollo Client와 함께 타입스크립트 타입을 자동 생성하는 과정을 단계별로 정리합니다. 이 과정은 GraphQL 스키마에 기반하여 필요한 타입스크립트 인터페이스와 훅스를 생성하여, API 사용 시 타입 안전성을 보장하고 개발 효율성을 높입니다.

1. 필요한 패키지 설치

먼저, 프로젝트에 필요한 GraphQL Code Generator 관련 패키지들을 설치합니다.

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

• @graphql-codegen/cli: GraphQL Code Generator의 커맨드 라인 인터페이스
• @graphql-codegen/typescript: 타입스크립트 타입을 생성하는 플러그인
• @graphql-codegen/typescript-operations: GraphQL 문서(쿼리, 뮤테이션, 서브스크립션)에 대한 타입스크립트 타입을 생성하는 플러그인
  
  

2. codegen.yml 설정 파일 생성

codegen.yml 파일을 프로젝트 루트에 생성하고, 다음과 같이 설정합니다.

overwrite: true
schema: http://localhost:4000/graphql
documents: "./src/**/*.tsx"
generates:
  ./src/__api__/types.ts:
    plugins:
      - typescript
      - typescript-operations

• overwrite: 기존 생성된 파일들을 덮어쓸지 여부를 결정합니다.
• schema: GraphQL 서버의 스키마 URL을 지정합니다.
• documents: 프로젝트 내의 GraphQL 문서(쿼리, 뮤테이션, 서브스크립션 등)가 위치한 파일 경로를 패턴으로 지정합니다.
• generates: 생성된 타입스크립트 파일의 저장 위치와 사용할 플러그인들을 지정합니다.

3. package.json에 스크립트 추가

package.json 파일에 다음 스크립트를 추가하여 타입 생성을 쉽게 실행할 수 있도록 합니다.

"scripts": {
  "generate": "graphql-codegen"
}

4. 타입 생성 실행

설정을 완료한 후, 아래의 커맨드로 타입을 생성합니다.

npm run generate

이 명령어는 ./src/__api__/types.ts에 지정된 경로로 타입 파일을 생성합니다. 생성된 타입 파일은 백엔드의 모든 타입을 포함하며, 뮤테이션과 쿼리 이름에는 자동으로 Mutation과 Query 접미사가 붙습니다 (예: login 뮤테이션이 있을 경우 loginMutation 타입을 생성).

5. 생성된 타입 사용 예

생성된 타입을 사용하여 Apollo Client의 훅스를 타입 안전하게 사용합니다.

import { useMutation, gql } from '@apollo/client';
import { LoginMutation, LoginMutationVariables } from './__api__/types';

const LOGIN_MUTATION = gql`
  mutation Login($email: String!, $password: String!) {
    login(email: $email, password: $password) {
      user {
        id
        name
        email
      }
      token
    }
  }
`;

function Login() {
  const [login, { data, loading, error }] = useMutation<LoginMutation, LoginMutationVariables>(LOGIN_MUTATION);

  const handleLogin = () => {
    login({
      variables: {
        email: 'example@example.com',
        password: 'password'
      }
    });
  };

  return (
    <div>
      <button onClick={handleLogin} disabled={loading}>
        Login
      </button>
      {error && <p>Error logging in!</p>}
      {data && <

p>Welcome, {data.login.user.name}!</p>}
    </div>
  );
}

마치며

• codegen.yml에서 documents 경로 설정 시, 실제 GraphQL 쿼리와 뮤테이션을 포함하는 파일들을 정확히 지정해야 합니다.
• 스키마 URL(schema)은 현재 GraphQL 서버의 주소로, 로컬 개발 환경 또는 실제 서버의 주소가 될 수 있습니다.
• 생성된 타입의 이름이 기대와 다를 경우(예: loginMutationMutation), GraphQL 문서 내에서 사용하는 쿼리나 뮤테이션의 이름을 확인하고 필요 시 재조정해야 할 수 있습니다.

이렇게 설정하면 GraphQL Code Generator를 사용하여 타입 안전성을 보장하고, 개발 과정에서의 실수를 줄일 수 있습니다.

• TypeScript with Apollo Client
• GraphQL-Codegen