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
4
270
意外と難しいGraphQLのスカラー型
2025-09-22 『TypeScriptのスキーマ駆動開発』実践事例 LT
uhyo
September 22, 2025
Tweet
Share
More Decks by uhyo
See All by uhyo
RSCの時代にReactとフレームワークの境界を探る
uhyo
11
3.7k
知られざるprops命名の慣習 アクション編
uhyo
12
3.1k
libsyncrpcってなに?
uhyo
0
680
Next.jsと状態管理のプラクティス
uhyo
7
13k
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
650
更新系と状態
uhyo
9
3.8k
React 19アップデートのために必要なこと
uhyo
8
2.7k
color-scheme: light dark; を完全に理解する
uhyo
8
730
React 19 + Jotaiを試して気づいた注意点
uhyo
9
3.6k
Other Decks in Technology
See All in Technology
BirdCLEF+2025 Noir 5位解法紹介
myso
0
150
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
5年間のFintech × Rails実践に学ぶ - 基本に忠実な運用で築く高信頼性システム / 5 Years Fintech Rails Retrospective
ohbarye
9
3.4k
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
31
9.4k
バイブコーディングと継続的デプロイメント
nwiizo
2
350
AIコーディングとエンジニアリングの現在地 / A Snapshot of AI Coding and Engineering(Sept. 2025)
ar_tama
0
160
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
210
今改めてServiceクラスについて考える 〜あるRails開発者の10年〜
joker1007
20
8.9k
pprof vs runtime/trace (FlightRecorder)
task4233
0
140
AWSのProductのLifecycleについて
stknohg
PRO
0
290
stupid jj tricks
indirect
0
7.5k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Thoughts on Productivity
jonyablonski
70
4.8k
Gamification - CAS2011
davidbonilla
81
5.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
950
Music & Morning Musume
bryan
46
6.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
600
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Optimizing for Happiness
mojombo
379
70k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
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