Fall in IT.

GraphQL Code Generator 사용하기 본문

카테고리 없음

GraphQL Code Generator 사용하기

D.Y 2021. 12. 11. 00:42

목적

GraphQL Code Generator를 도입하여 클라이언트의 생산성을 높이고 유지보수를 쉽게 할 수 있도록 한다.

문제

필자의 회사에서는 다양한 클라이언트 서비스를 운영하고 있고, 각각의 클라이언트 서비스에 제공되는 데이터는 GraphQL API를 통해 마이크로서비스 형태로 제공하고 있다.

 

클라이언트 서비스는 모두 TypeScript를 사용해서 GraphQL 스키마에 대응되는 Type 또는 Interface를 선언하여 사용하고 있었다.

 

이때, GraphQL 스키마의 변경 또는 추가가 발생할 경우 클라이언트의 모든 서비스들은 Type 또는 Interface를 재정의하거나 새롭게 정의해야하는 문제가 있었다.

요구사항

  1. 정의된 GraphQL 스키마를 generate해서 모든 프로젝트에서 공통으로 사용할 수 있도록 한다.
  2. 스키마 변경이 있을경우 간단한 명령어를 통해 re generate하고 사용할 수 있도록 한다.

대안

GraphQL Code Generator는 어플리케이션 단에서 사용하는 언어에따라 GraphQL schema / operations를 자동으로 생성해주는 툴이다. 이 기술을 사용해서 문제를 해결하고자 한다.

Integration example with TypeScript

실습

(자세한 실습 코드는 아래 링크 참조)

# 1. 작업 디렉터리 생성
$ mkdir graphql-code-gen-sample
$ cd graphql-code-gen-sample

# 2. 의존성 패키지 설치
$ yarn add grapqhl
$ yarn add -D @graphql-codegen-cli

# 3. 초기화 마법사 시작 (해당하는 설정 선택)
$ yarn graphql-codegen init

# 4. 설정이 완료되면 선택한 항목의 패키지를 설치한다.
$ yarn install

# 5. 설정할때 입력한 스크립트 실행명령어를 사용하여 generator 
$ yarn gen # gen의 경우 사용자의 선택에 따라 달라진다

codegen.yml 설정

genterate 파일 생성

package.json (workflow 설정)

결과

필자의 경우 CRA 프로젝트를 사용하기 때문에 스크립트 실행전에 schema generate를 자동으로 하도록 설정하도록 구성하였다. 클라이언트 어플리케이션 단에 따라서 별도의 타입을 정의하지 않아도 되기 때문에 생산성이 높아졌다. 원하는 query 또는 mutation, subscription만 정의한 후 사용하면 된다!

참조

공유하기 링크
Comments