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.5k
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
3k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.2k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
330
RailsエンジニアのためのNext.js入門
hokaccha
7
18k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
6.9k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.6k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
860
Web Frontend Improvement in Cookpad
hokaccha
1
950
cookpad summer internship 2018 - Git
hokaccha
1
9.5k
Other Decks in Programming
See All in Programming
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
CSC307 Lecture 10
javiergs
PRO
0
310
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
CSC307 Lecture 12
javiergs
PRO
0
220
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
CSC307 Lecture 07
javiergs
PRO
0
220
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Docker and Python
trallard
37
2.9k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Speed Design
sergeychernyshev
9
270
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
How to Think Like a Performance Engineer
csswizardry
4
590
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Code Review Best Practice
trishagee
58
16k
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ͰΫϥΠΞϯτɾαʔόʔͷ࣮ʹܕΛ͚ͭΒΕΔʂ • ಋೖίετͦΕͳΓʹ͔͔Δ͚ͲϝϦοτѹతʹେ͖͍ͧʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ