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
GraphQLの負債と向き合うためにやっていること
Search
Kazuhito Hokamura
July 18, 2023
Programming
2
1.3k
GraphQLの負債と向き合うためにやっていること
Kazuhito Hokamura
July 18, 2023
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
4k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.3k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
360
RailsエンジニアのためのNext.js入門
hokaccha
7
19k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.1k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.7k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
920
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
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
600
Criando Commits Incríveis no Git
marcelgsantos
2
170
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
130
Refactor your code - refactor yourself
xosofox
1
250
RWC 2024 DICOM & ISO/IEC 2022
m_seki
0
200
testcontainers のススメ
sgash708
1
120
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
190
命名をリントする
chiroruxx
1
380
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Italy
prof18
0
150
Discord Bot with AI -for English learners-
xin9le
1
120
良いユニットテストを書こう
mototakatsu
4
1.5k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
A Philosophy of Restraint
colly
203
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Facilitating Awesome Meetings
lara
50
6.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Music & Morning Musume
bryan
46
6.2k
Site-Speed That Sticks
csswizardry
2
190
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
160
Unsuck your backbone
ammeep
669
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Transcript
GraphQLͷෛ࠴ͱ͖߹͏ͨΊʹ͍ͬͯΔ͜ͱ 2013/7/19 @hokaccha Findy / ٕज़తෛ࠴ɺͲ͏ͬͯղফͨ͠ʁϦΞʔΩςΫνϟɾϦϑΝΫλࣄྫ͔ΒֶͿLunch LT
2 About Me Kazuhito Hokamura software engineer @hokaccha @hokaccha
3 ϢϏʔͷϓϩμΫτ ੜ׆ऀ͚ ड૬ஊΞϓϦ (toC) ҩྍػ͚ؔ AIγεςϜ (toB) ঢ়͔Βडͷख͕͔Γ͕Θ͔Δ ར༻ऀ
݄ؒ ສਓ 700 ࣄΛ1/3ʹޮԽ ಋೖࢪઃ 47ಓݝ 1000
4 GraphQLͷෛ࠴ 😰 • άϥϑߏʹͳ͍ͬͯͳ͍ • Ұ؏ੑ͕ͳ͍ • ֦ுੑ͕ͳ͍
5 άϥϑߏʹͳ͍ͬͯͳ͍ 2ճϦΫΤετΛૹΒͳ͍ͱձ໊ࣾ ʹͨͲΓண͚ͳ͍ ΄ͱΜͲάϥϑߏʹͳͬͯΔ͕ɺҰ෦͜ͷΑ͏ͳεΩʔϚఆ͕ٛ͋Δ
6 άϥϑߏʹ͍ͨ͠ 1ճͰձ໊ࣾΛऔΕΔʂ
7 Ұ؏ੑ͕ͳ͍ id͕IntͩͬͨΓ StringͩͬͨΓ CamelCaseͩͬͨΓ UPPER_CASEͩͬͨΓ fetchͱ͍͏prefix͕͍ͭͯͨΓ ͍ͭͯͳ͔ͬͨΓ
8 ֦ுੑ͕ͳ͍ updateUserName ͕User Λฦ͢ͱɺޙ͔ΒUserҎ֎ ͷใΛฦͨ͘͠ͳͬͨͱ͖ʹ֦ுͰ͖ͳ͍
9 ֦ுੑΛͨͤΔ mutation͝ͱʹpayloadܕΛఆٛ͠ɺpayloadܕʹ userͳͲͷϦιʔεܕΛͨͤΔ มߋલͷ໊લΛฦ͢ͳͲͷ֦ு͕༰қʹͳΔ
10 ෛ࠴Λղফ͢ΔͨΊͷ औΓΈ 💪 • ՄೳͳݶΓ҆શʹεΩʔϚΛҠߦ͢Δ • ৽ͨʹෛ࠴Λੵ·ͳ͍ͨΊͷΈԽɺࣗಈԽ
11 εΩʔϚͷҠߦ • εΩʔϚఆٛͷ͋Δ͖࢟Λఆٛͯ͠ঃʑʹҠߦ͢Δ • ͔༷͠͠ʑͳ͕...ʂ ◦ ಉҰεΩʔϚͰͷҠߦ໊લͷॏෳͳͲ͕͋ͬͯେม ◦ εΩʔϚͷنࣗಈςετ͕ෆे
◦ ΫϥΠΞϯτଆͰͷܕ͚͕ෆेͰ҆શʹҠߦͰ͖ͳ͍
12 ಉҰεΩʔϚͰͷҠߦͷ͍͠ͱ͜Ζ • id Λ Int ͔Β ID ܕʹม͑ΔέʔεΛߟ͑Δ •
ΫϥΠΞϯτ id: number Ͱ͘ΔલఏͰίʔυ͕ॻ͔Ε͍ͯΔ • ͜ͷ··Կߟ͑ͣʹAPIͷ࣮͚ͩม͑ΔͱյΕΔ • ϑϩϯτΤϯυͱόοΫΤϯυΛಉ࣌ʹมߋͰ͖Δͱ͍͍͕ ϦϦʔεͷΈతʹෆՄೳʢଟগͷΤϥʔΛڐ༰Ͱ͖ΕՄೳʣ idͷܕΛม͑Δ
13 PrefixΛ͚ͭͳ͕Βগͣͭ͠Ҡߦ͢Δ • v2 ͷΑ͏ͳ prefix Λ͚ͭɺ໊લͷॏෳΛආ͚ͯ৽ن࡞ • ಉ࣌ʹσϓϩΠ͕ඞཁͳ͍ͷͰ҆શʹҠߦͰ͖Δ •
͕... ͻͱͭมߋ͢ΔͷʹϑϩϯτΤϯυؚΊΔͱ 5ճ͘Β͍σϓϩΠ͢Δඞཁ͕͋ͬͯେม
14 ସҊ • εΩʔϚͱΤϯυϙΠϯτΛ͚ͯ৽͘͠࡞Γ͢Ҋ: ◦ /v2/graphql ͷΑ͏ͳΤϯυϙΠϯτʹͯ͠εΩʔϚΛશʹ͚Δ ◦ ໊લͷॏෳ͕ͳ͍ͷͰଟগҠߦָ͕ʹͳΔ ◦
ར༻͍ͯ͠ΔDGS framework͕ରԠ͍ͯ͠ͳͯ͘அ೦...ʂ • Kotlin ͔Β Node.js Ͱॻ͖͢Ҋ: ◦ ϢϏʔٕज़ελοΫΛ Kotlin ͔Β Node.js ʹҠߦ͢ΔҙࢥܾఆΛͨ͠ ◦ εΩʔϚͷҠߦͷ͍ͭͰʹ Node.js Ͱॻ͖͢ͱ͍͏Ҋ ◦ ಉ࣌ʹେ͖͍มߋΛ2ͭΔͷةݥͳͷͰࠓճݟૹΓ Kotlin ͷ··Δ • … ͱ͍͏Θ͚Ͱ໘͚ͩͲ prefix ઓུͰҠߦத
15 نͷࡦఆ • ઃܭͷࢦΛ໌ࣔͯ͠ೝࣝΛἧ͑Δ • ͜Ε·ͰͷֶͼΛੜ͔ͯ͠ΨΠυϥΠϯΛࡦఆ • ͜ΕʹԊͬͯεΩʔϚΛҠߦ͍ͯ͘͠
16 εΩʔϚͷࣗಈςετ • graphql-schema-linter Λ CI Ͱ࣮ߦ ◦ https://github.com/cjoudrey/graphql-schema-linter •
ΈࠐΈͷϧʔϧͩͱෆेͩͬͨͷͰ͍͔ͭ͘ΧελϜϧʔϧΛࣗલͰॻ͍ͨ ◦ updateUser UpdateUserInput Λ͏͚ͬͱͬͯ UpdateUserPayload Λฦ͢ɺͳͲ • VSCode Plugin ͕ͳ͔ͬͨͷͰࣗ࡞ ◦ https://github.com/hokaccha/vscode-graphql-schema-linter
17 ϑϩϯτΤϯυͷܕ͚ ϑϩϯτΤϯυͰgraphql-codegenͰεΩʔϚ͔Βࣗಈੜͨ͠ܕใΛ͍ͬͯͨ agefetchͯ͠ͳ͍ͷͰϨεϙϯεʹؚ·Εͳ͍ ͕ɺܕͱͯ͠ଘࡏ͍ͯ͠ΔͷͰΤϥʔʹͳΒͳ͍ ͔͜͜ΒܕΛੜ
18 ΫΤϦ͔ΒܕΛੜ͢Δ ੜʹ @graphql-codegen/typescript-operations Λར༻ ͔͜͜ΒܕΛੜ ageΛfetch͍ͯ͠ͳͯ͘ܕʹؚ·Εͳ͍ͷͰܕ νΣοΫͰΤϥʔʹͳΔ
19 Fragment Colocationͷಋೖ ͔͜͜ΒܕΛੜ ͷίϯϙʔωϯτͰࢠͷFragmentΛ embed͍ͯ͘͠
20 ·ͱΊ • GraphQLͷෛ࠴Λฦ٫͢ΔͨΊʹεΩʔϚͷҠߦΛ͓͜ͳ͍ͬͯΔ • ͦΕʹͬͯϑϩϯτΤϯυʹݫີͳܕఆٛΛಋೖ͍ͯ͠Δ • ಛʹେࣄʹ͍ͯ͠ΔͷҎԼ ◦ ۃྗ҆શʹҠߦ͢Δ
◦ ৽ͨʹෛ࠴Λੵ·ͳ͍ ◦ ՄೳͳݶΓΈԽɺࣗಈԽΛ͓͜ͳ͏