GraphQL Code Generator

이전 GraphQL 포스팅에서 언급되었던 Code Generator에 대해 소개하려고 합니다. Code Generator은 BE에서 설계된 데이터 모델링을 GraphQL 스키마를 기반으로 TypeScript로 가져오기 위해 사용합니다.

 

Code Generator의 이점

1. 설계된 데이터 모델링을 찾아보는데 편합니다.

• 어떤 필드를 가지는지, 그리고 그 타입이 무엇인지 등 확인할 수 있습니다.
• graphiql을 사용하는 것보다 generator로 스키마를 직접 확인하는 게 편합니다.
  
  

2. 차후에 GQL을 통해 가져온 데이터들을 타입 체킹 하는 데 사용합니다. 

 

Code Generator 셋업

1. Installing Codegen

npm install graphql @graphql-codegen/cli @graphql-codegen/typescript

or

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

 

2. codegen 작성

wizard을 이용하여 간편하게 생성 가능합니다.(옵션들만 선택해서 생성)

npx graphql-codegen init

or

yarn graphql-codegen init

만약 wizard을 사용하지 않을 경우는 추가로 필요한 라이브러리를 설치하고 codegen.yml or codegen.ts를 생성하여 작성합니다.

 

codegen.yml example

schema: ${SCHEMA_PATH} 
overwrite: true
generates:
  ./src/models/types.ts:
    plugins:
      - typescript
    config:
      declarationKind: 'interface'
      skipTypename: true
      maybeValue: T | null | undefined

 

3. Generate

package.json의 scripts에 generate 추가합니다.(recommended)

{
  "scripts": {
    "codegen": "graphql-codegen"
  }
}

GraphQL Code Generator 구버전에서는 gql-gen 현재는 graphql-codegen으로 migration.

 

그 후 Command 실행합니다.

npm run codegen

or

yarn codegen

 

codegen에 작성된 내용으로 generate 결과를 TypeScript의 타입으로 생성됩니다.

 

types.ts example

// types.ts
export type Maybe<T> = T | null | undefined;
export type InputMaybe<T> = T | null | undefined;
/** All built-in and custom scalars, mapped to their actual values */
export interface Scalars {
  ID: { input: string; output: string; }
  String: { input: string; output: string; }
  Boolean: { input: boolean; output: boolean; }
  Int: { input: number; output: number; }
  Float: { input: number; output: number; }
}

export interface Mutation {
  updateTodo?: Maybe<Todo>;
}

export interface MutationUpdateTodoArgs {
  input: UpdateTodoInput;
}

export interface Query {
  /** Get all todos */
  todos?: Maybe<Array<Maybe<Todo>>>;
  /** Get a user by id */
  user?: Maybe<User>;
  /** Get all users */
  users?: Maybe<Array<Maybe<User>>>;
}

export interface QueryUserArgs {
  id?: InputMaybe<Scalars['String']['input']>;
}

export interface Todo {
  description?: Maybe<Scalars['String']['output']>;
  done?: Maybe<Scalars['Boolean']['output']>;
  id?: Maybe<Scalars['String']['output']>;
}

export interface UpdateTodoInput {
  description?: InputMaybe<Scalars['String']['input']>;
  done?: InputMaybe<Scalars['Boolean']['input']>;
  id?: InputMaybe<Scalars['String']['input']>;
}

export interface User {
  email?: Maybe<Scalars['String']['output']>;
  id?: Maybe<Scalars['String']['output']>;
  name?: Maybe<Scalars['String']['output']>;
  todos?: Maybe<Array<Maybe<Todo>>>;
}

 

 

마무리

Code Generator를 통해 GQL의 스키마 변경에 대해 간편하게 대응할 수 있으며 유지 보수 측면에서 효율적입니다. Code Generator을 잘 활용한다면 GQL 환경에서 더 편하게 개발할 수 있습니다.

 

 

---

참고 자료

https://www.graphql-code-generator.com/docs/config-reference/codegen-config

https://www.graphql-code-generator.com/plugins/typescript/typescript