graphql-codegen으로 GraphQL schema 타입(.ts)파일 만들기

TypeScript React Front-end

타입스크립트를 적용하며 GraphQL로 받아오는 mutation, query 관련 스키마를 일일이 타입으로 바꾸고, 적용하고, 한개의 파일에 따로 모으는 일련의 과정을 단축시키고자 GraphQL Code Generator 를 사용하여 TypeScript파일에 바로 호환가능한 interface type을 받아올 수 있다.

graphql-codegen 설치

GraphQL Code Generator Installation 페이지를 참고하였다.

> yarn add -D @graphql-codegen/cli
> yarn add -D @graphql-codegen/typescript

중첩 이슈 발생을 막기 위해 graphql, @graphql-codegen/cli등을 global하게 설치하지 않고 프로젝트 폴더 안에 설치하는 것이 중요하다

프로젝트 폴더 내 codegen.yaml 파일 생성

schema: http:/MY_GRAPHQL_LINK # 백엔드 graphql 주소
generates:
  ./src/commons/types/generated/types.ts: # 타입 파일 생성 주소
    plugins:
      - typescript
    config:
      typesPrefix: I # interface 'I'XXXXX 에 붙는 prefix

package.json에 type generation 명령문 생성

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

type file 생성

> yarn generate

명령을 실행하면 graphql-codegen이 GraphQL API로 받아오는 모든 데이터의 타입을 조사해, 이와 일치하는 타입스크립트 파일을 codegen.yaml파일에 지정한 주소에 생성한다.