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
3.1k
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
2.8k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.2k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
310
RailsエンジニアのためのNext.js入門
hokaccha
7
17k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
6.9k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.6k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
840
Web Frontend Improvement in Cookpad
hokaccha
1
920
cookpad summer internship 2018 - Git
hokaccha
1
9.5k
Other Decks in Programming
See All in Programming
RubyKaigi Effect 2023, and ...
tagomoris
1
150
JRuby 10: Ruby 3.3 on the Modern JVM
headius
0
230
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
470
【2024年度 サイバーエージェント 新卒研修】システム運用の基本と戦略
shuntakahashi
49
23k
#kaigieffect LT 2024 - rexml-css_selector: A REXML extension for supporting CSS selector
makenowjust
1
210
Androidで不安定なPlatform Viewsとの闘い
temoki
0
140
Module Harmony について
yosuke_furukawa
PRO
3
1.1k
見えないものに着目すると上手くいく、モデリングの勘所 / invisible-driven-design
minodriven
18
3.8k
来週から実践できる! LayerXのバクラク事業部で行われている Go 関連の読書会のご紹介 / Bakuraku Go Reading Group
upamune
5
290
ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly
kubode
0
120
Reactive Java REST APIs, FTW? Virtual JUG 2024
mraible
PRO
0
400
RAGのretrievalの評価を “ranx”で行う / Evaluate retrival of RAG using "ranx"
kun432
1
200
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
133
6.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Facilitating Awesome Meetings
lara
43
5.7k
RailsConf 2023
tenderlove
9
610
Rails Girls Zürich Keynote
gr2m
91
13k
Web Components: a chance to create the future
zenorocha
306
41k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.6k
We Have a Design System, Now What?
morganepeng
43
6.8k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
In The Pink: A Labor of Love
frogandcode
138
21k
Happy Clients
brianwarren
92
6.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
650
58k
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ͰΫϥΠΞϯτɾαʔόʔͷ࣮ʹܕΛ͚ͭΒΕΔʂ • ಋೖίετͦΕͳΓʹ͔͔Δ͚ͲϝϦοτѹతʹେ͖͍ͧʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ