GraphQL-CodeGen 사용 방법

e_juhee·2022년 3월 29일
0

React

목록 보기
17/42

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

[설치 방법]

Mutation

기존 방식

<받아오는 값, 입력값> 입력

import 필수!



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


Query

기존 방식

타입 추가


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

Utility type

유틸리티 타입

  • 기존에 있는 타입을 개조해서 쓰기 위해 사용한다.
  • Pick, Omit, Partial 등등

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

    // 1. Pick 타입
    type MyType1 = Pick<IProfile, "name" | "age">

    // 2. Omit 타입 : 지정한 타입을 제외
    type MyType2 = Omit<IProfile, "school"> 

    // 3. Partial 타입: 전체 다 있을 수도 있고 없을 수도 있다
    type MyType3 = Partial<IProfile>

    // 4. Required 타입: 전부 필수
    type MyType4 = Required<IProfile>

    // 5. Record 타입 : 여기에 정해놓은 것만 값으로 쓸 수 있다.
    type ZZZ = "aaa" | "qqq" | "rrr" // Union 타입(합집합)
    // type ZZZ = "aaa" & "qqq" & "rrr" // Intersection 타입(교집합)
    let apple: ZZZ
    apple = "aaa"
    
    type MyType5 = Record<ZZZ, IProfile> 
      // ZZZ에 들어있는게 키가 되고 IProfile이 value가 된다. 각각에 프로필 타입이 생긴다.

선언병합: 인터페이스와 타입의 차이

  • 인터페이스는 같은 이름으로 또 만들 수 있다. 타입은 또 만들 수 없다!
  • 같은 이름의 인터페이스들은 자동으로 합쳐진다.
interface IProfile { 
        name: string
        age: number
        school: string
        hobby?: string
    }
        
interface IProfile { //같은 이름의 interface
        candy: number  //candy가 추가된다.  
    }
  
let profile: IProfile
    profile={
        candy:3,
        age:10,
        hobby:"dsf"
    }
profile
쥐로그

0개의 댓글