GraphQL-CodeGen 사용 방법

[GraphQL-CodeGen 설치 방법]

💡 참고

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

---

[대괄호]나 {중괄호}로 선언한 경우에는, 타입을 적어주는 위치가 다르다.

1. Mutation

const [함수] = useMutation<결과 타입, 변수 타입>(쿼리);

결과 타입

• 받아오는 데이터의 타입을 지정한다.
• <Pick<Imutation, "함수">
• Imutation 타입들 중 내가 사용할 함수에 해당하는 타입만 Pick한다! 뽑아온다는 뜻.

변수 타입

• variables의 타입을 지정한다.
• IMutation함수Args 형태로 이름이 지어져있다.

import 필수!

---

⛔️ Error

data가 없을 수 있기 때문에 뜨는 에러다. 아래처럼 바꾸면 에러 사라짐 👇🏻

---

2. Query

mutation과 동일하다.

---

위에서 사용한 Pick은 utility 타입이라고 부른다.

3. Utility type

유틸리티 타입

• 기존에 있는 타입을 조작해서 쓸 때 사용한다.

조작할 타입을 선언한다.

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

1. Partial type

• 모든 타입이 선택값이 된다.

type IPartialProfile = Partial<IProfile>;

2. Required type

• 모든 타입이 필수가 된다.

type IRequiredProfile = Required<IProfile>;

3. Pick type

• 사용할 타입을 지정한다.

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

4. Omit type

• 지정한 타입을 제외한 타입으로만 이루어진다.

type IOmitProfile = Omit<IProfile, "school">;

5. Record type

// ZZZ에 들어있는게 키가 되고 IProfile이 value가 된다. 각각에 프로필 타입이 생긴다.

• 지정한 것만 값으로 쓸 수 있다.

type IUnion = "철수" | "영희" | "훈이"; // Union 타입
type IRecordProfile = Record<IUnion, IProfile>;

6. keyof

• key들로 이루어진 Union 타입

type IKeyofProfile = keyof IProfile;
const key: IKeyofProfile = "age";

인터페이스와 타입의 차이

• 인터페이스는 선언 병합이 가능하다.
  👉🏻 인터페이스는 같은 이름으로 또 만들 수 있고, 타입은 또 만들 수 없다!

• 같은 이름으로 인터페이스를 또 선언하면 자동으로 합쳐진다.

interface IProfile { 
        name: string
        age: number
        school: string
        hobby?: string
    }
        
//같은 이름의 interface
interface IProfile { 
        candy: number
    }
  
const profile: Partial<IProfile> = {
  name: "주희",
  candy: 1,
};