Codegen이란?

TypeScript를 이용하여 프론트엔드를 개발하려면, 백엔드에서 불러온 데이터의 타입을 개발자가 일일이 지정해줘야 하는 수고가 있었어요.

Autogen 디펜던시를 이용하면 그 일을 자동화할 수 있어요.

GraphQL의 경우 GraphQL Code Generator가 있어요.

• 참고. 튜토리얼

사용법

gql 쿼리를 생성/수정/삭제한 경우에 반드시 다음의 명령어를 이용하여 타입을 연동시켜주세요!

$ pnpm compile

설정은 codegen.ts에서 확인할 수 있어요.

const config: CodegenConfig = {
  schema: process.env.VITE_BACKEND_GRAPHQL_ENDPOINT,
  documents: ['src/**/*'],
  generates: {
    './src/@shared/__generated__/': {
    ...

pnpm compile 명령어를 실행하면,

1. BACKEND_GRAPHQL_ENDPOINT에 연결하여
2. src/**/*에 있는 gql 쿼리를 모두 읽은 뒤
3. ./src/@shared/__generated__/ 위치에 타입을 작성해요.