graphQL codegen

rest-api에 타입스크립트를 적용하게 되면 받아오는 데이터의 타입을 어느정도 일일히 손으로 작성해야하는 번거로움이 있다. graphQL은 graphql-codegen을 이용해 간편히 타입을 만들 수 있다. graphQL을 사용할 때 백엔드에 접속해서 해당 타입을 다운받아와준다.

graphql-code-generator 홈페이지

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

package.json과 같은 위치에 codegen.yaml 파일을 생성한다.

yaml
기존의 json 파일이 주석을 지원하지 않고, 유연하지 않은 문법, 타입 명시 불가능 등의 불편함이 있어 고안된 상위호환이다. 띄어쓰기/들여쓰기를 기준으로 읽히는 설정파일이다.
YAML 더 알아보기

schema: graphql url
generates:
	./src/commons/types/generated/types.ts:
		plugins:
			- typescript
		config:
			typesPrefix: I

📍 typesPrefix는 불러오는 타입과 인터페이스 이름 앞에 문자를 추가할 수 있는 기능이다. 인터페이스라는 것을 직관적으로 알려주기 위해 I 를 붙인다.

package.json 파일에 generate 코드를 추가한다.

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

yarn generate

위의 명령을 실행하면 백엔드에 접속해서 graphql-API로 받아오는 모든 데이터의 타입을 빠르게 조사하고, 이와 일치하는 타입스크립트 파일을 위에서 지정한 위치의 types.ts 파일에 자동으로 생성해준다.

query와 mutation을 사용할 때 꺽쇄<>를 이용해 타입을 지정해주면 된다.