[Typescript] Codegen 설치 및 사용 방법 / GraphQL-codegen

GraphQL-Codegen이란?

---

타입스크립트에서는 변수, 상수, 함수 등에 타입을 지정해줘야한다. 하지만 내가 만들지 않은 데이터에는 어떻게 타입을 적용할 수 있을까? 그 가장 큰 예시가 Backend에서 받아오는 API이다.

 

GraphQl-Codegen은 지정해둔 스키마의 데이터를 긁어와서 타입 문서를 자동으로 생성해준다.

 

GraphQL-Codegen 설치

---

가장 좋은 방법은 공식 문서를 참고하는 것이다. 하지만 매번 찾아보기 귀찮으니 방법을 간략하게 메모해둔다.

공식 문서 : https://www.graphql-code-generator.com/

 

1. 필요한 위치에서 하단의 명령어를 입력한다. 둘 중 하나만 하면 된다.

yarn add -D @graphql-codegen/cli
npm install --save-dev @graphql-codegen/cli

 

2. 하단의 명령어를 입력해서 @graphql-codegen/typescript를 설치한다. (마찬가지로 택일)

yarn add -D @graphql-codegen/typescript 
npm install --save-dev @graphql-codegen/typescript

 

3. 설치 완료! GraphQL-Codegen을 간단한 명령어로 실행하기 위해 package.json에 등록해준다.

// 등록 예시
{
	"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "generate": "graphql-codegen"
  }
}

 

4. Codegen의 기본 설정파일 codegen.yml 을 만들어준다.

* 야믈 yml 은 설정 파일의 확장자명이다. yml 파일은 indent를 엄격하게 지켜주어야 한다.

// 기본 양식 (docs에서 볼 수 있다)
schema: schema.graphql # you can also point to a GraphQL endpoint!
generates: 
  types.ts: 
    plugins: 
      - @graphql-codegen/typescript

// 나의 경우..
schema: // 이 부분에는 API 경로를 입력해주면 된다.  
generates: 
  ./src/commons/types/generated/types.ts: 
    plugins: 
      - typescript
    config: 
      typesPrefix: I

 

상단과 같이 typesPrefix를 정해주면 모든 타입의 이름 앞에 I가 붙어서 generate 된다.

 

5. 설정을 완료한 뒤 하단의 명령어를 입력하면 타입 파일이 생성되거나 수정된다.

yarn generate