[ 29 ] graphql codegen을 이용해서 Type 다운로드 받고 사용하기

설치 명령어

yarn add -D @graphql-codegen/cli

yarn add -D @graphql-codegen/typescript

yarn add ts-node

package.json 파일에 다운로드 명령어 추가 

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "generate": "graphql-codegen"
  },
  
  
  // yarn generate 명령어로 다운로드를 받을 수 있다.

codegen.yaml 파일 만들고 설정해주기 

yaml 파일은 띄어쓰기로 코드를 구분하기 때문에 유의하자

typesPrefix 는 타입의 맨 앞에 I 를 추가한 설정이다

schema: http://backend-example.codebootcamp.co.kr/graphql
generates:
  ./src/commons/types/generated/types.ts:
    plugins:
      - typescript
    config:
      typesPrefix: I

 

결과물  예시

export type IMutation = {
  __typename?: 'Mutation';
  createBoard?: Maybe<IReturn>;
  createProduct?: Maybe<IReturn>;
  createProfile?: Maybe<IReturn>;
  deleteBoard?: Maybe<IReturn>;
  deleteProduct?: Maybe<IReturn>;
  deleteProfile?: Maybe<IReturn>;
  updateBoard?: Maybe<IReturn>;
  updateProduct?: Maybe<IReturn>;
  updateProfile?: Maybe<IReturn>;
};

export type IMutationCreateBoardArgs = {
  contents?: InputMaybe<Scalars['String']['input']>;
  title?: InputMaybe<Scalars['String']['input']>;
  writer?: InputMaybe<Scalars['String']['input']>;
};

 

실제 코드에 적용해보기 실습 

useMutation< 결과타입 ,변수타입 >() 

 import {
  IMutation,
  IMutationCreateBoardArgs,
} from "../../../src/commons/types/generated/types";
 
 const [나의함수] = useMutation<
    Pick<IMutation, "createBoard">,
    IMutationCreateBoardArgs
  >(나의그래프큐엘세팅);

 

useQuery < 결과타입 ,변수타입 > ()

import {
  IQuery,
  IQueryFetchBoardArgs,
} from "../../../src/commons/types/generated/types";


  const { data } = useQuery<Pick<IQuery, "fetchBoard">, IQueryFetchBoardArgs>(
    FETCH_BOARD,
    {
      variables: {
        number: Number(router.query.qqq),
      },
    }
  );