[TS] graphql에 codegen 적용하기

API 응답 데이터의 타입은 어떻게 설정하나?
=> graphql 같은 경우 graphql-codegen을 이용해 명령어 하나로 만들어서 사용한다!

graphql-codegen 설치

yml 파일 설정

yml 파일은 package.json 같은 설정 파일이다.

package.json은 {}가 중요한 파일 이었지만, yml파일은 아래와 같이 {}가 없기때문에 들여쓰기가 중요한 파일이다.

yml 설정법

schema에는 graphql url 주소(백엔드 주소)를 넣어주시면 됩니다.(app.js의 uri 주소와 동일하게)

이후에 명령어로 codegen을 실행시키시면 스키마의 주소로 들어가 api들의 타입을 쭉 다운받아오는데, 다운받은 타입을 generates의 type.ts로 들어가게 됩니다.

type.ts의 파일위치는 보기 편하게 바꾸셔도 무방합니다.

plugin 에는 typescript만 남기고 지워주세요

백엔드가 켜져있는 상태에서만 다운로드가 가능하다.

utility 타입

interface IProfile {
  name: string;
  age: number;
  school: string;
  hobby?: string;
}

utility 종류

1. Partial 타입 : 모두 ? 생기게 해주는 것

type aaa = Partial<IProfile>;

2. Required 타입 : 모두 ? 지우기

type bbb = Required<IProfile>;

3. Pick 타입 : 원하는 것만 골라서 사용하기

type ccc = Pick<IProfile, "name" | "age">;

4. Omit 타입 : 작성된 것만 빼고 새롭게 만들기

type ddd = Omit<IProfile,"school">

5. Record 타입 : 각 각 적용하기

type eee = "철수" | "영희" | "훈이"  // Union 타입
let child : eee;
child = "철수"

type fff = Record<eee, IProfile>  // Record 타입

type과 interface의 차이

가장 큰 차이 : 선언병합

interface IProfile {
  candy: number; //선언 병합으로 추가됨
}

let profile: Partial<IProfile> = {
  candy : 10,
};

interface는 가능하지만 type은 불가