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
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
Search
Kazuhito Hokamura
May 11, 2024
Programming
5
4.6k
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
Kazuhito Hokamura
May 11, 2024
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.5k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.5k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
420
RailsエンジニアのためのNext.js入門
hokaccha
7
20k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.2k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.9k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
990
Web Frontend Improvement in Cookpad
hokaccha
1
1.1k
cookpad summer internship 2018 - Git
hokaccha
1
9.7k
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Gamification - CAS2011
davidbonilla
81
5.4k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing for humans not robots
tammielis
253
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Transcript
2024/5/11 TSKaigi @hokaccha TypeScriptͱGraphQLͰ࣮ݱ͢Δ ܕ҆શͳAPI࣮
Ubie, Inc @hokaccha @hokaccha Kazuhito Hokamura
ࠓͷ༰ͪ͜ΒͰಡΊ·͢ Ubie ςοΫϒϩά
ͳͥAPIʹܕΛ͚͍ͭͨͷ͔
Α͋͘Δ API ϦΫΤετͷίʔυ
any ͔ΒͷܕΩϟετͱɺفΓ 🙇҆શفئ🙏
فΓ͕௨͡ͳ͍ͱͷإΑΓݟͨͭ
֎෦I/Oʹର͢Δܕ͚͕ෆेͩͱ ੩తܕ͚ͷԸܙΛे׆͔ͤͳ͍
API ʹܕΛ͚ͭΔ #ͱ 1. API ͷ༷ΛεΩʔϚͰఆٛ͢Δ 2. εΩʔϚ͔Β࣮ݴޠͷܕΛੜ͢Δ 3. ੜ͞ΕͨܕΛ࣮ͬͯ͢Δ
• ΫϥΠΞϯτͷ࣮ • αʔόʔͷ࣮
API ʹܕΛ͚ͭΔٕज़ • OpenAPI • gRPC • GraphQL ࠓ͜Ε
GraphQLͷεΩʔϚఆٛ schema.graphq
εΩʔϚ͔ΒܕΛੜ schema.graphq generated.ts
ੜͨ͠ܕΛ࣮ͬͯ͢Δ client.ts server.ts ˞ίʔυΠϝʔδ
GraphQL Codegen
ΫϥΠΞϯταΠυ
GraphQL Codegen Client Preset
codegen.ts
🙅 εΩʔϚ͔Βੜͨ͠ܕΛ͏ 🙆 ΫΤϦ͔Βੜͨ͠ܕΛ͏
εΩʔϚ͔Βੜͨ͠ܕΛ͏ εΩʔϚ ੜ͞Εͨܕ ΫϥΠΞϯτ࣮
εΩʔϚ͔Βੜͨ͠ܕΛ͏ εΩʔϚ ੜ͞Εͨܕ ΫϥΠΞϯτ࣮ JNBHF6SM͕ܕʹ͋Δ͚ͲϨεϙϯεʹͳ͍
εΩʔϚ͔Βੜͨ͠ܕΛ͏ εΩʔϚ ੜ͞Εͨܕ ΫϥΠΞϯτ࣮ JNBHF6SM͕ܕʹ͋Δ͚ͲϨεϙϯεʹͳ͍
ΫΤϦ͔Βੜͨ͠ܕΛ͏
ΫΤϦจࣈྻ͔Β (SBQI2-$PEFHFO͕ܕΛੜ͢Δ
͜ͷΛ(SBQI2-ͷΫϥΠΞϯτʹ͢ͱ ΫΤϦͷ݁Ռʹਖ਼͘͠ܕ͕ͭ͘
ೖྗΫΤϦ͔Β࡞ΒΕͨ ܕͰܕݕ͕ࠪޮ͘
TypedDocumentNode • GraphQL Codegen͕ੜ͢ΔΫΤϦͷܕ͖AST • ରԠ͢ΔΫϥΠΞϯτʹ৯ΘͤΔͱܕ͕͘ • ϝδϟʔͲ͜ΖͷΫϥΠΞϯτରԠ͍ͯ͠Δ • Apollo
Client • urql • graphql-request ͜Ε
Fragment Masking
ͷલʹFragment Colocation
None
ը૾Λදࣔ͠ͳ͍Α͏ʹมߋ
ফ͠Εͯ ؾ͚ͳ͍
ଞͷΫΤϦͰࢀর͞ΕͯΔ͔
ͯ͢ͷࢠ͕ඞཁͱ͢ΔσʔλΛτοϓϨϕϧͷ ΫΤϦ͕͍ͬͯΔඞཁ͕͋Δͱ͍͏ઃܭͷ
None
None
͜ͷ'SBHNFOUఆ͔ٛΒܕΛੜ
ੜ͞Εͨܕ
Fragment Colocation • FragmentΛίϯϙʔωϯτͱಉ͡ॴʹஔ͘ • ίϯϙʔωϯτ͕ࣗؔ৺ͷ͋ΔϑΟʔϧυ͚ͩཧ͢ΕΑ͍ • ͷࢠͷFragment͚ͩΛ͍ͬͯΕΑ͍
Fragment Masking
None
͜͜Ͱ͔͠OBNFΛࢦఆͯ͠ͳ͍
͜͜ͰࢀরͰ͖ͯ͠·͏
࣮͜ΕܕΤϥʔʹͳΔ
͜Μͳײ͡ʹܕΛมߋ
͜ͷؔΛ௨͞ͳ͍ͱ'SBHNFOUͷ σʔλΛࢀরͰ͖ͳ͍
Fragment Masking • FragmentΛఆٛͨ͠ίϯϙʔωϯτҎ֎͔ΒFragmentͷσʔλʹ ΞΫηεͰ͖ͳ͍Α͏ʹ͢Δ • ͜ΕʹΑͬͯFragment Colocation͕ڧ੍ͤ͞Δ • ܕ͕ෳࡶʹͳΔͱ͍͏σϝϦοτ͋Δ
αʔόʔαΠυ
GraphQL Codegen TypeScript Resolvers
GraphQL Codegen TypeScript Resolvers 4FSWFS1SFTFUบ͕ڧΊ
ϝδϟʔͳϥΠϒϥϦʹରԠ • graphql-js • ͜Ε͕શͯͷϕʔε • Apollo Server • GraphQL
Yoga
NestJS͚ͩগ͠ಛघ Ubie ςοΫϒϩά
schema.graphql
resolvers.ts model.ts
resolvers.ts model.ts %#͔ΒҾ͍ͯNPEFMͷܕΛฦ͢
codegen.ts
None
ܕ͕͍ͭͯΑ͔ͬͨʂʂ ͱ͍͔ͳ͍
None
DPNQBOZΛؚ·ͳ͍
DPNQBOZͷऔಘ͕ແବ
None
DPNQBOZ͕ΫΤϦʹؚ·ΕΔͱ͖͚࣮ͩߦ͞ΕΔ
None
None
codegen.ts 3FTPMWFSͰѻ͏ܕΛมߋͰ͖Δ
None
·ͱΊ
·ͱΊ • APIͷ࣮ʹܕΛ͚ͭͯفΓ͔Β։์͞ΕΑ͏ʂ • GraphQL CodegenͰΫϥΠΞϯτɾαʔόʔͷ࣮ʹܕΛ͚ͭΒΕΔʂ • ಋೖίετͦΕͳΓʹ͔͔Δ͚ͲϝϦοτѹతʹେ͖͍ͧʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ