graphql codegen

RestAPI 와 GraphQL API 어떤걸 쓰는냐에 따라 좀 달라짐
RestAPI면 그냥 어쩔 수 없이 해당 타입에 맞춰서 인터페이스로 맞춰야함
GraphQL API를 사용하면 GraphQL Codegen을 사용하면 백엔드에 접속해서 해당 데이터의 타입스크립트를 받아올 수 있음.
따로 만들지않고 받아와서 적용할 수 있음

그래프큐엘 코드젠 설치

그래프큐엘 코드젠 홈페이지

메인의 Get Started with Client and Server 클릭

좌측의 Installation을 누르면 설치 방법이 나옴

yarn add graphql
yarn add --dev typescript @graphql-codegen/cli

graphql 자체는 설치가 되어있으니 아랫줄만 실행해보자.

실행하면 설치되기 시작하고

Done 이 뜨면 완료

package.json 에 추가된걸 볼 수 있음

실행해보기

이어서 실행을 하기 위한 명령어로

package.json에 직접 명령어를 하나 추가해 주자
좌측은 직접 지정해주면 되지만 우측은 아래 설치된 이름을 잘 지키도록

동작시켜보면

에러가 발생한다
설정파일이 없기에 발생하는 에러

최상위 경로에 파일을 만들자
json 파일은 key,value 기준으로 작성하고
yaml 파일은 띄어쓰기를 기준으로 작성한다.

schema : http://localhost:8080/graphql
generates : 
  ./src/commons/types/generated/types.ts:
    plugins:
      - typescript

schema : 백엔드 주소
generates : 어디다 저장할지
plugins : 저장 형식

하고 다시한번

yarn generate

동작이 Done 되고

지정한경로에 파일이 생겼다.

백엔드에서 지정한 내용들이 들어있다.

수정하기

값을 받아올 때 type 이름을 규칙적으로 수정할 수 있다.

schema : http://localhost:8080/graphql
generates : 
  ./src/commons/types/generated/types2.ts:
    plugins:
      - typescript
    config:
      typesPrefix: I

typesPrefix 를 사용하면 type 명들 앞에 글자를 추가할 수 있다.

적용하는 방법

const [CreateBoard] = useMutation(CREATE_BOARD)

기존의 작성했던 Board 만들기 Mutation의 경우는 useMutation 바로 뒤에 지정이 가능

 const [CreateBoard] = useMutation<Pick<IMutation,"createBoard">,IMutationCreateBoardArgs>(CREATE_BOARD)

이런식으로 입력하며 각각

해당 내용에서 가져온다
이 내용을 적용시키면

작성시 누락된 값에대해 알려주거나

결과 내용을 제대로 알수 없던 부분을

이런식으로 어떤 데이터를 받아오는지 알 수 있다.

쿼리 또한 마찬가지로 진행되며

const { data } = useQuery<Pick<IQuery,"getBoard">, IQueryGetBoardArgs>(FETCH_BOARD,{
  variables: { boardId: String(router.query.number) }
})

타입이 맞지 않거나,

누락된 항목을 바로바로 알 수 있다.