GraphQL 스키마에서 TypeScript 형식으로

문제: 스키마와 타입의 불일치

# Without codegen: manual types that drift from schema
interface User { id: string; name: string; } // may not match schema

GraphQL 코드 생성기

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

codegen.yml 구성

# codegen.yml
schema: "./api/schema.graphql"
generates:
  src/generated/types.ts:
    plugins:
      - typescript

생성기 실행

npx graphql-codegen
# Generates src/generated/types.ts with all schema types

생성된 출력 예시

// src/generated/types.ts (generated)
export type User = {
  __typename?: "User";
  id: string;
  name: string;
  email: string;
};

export type Query = {
  __typename?: "Query";
  user?: Maybe<User>;
};

원격 엔드포인트의 스키마

# codegen.yml with remote schema
schema:
  - https://api.example.com/graphql:
      headers:
        Authorization: "Bearer ${AUTH_TOKEN}"

스칼라 타입 매핑

# codegen.yml
config:
  scalars:
    DateTime: string
    JSON: Record<string, unknown>
    Upload: File

열거형 처리

# Generated from GraphQL enum Role { ADMIN USER GUEST }
export enum Role {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST",
}

널이 아닌 값과 Maybe

// GraphQL: name: String (nullable)
// Generated: name?: Maybe<string>

// GraphQL: id: ID! (non-null)
// Generated: id: string

CI 통합

# CI: check no drift
npx graphql-codegen --check
# Exits 1 if generated files are out of date

스키마에서 타입 생성 요약

빠른 확인

배운 내용