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.4k
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
4.5k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.5k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
400
RailsエンジニアのためのNext.js入門
hokaccha
7
20k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.2k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.9k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
970
Web Frontend Improvement in Cookpad
hokaccha
1
1.1k
cookpad summer internship 2018 - Git
hokaccha
1
9.7k
Other Decks in Programming
See All in Programming
2025年のz-index設計を考える
tak_dcxi
13
5.1k
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
110
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
1.8k
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
470
tsconfigのオプションで変わる型世界
keisukeikeda
1
110
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
5.7k
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
520
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
290
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
720
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
110
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
370
バリデーションライブラリ徹底比較
nayuta999999
1
210
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
68
11k
Side Projects
sachag
453
42k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
Building Adaptive Systems
keathley
41
2.6k
The Cost Of JavaScript in 2023
addyosmani
49
7.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
A Tale of Four Properties
chriscoyier
159
23k
Site-Speed That Sticks
csswizardry
6
570
Why Our Code Smells
bkeepers
PRO
336
57k
Statistics for Hackers
jakevdp
799
220k
Facilitating Awesome Meetings
lara
54
6.4k
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ͷෛ࠴Λฦ٫͢ΔͨΊʹεΩʔϚͷҠߦΛ͓͜ͳ͍ͬͯΔ • ͦΕʹͬͯϑϩϯτΤϯυʹݫີͳܕఆٛΛಋೖ͍ͯ͠Δ • ಛʹେࣄʹ͍ͯ͠ΔͷҎԼ ◦ ۃྗ҆શʹҠߦ͢Δ
◦ ৽ͨʹෛ࠴Λੵ·ͳ͍ ◦ ՄೳͳݶΓΈԽɺࣗಈԽΛ͓͜ͳ͏