GraphQL の schema から生成した型を利用してモックデータを作っていました。
今回 GraphQL の schema に特定の文字列が返されるフィールドを作成したく列挙型 (Enum) で Schema を定義していました。
schema.graphql
emun IdolType { cute cool sexy pop } type Idol { id: ID! name: String! type: IdolType! } type Query { idols: [Idol] }
👇 生成された TypeScript の型
graphql.ts
export enum IdolType { Cute = 'cute', Cool = 'cool', Sexy = 'sexy', Pop = 'pop' } export type Idol = { __typename?: 'Idol'; id: Scalars['ID']; name: Scalars['String']; type: IdolType; };
このとき Idol
型のデータを作成しようとした時に type
の値の定義方法で TypeError になってハマりました
enum 型 の値は enum の定義そのものを使う必要がある
🙅 エラーになったパターン
enum 型に含まれている値を直接指定するとエラーになりました
import { Idol } from './graphql'; const Hosimiya: Idol = { id: '1', name: '星宮いちご', type: 'cute', }
=> Types of property 'type' are incompatible. Type '"cute"' is not assignable to type 'IdolType'
🙆 enum 型の型定義を使って指定する
- import { Idol } from './graphql'; + import { Idol, IdolType } from './graphql'; const Hosimiya: Idol = { id: '1', name: '星宮いちご', - type: 'cute', + type: IdolType.Cute, }
enum 型は使わないほうが良い。みたいな記事を結構見たことがあったのと Union 型とかで何とかなってたから今まで触れてきませんでした。今回 GraphQL からの型生成で enum 型に初めましてした結果 Union 型みたいに直接値を指定するとエラーになって何でや!ってなったのでした…
雰囲気エンジニアリングしかできないから力不足を感じと同時に TIL (Today I Learned) を感じる日々です。がんばるぞぃ ₍ ᐢ. ̫ .ᐢ ₎
[参考]
- Enum - TypeScript Deep Dive 日本語版
- さようなら、TypeScript enum | Kabuku Developers Blog
- TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します
- GraphQLのスキーマと型定義 - Qiita