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
380
RailsエンジニアのためのNext.js入門
hokaccha
7
20k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.1k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.8k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
940
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
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
340
TCAを用いたAmebaのリアーキテクチャ
dazy
0
210
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
630
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
280
コードを読んで理解するko build
bells17
1
110
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
Datadog Workflow Automation で圧倒的価値提供
showwin
1
280
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
JAWS Days 2025のインフラ
komakichi
1
110
技術を改善し続ける
gumioji
0
150
はじめての Go * WASM *OCR
sgash708
1
110
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
A better future with KSS
kneath
238
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing for humans not robots
tammielis
250
25k
Documentation Writing (for coders)
carmenintech
68
4.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Building Your Own Lightsaber
phodgson
104
6.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Thoughts on Productivity
jonyablonski
69
4.5k
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ͰΫϥΠΞϯτɾαʔόʔͷ࣮ʹܕΛ͚ͭΒΕΔʂ • ಋೖίετͦΕͳΓʹ͔͔Δ͚ͲϝϦοτѹతʹେ͖͍ͧʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ