GraphQL-CodeGen 설치

e_juhee·2022년 3월 29일
0

Tool

목록 보기
10/15

참고: database 주소가 바뀌면 codegen.yml 파일과 _app.tsx 파일을 수정해줘야 한다.
codegen.yml 파일을 수정하면 재실행(타입스크립트 최신화) 해야 한다. 재실행 명령어: yarn generate

[사용 방법]
[GraphQL-CodeGen 사이트]

codegen을 이용하면 playground에서 타입을 미리 받아와서 타입스크립트 형태의 파일로 만들어준다!
타입을 일일이 지정하지 않아도 된다.

0.


graphql-codegen을 사용할 수 있게 하는 명령어 설치
yarn add @graphql-codegen/cli

1.


graphql의 typescript 설치
yarn add @graphql-codegen/typescript

2.

//프로젝트 설정값
schema: http://backend06.codebootcamp.co.kr/graphql
generates:
  ./src/commons/types/generated/types.ts:
    plugins:
      - typescript
    config:
      typesPrefix: I

codegen.yaml 파일 생성

yaml 파일 = yml 파일 : 설정 파일
들여쓰기를 기준으로 부모/자식/형제 관계를 구분한다.

3.

package.json 파일의 scripts 부분에 "generate": "graphql-codegen", 추가
터미널에 yarn generate 입력

설치 완료


package.json에 codegen이 추가되었다.

./src/commons/types/generated/types.ts codegen.yaml 파일의 generates: 부분에 입력한 경로에 graphQL의 타입들이 저장되어 있다!

[사용 방법]

profile
쥐로그

0개의 댓글