[GraphQl] GraphQl - Codegen 설치하기

1. GraphQl Code Generator 사이트에 접속해준다.

https://the-guild.dev/graphql/codegen

Home – GraphQL Code Generator

 

2. installation 페이지에 들어간다

https://the-guild.dev/graphql/codegen/docs/getting-started/installation

Installation – GraphQL Code Generator

 

3. 처음 프로젝트를 yarn을 이용해서 만들었기 때문에 yarn으로 설치해 줄 것이다.

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

 

4. 두개를 모두 설치했다면 codegen.yaml이라는 파일을 하나 만든다.

파일 위치

codegen.yaml

schema: http://backendonline.codebootcamp.co.kr/graphql
generates:
  ./src/commons/types/types.ts:
    plugins:
      - typescript
    config:
      typesPrefix: I

yaml 파일은 띄어쓰기, 즉 스페이스 키로 부모와 자식을 구별하기 때문에 에러가 날 경우 띄어쓰기를 다시 해볼 필요가 있다.

 

5. pakage.json 파일로 이동해 scripts에 "generate": "graphql-codegen" 추가해준다.

 "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "generate": "graphql-codegen"
  },

이제 yarn generate 명령어를 사용할 수 있는데, 처음에 yarn add -D @graphql-codegen/cli 를 설치했기 때문에 사용이 가능해진 것이다.

 

6. 터미널에 yarn generate를 입력해 다운로드 한다.

이렇게 뜨면 성공한거

yaml파일에 입력한 위치로 가서 잘 다운로드가 됐는지 확인한다.