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.2k
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.4k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.4k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
370
RailsエンジニアのためのNext.js入門
hokaccha
7
19k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.1k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.8k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
930
Web Frontend Improvement in Cookpad
hokaccha
1
1k
cookpad summer internship 2018 - Git
hokaccha
1
9.6k
Other Decks in Programming
See All in Programming
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
620
Introduction to kotlinx.rpc
arawn
0
700
Rails アプリ地図考 Flush Cut
makicamel
1
120
Unity Android XR入門
sakutama_11
0
160
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
6
4k
Software Architecture
hschwentner
6
2.1k
チームリードになって変わったこと
isaka1022
0
200
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
300
WebDriver BiDiとは何なのか
yotahada3
1
140
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
120
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
How to Ace a Technical Interview
jacobian
276
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Language of Interfaces
destraynor
156
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Side Projects
sachag
452
42k
Music & Morning Musume
bryan
46
6.3k
Making Projects Easy
brettharned
116
6k
YesSQL, Process and Tooling at Scale
rocio
172
14k
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ͰΫϥΠΞϯτɾαʔόʔͷ࣮ʹܕΛ͚ͭΒΕΔʂ • ಋೖίετͦΕͳΓʹ͔͔Δ͚ͲϝϦοτѹతʹେ͖͍ͧʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ