9장: 코드 생성과 타입 안전성

// 코드 생성 없이: 타입 안전성 없음
const { data } = useQuery(GET_POST);
// data는 any 타입
// data.post.title — 오타가 있어도 컴파일러가 모름
// data.post.nonExistentField — 존재하지 않는 필드도 에러 없음

// 코드 생성 후: 완전한 타입 안전성
import { useGetPostQuery } from './generated/graphql';
 
const { data } = useGetPostQuery({ variables: { id: '1' } });
// data?.post?.title — 자동 완성, 타입 추론
// data?.post?.nonExistentField — 컴파일 에러!

pnpm add -D @graphql-codegen/cli \
  @graphql-codegen/typescript \
  @graphql-codegen/typescript-operations \
  @graphql-codegen/typescript-react-apollo \
  @graphql-codegen/near-operation-file-preset

import type { CodegenConfig } from '@graphql-codegen/cli';
 
const config: CodegenConfig = {
  // 스키마 소스 (로컬 파일 또는 원격 URL)
  schema: 'http://localhost:4000/graphql',
  
  // 쿼리 문서 위치
  documents: ['src/**/*.graphql', 'src/**/*.tsx'],
  
  generates: {
    // 서버 스키마 타입 생성
    'src/generated/schema-types.ts': {
      plugins: ['typescript'],
      config: {
        strictScalars: true,
        scalars: {
          DateTime: 'string',
          JSON: 'Record<string, unknown>',
        },
      },
    },
    
    // 클라이언트 쿼리별 타입 + 훅 생성
    'src/': {
      preset: 'near-operation-file',
      presetConfig: {
        extension: '.generated.ts',
        baseTypesPath: 'generated/schema-types.ts',
      },
      plugins: [
        'typescript-operations',
        'typescript-react-apollo',
      ],
      config: {
        withHooks: true,
        withComponent: false,
        withHOC: false,
      },
    },
  },
  
  hooks: {
    afterAllFileWrite: ['prettier --write'],
  },
};
 
export default config;

{
  "scripts": {
    "codegen": "graphql-codegen",
    "codegen:watch": "graphql-codegen --watch"
  }
}

type Post {
  id: ID!
  title: String!
  content: String!
  status: PostStatus!
  author: User!
  tags: [Tag!]!
  createdAt: DateTime!
}
 
enum PostStatus {
  DRAFT
  PUBLISHED
  ARCHIVED
}
 
input CreatePostInput {
  title: String!
  content: String!
  tags: [String!]
}

// 자동 생성됨
export type Post = {
  __typename?: 'Post';
  id: string;
  title: string;
  content: string;
  status: PostStatus;
  author: User;
  tags: Array<Tag>;
  createdAt: string;
};
 
export enum PostStatus {
  Draft = 'DRAFT',
  Published = 'PUBLISHED',
  Archived = 'ARCHIVED',
}
 
export type CreatePostInput = {
  title: string;
  content: string;
  tags?: Array<string> | null;
};

query GetPost($id: ID!) {
  post(id: $id) {
    id
    title
    content
    status
    author {
      id
      name
      avatar
    }
    tags {
      id
      name
    }
    createdAt
  }
}

// 자동 생성됨
export type GetPostQueryVariables = {
  id: string;
};
 
export type GetPostQuery = {
  __typename?: 'Query';
  post: {
    __typename?: 'Post';
    id: string;
    title: string;
    content: string;
    status: PostStatus;
    author: {
      __typename?: 'User';
      id: string;
      name: string;
      avatar: string | null;
    };
    tags: Array<{
      __typename?: 'Tag';
      id: string;
      name: string;
    }>;
    createdAt: string;
  } | null;
};
 
// React Apollo 훅
export function useGetPostQuery(
  baseOptions: Apollo.QueryHookOptions<GetPostQuery, GetPostQueryVariables>,
) {
  return Apollo.useQuery<GetPostQuery, GetPostQueryVariables>(
    GetPostDocument,
    baseOptions,
  );
}

import { gql } from '@apollo/client';
import type { PostCardFragment } from './PostCard.generated';
 
export const POST_CARD_FRAGMENT = gql`
  fragment PostCard on Post {
    id
    title
    summary
    author {
      ...AuthorAvatar
    }
    createdAt
  }
`;
 
interface PostCardProps {
  post: PostCardFragment;
}
 
export function PostCard({ post }: PostCardProps) {
  return (
    <article>
      <h2>{post.title}</h2>
      <p>{post.summary}</p>
      <AuthorAvatar author={post.author} />
      <time>{post.createdAt}</time>
    </article>
  );
}

import { gql } from '@apollo/client';
import type { AuthorAvatarFragment } from './AuthorAvatar.generated';
 
export const AUTHOR_AVATAR_FRAGMENT = gql`
  fragment AuthorAvatar on User {
    id
    name
    avatar
  }
`;
 
interface AuthorAvatarProps {
  author: AuthorAvatarFragment;
}
 
export function AuthorAvatar({ author }: AuthorAvatarProps) {
  return (
    <div>
      <img src={author.avatar ?? '/default-avatar.png'} alt={author.name} />
      <span>{author.name}</span>
    </div>
  );
}

import { gql } from '@apollo/client';
import { POST_CARD_FRAGMENT, PostCard } from '../components/PostCard';
import { AUTHOR_AVATAR_FRAGMENT } from '../components/AuthorAvatar';
import { useListPostsQuery } from './PostListPage.generated';
 
const LIST_POSTS = gql`
  ${POST_CARD_FRAGMENT}
  ${AUTHOR_AVATAR_FRAGMENT}
  query ListPosts($first: Int!, $after: String) {
    posts(first: $first, after: $after) {
      edges {
        node {
          ...PostCard
        }
      }
      pageInfo {
        hasNextPage
        endCursor
      }
    }
  }
`;
 
export function PostListPage() {
  const { data, loading, fetchMore } = useListPostsQuery({
    variables: { first: 10 },
  });
 
  if (loading) return <p>로딩 중...</p>;
 
  return (
    <div>
      {data?.posts.edges.map((edge) => (
        <PostCard key={edge.node.id} post={edge.node} />
      ))}
    </div>
  );
}

import type { CodegenConfig } from '@graphql-codegen/cli';
 
const config: CodegenConfig = {
  schema: './schema.graphql',
  generates: {
    'src/generated/resolvers-types.ts': {
      plugins: ['typescript', 'typescript-resolvers'],
      config: {
        contextType: '../context#Context',
        mapperTypeSuffix: 'Model',
        mappers: {
          User: '../models#UserModel',
          Post: '../models#PostModel',
        },
      },
    },
  },
};
 
export default config;

import type { Resolvers } from './generated/resolvers-types';
 
const resolvers: Resolvers = {
  Query: {
    // args.id는 자동으로 string 타입
    // 반환 타입은 Post | null로 강제
    post: async (_parent, args, context) => {
      return context.dataSources.posts.findById(args.id);
    },
  },
  Post: {
    // parent는 PostModel 타입
    // 반환 타입은 User로 강제
    author: async (parent, _args, context) => {
      return context.loaders.userById.load(parent.authorId);
    },
  },
};

import SchemaBuilder from '@pothos/core';
import PrismaPlugin from '@pothos/plugin-prisma';
import type PrismaTypes from '@pothos/plugin-prisma/generated';
 
const builder = new SchemaBuilder<{
  PrismaTypes: PrismaTypes;
  Context: Context;
}>({
  plugins: [PrismaPlugin],
  prisma: { client: prisma },
});
 
// Prisma 모델과 자동 연동
builder.prismaObject('Post', {
  fields: (t) => ({
    id: t.exposeID('id'),
    title: t.exposeString('title'),
    content: t.exposeString('content'),
    // 관계 필드도 자동 타입 추론
    author: t.relation('author'),
    tags: t.relation('tags'),
    // 계산 필드
    readingTime: t.int({
      resolve: (parent) => {
        // parent는 자동으로 Prisma Post 타입
        return Math.ceil(parent.content.split(/\s+/).length / 200);
      },
    }),
  }),
});

const config: CodegenConfig = {
  schema: 'https://api.example.com/graphql',
  documents: 'src/sdk/**/*.graphql',
  generates: {
    'src/generated/sdk.ts': {
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-graphql-request',
      ],
      config: {
        rawRequest: false,
      },
    },
  },
};

import { GraphQLClient } from 'graphql-request';
import { getSdk } from './generated/sdk';
 
const client = new GraphQLClient('https://api.example.com/graphql', {
  headers: { Authorization: `Bearer ${token}` },
});
 
const sdk = getSdk(client);
 
// 완전한 타입 안전성
const { post } = await sdk.GetPost({ id: '123' });
console.log(post?.title); // string | undefined

name: GraphQL Schema Check
on:
  pull_request:
    paths:
      - 'schema.graphql'
      - 'src/**/*.graphql'
      - 'codegen.ts'
 
jobs:
  codegen-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      
      # 코드 생성 실행
      - run: pnpm codegen
      
      # 생성된 파일에 변경이 있으면 실패
      - name: Check for uncommitted changes
        run: |
          if [[ -n $(git diff --name-only) ]]; then
            echo "Generated files are out of date. Run 'pnpm codegen' and commit."
            git diff --name-only
            exit 1
          fi
      
      # TypeScript 컴파일 검증
      - run: pnpm tsc --noEmit