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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Kazuhito Hokamura
July 18, 2023
Programming
1.6k
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
GraphQLの負債と向き合うためにやっていること
Kazuhito Hokamura
July 18, 2023
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
5.1k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.8k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
490
RailsエンジニアのためのNext.js入門
hokaccha
7
22k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.4k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
4.1k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
1.1k
Web Frontend Improvement in Cookpad
hokaccha
1
1.2k
cookpad summer internship 2018 - Git
hokaccha
1
9.8k
Other Decks in Programming
See All in Programming
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
panda728
PRO
2
130
音楽のための関数型プログラミング言語mimiumにおける多段階計算の活用
tomoyanonymous
1
320
初めてのKubernetes 本番運用でハマった話
oku053
0
120
Claude Team Plan導入・ガイド
tk3fftk
0
190
どこまでゆるくて許されるのか
tk3fftk
0
480
使用 Meilisearch 建立新聞搜尋工具
johnroyer
0
150
任せる範囲はこう広がった / How the Scope of AI Delegation Has Expanded
nrslib
1
250
SREの積み重ねがAI駆動開発のガードレールになった ― 7つの実践/SRE Guardrails The 7
tomoyakitaura
8
4.1k
地域 SRE コミュニティ最前線 - ホンマでっかSRE勉強会
tk3fftk
0
230
鹿野さんに聞く!『TypeScriptコードレシピ集』で磨く実践力
tonkotsuboy_com
4
1.1k
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
guvalif
PRO
1
160
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
gotok365
3
290
Featured
See All Featured
Building Adaptive Systems
keathley
44
3.1k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
460
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.5k
Abbi's Birthday
coloredviolet
3
8.6k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
590
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
750
Art, The Web, and Tiny UX
lynnandtonic
304
22k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
6k
Optimizing for Happiness
mojombo
378
71k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
My Coaching Mixtape
mlcsv
0
170
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
290
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ͷෛ࠴Λฦ٫͢ΔͨΊʹεΩʔϚͷҠߦΛ͓͜ͳ͍ͬͯΔ • ͦΕʹͬͯϑϩϯτΤϯυʹݫີͳܕఆٛΛಋೖ͍ͯ͠Δ • ಛʹେࣄʹ͍ͯ͠ΔͷҎԼ ◦ ۃྗ҆શʹҠߦ͢Δ
◦ ৽ͨʹෛ࠴Λੵ·ͳ͍ ◦ ՄೳͳݶΓΈԽɺࣗಈԽΛ͓͜ͳ͏