graphql-codegen 설치하기

  설치

yarn add @graphql-codegen/cli

설치 폴더에 codegen.yml 을 생성한다.

 

codegen.yml은 package.json 같은 설정 파일!

yml은 {}가 없기 때문에 들여쓰기가 중요한 파일이다.

 

// codegen.yml

schema: http://@graphql주소@/graphql
generates:
  ./src/commons/types/generated/types.ts:
    plugins:
      - typescript
    config:
      typesPrefix: I

탭으로 인식되어있으면 안된대서 탭 수 만큼 띄어쓰기를 대신 넣어주었다. (탭 지우고 지운만큼 띄어쓰기!)

 

yarn add -D @graphql-codegen/typescript

 

// pacakage.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "generate": "graphql-codegen" // 이거 추가

yarn generate

yarn generate 하면 Backend 컴퓨터에 접속해서 Graphql-API로 받아오는 모든 데이터 타입을 조사하고 이와 일치하는 타입스크립트 파일을 ./src/commons/types/generated/types.ts  위치에 자동으로 만들어준다.