Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
意外と難しいGraphQLのスカラー型
Search
uhyo
September 22, 2025
Technology
5
790
意外と難しいGraphQLのスカラー型
2025-09-22 『TypeScriptのスキーマ駆動開発』実践事例 LT
uhyo
September 22, 2025
Tweet
Share
More Decks by uhyo
See All by uhyo
RSCの時代にReactとフレームワークの境界を探る
uhyo
13
4.1k
知られざるprops命名の慣習 アクション編
uhyo
12
3.2k
libsyncrpcってなに?
uhyo
0
700
Next.jsと状態管理のプラクティス
uhyo
7
14k
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
660
更新系と状態
uhyo
9
3.8k
React 19アップデートのために必要なこと
uhyo
8
2.8k
color-scheme: light dark; を完全に理解する
uhyo
8
740
React 19 + Jotaiを試して気づいた注意点
uhyo
9
3.6k
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
Railsの話をしよう
yahonda
0
170
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
110
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
230
Oracle Autonomous AI Database:サービス概要のご紹介
oracle4engineer
PRO
2
15k
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
110
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
240
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
160
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
150
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
1
130
Featured
See All Featured
A better future with KSS
kneath
239
18k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Optimizing for Happiness
mojombo
379
70k
For a Future-Friendly Web
brad_frost
180
10k
What's in a price? How to price your products and services
michaelherold
246
12k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Being A Developer After 40
akosma
91
590k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Thoughts on Productivity
jonyablonski
70
4.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Transcript
意外と難しいGraphQLのスカラー型 2025-09-22『TypeScriptのスキーマ駆動開発』実践事例 LT
発表者紹介 uhyo 株式会社カオナビ フロントエンドエキスパート 前職ではGraphQLを使っていた。 2
注意 この話は、GraphQL + TypeScriptの定番ツール GraphQL Codegen よりも安全性にこだわった自作ツール nitrogql が流行らないことの恨み節です。 3
GraphQLとTypeScriptの型の関係 GraphQLには、型の概念が存在する。 String, Int, Boolean 型など。 TypeScriptのコード生成をする場合、GraphQLの型を TypeScriptの型に対応付ける必要がある。 例: String→string
Int→number 4 GraphQLの型 TypeScriptの型
注意が必要なID型 ID型もGraphQLに組み込みの型だが、 特殊な性質を持つ。 •文字列としてシリアライズされる。 •しかし、ID型の入力としては整数も受け付ける。 5
注意が必要なID型 ID → string ? ID → string | number
? 6
注意が必要なID型 const data = useQuery({ query, variables: { inputId: 12345
}, }); data.outputId 7 このIDは string | number になるのが望ましい (シリアライズ前のため) このIDは string になるのが望 ましい (シリアライズ済のため)
GraphQL Codegenでは…… 状況に応じてID型に対応するTypeScriptの型を 出し分ける必要がある。 ところが、GraphQL Codegenは一律で string型を出力。(デフォルトの設定の場合) 本来numberが使えるはずの場面で使わせて くれない! 8
設定を変えればいける こんな設定を書けばGraphQL Codegenでも 出し分けが可能。 scalars: { ID: { input: ‘string
| number’, output: ‘string’ } } 9
GraphQL Codegenでの出し分け const data = useQuery({ query, variables: { inputId:
12345 }, }); data.outputId 10 ここではinput用の型を使用 (string | number) ここではoutput用の型を使用 (string)
めでたし……と思いきや サーバー側(GraphQLのリゾルバー定義) 向けの型もGraphQL Codegenで出力すると…… deleteUser: (_, { id }) =>
{ return userStore.delete(id); } 11
めでたし……と思いきや サーバー側(GraphQLのリゾルバー定義) 向けの型もGraphQL Codegenで出力すると…… deleteUser: (_, { id }) =>
{ return userStore.delete(id); } 12 入力なのでinput用の型が使用 されるが、正しい型はstring (string | numberではない!) ※逆に、resolverの実装から出力されるIDは string | number型が正しい
GraphQL Codegen向けの正しい設定 こうする必要がある。 どうしてこうなった…… scalars: { //クライアント用 ID: { input:
‘string | number’, output: ‘string’ } } 13 scalars: { //サーバー用 ID: { input: ‘string’, output: ‘string | number’ } }
一方nitrogqlでは input/outputではなくsend/receiveという分けを 導入することで、両者で共通の定義にできる。 scalarTypes: { //クライアント・サーバー共通 ID: { send: ‘string
| number’, receive: ‘string’ } } 14
まとめ GraphQL CodegenはGraphQL + TypeScript向け のデファクトスタンダードなツールだが、 型安全に使うために適切に設定する難易度が とても高い。気を付けよう。 15