GraphQL을 Flow 타입으로 변환 — Numio

@graphql-codegen/flow와 flow-operations를 사용해 GraphQL 스키마와 operation에서 Flow 타입 정의를 생성합니다. 객체 타입은 exact Flow 객체({| |})가 되고, nullable 필드는 선택적 maybe 타입(?T)이 됩니다.

TypeScript 대신 여전히 Flow로 타입 검사를 하는 코드베이스에 타입이 지정된 GraphQL 결과를 추가합니다.

GraphQL Schema

Document

Flow

이럴 때 사용하세요

TypeScript 대신 여전히 Flow로 타입 검사를 하는 코드베이스에 타입이 지정된 GraphQL 결과를 추가합니다.
쿼리 하나의 변수 타입과 결과 타입을 생성해 컴포넌트 옆에 붙여 넣습니다.

사용 방법

GraphQL Schema 편집기에 스키마 SDL을 붙여 넣습니다.
사용하는 operation을 Document 편집기에 입력합니다. 스키마 타입만 필요하면 비워 둡니다.
// @flow로 시작하는 출력을 복사해 Flow가 적용되는 .js 파일에 넣습니다.

GraphQL 스키마 + document

# GraphQL Schema editor
type Query {
  user(id: ID!): User
}

type User {
  id: ID!
  name: String
  tags: [String!]!
}

# Document editor
query GetUser($id: ID!) {
  user(id: $id) { id name }
}

Flow 타입

// @flow
…
export type User = {|
  __typename?: "User",
  id: $ElementType<Scalars, "ID">,
  name?: ?$ElementType<Scalars, "String">,
  tags: Array<$ElementType<Scalars, "String">>,
|}

export type GetUserQueryVariables = {
  id: $ElementType<Scalars, "ID">,
}

export type GetUserQuery = {
  ...{ __typename?: "Query" },
  ...{|
    user?: ?{
      ...{ __typename?: "User" },
      ...$Pick<User, {| id: *, name?: * |}>,
    },
  |},
}

세부 정보 및 제한 사항

필드는 $ElementType<Scalars, "ID">로 스칼라를 참조합니다. 맨 위의 Scalars 타입(위 예시에서는 생략)은 ID와 String을 string으로, Int와 Float를 number로 매핑합니다.

operation 결과 타입은 객체 spread와 로컬 $Pick 헬퍼로 구성되므로 선택한 필드만 나타납니다.

생성은 브라우저 Web Worker에서 실행되고 결과는 Prettier로 포맷됩니다. 페이지에 플러그인 옵션은 없습니다.

FAQ

생성된 객체 타입은 exact 타입인가요?

네. 스키마 객체 타입은 exact 객체 문법 {| ... |}을 사용하므로 추가 프로퍼티는 Flow에서 거부됩니다.

nullable 필드는 어떻게 표현되나요?

nullable 필드는 maybe 타입의 선택적 프로퍼티가 됩니다. 예: name?: ?$ElementType<Scalars, "String">. non-null 필드는 필수이며 maybe 타입이 아닙니다.

출력에 "Document ignored" 주석이 있는 이유는 무엇인가요?

Document 편집기의 operation은 스키마에 대해 검증됩니다. 맞지 않으면(기본 예시는 username을 조회합니다) 스키마 타입만 생성되고 첫 번째 오류가 // @flow 아래에 주석으로 나타납니다. document를 수정하거나 비우세요.

사양 및 참고 자료

GraphQL Code Generator: flow plugin