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
ReactとGraphQLで実現する宣言的データフェッチ
Search
KazukiHayase
October 28, 2022
Technology
1
4.1k
ReactとGraphQLで実現する宣言的データフェッチ
KazukiHayase
October 28, 2022
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
290
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
490
もし今からGraphQLを採用するなら
kazukihayase
13
5.5k
Goでテストをしやすくするためにやったこと
kazukihayase
1
840
GraphQLクライアントの技術選定 2023冬
kazukihayase
9
7.3k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
1k
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
3.4k
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
1.4k
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.8k
Other Decks in Technology
See All in Technology
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
350
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
190
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.1k
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
240
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
530
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
170
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
1k
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
0
190
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
170
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
210
Wasmのエコシステムを使った ツール作成方法
askua
0
220
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Practical Orchestrator
shlominoach
190
11k
Docker and Python
trallard
46
3.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
A designer walks into a library…
pauljervisheath
209
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Transcript
ReactͱGraphQLͰ࣮ݱ͢Δ એݴతσʔλϑΣον 2022.10.27 ReactΛͬͱޠΓ͍ͨʂ
ࣗݾհ ˕ 20214݄ Buysell Technologiesೖࣾ ˕ ϑϩϯτΤϯυΤϯδχΞ ˕ React /
TypeScript / Go / GraphQ L ˕ झຯ ◦ ϚϯΨɺݸਓ։ൃ 2 ૣ ً
ΞδΣϯμ ˕ GraphQL ˕ Fragment Colocation ˕ ·ͱΊ 3
1 . GraphQL 4
GraphQLͱ ˕ Web APIͷن֨ ˕ APIͷ༷ΛεΩʔϚݴޠͰఆٛ ˕ ΫΤϦݴޠʹΑͬͯσʔλΛऔಘ 5
GraphQLͰͷAPI௨৴ͷྫ 6 Ҿ༻ɿhttps://hasura.io/learn/graphql/intro-graphql/what-is-graphql/
7 GraphQLͷجຊߏจ 7 Quer y ˕ σʔλΛऔಘ͢ΔͨΊͷߏจ ˕ RESTͷGETʹ૬ ˕
QueryͱϨεϙϯεͷߏ͕Ұக
8 Queryͷྫ 8 ࢦఆͨ͠ϑΟʔϧυͷΈϨεϙϯεʹؚ·ΕΔ
9 GraphQLͷجຊߏจ 9 Fragmen t ˕ ϑΟʔϧυͷू߹Λఆٛ͢Δߏจ ˕ QueryͷதͰల։ͯ͠༻ ˕
σʔλऔಘࣗମQuery͕ߦ͏
GraphQLͷಛ ˕ ୯ҰͷΤϯυϙΠϯτ ˕ σʔλϑΣονͷॊೈੑ ˕ ڧྗͳΤίγεςϜ 10
GraphQLͷಛ ˕ ୯ҰͷΤϯυϙΠϯτ ˕ σʔλϑΣονͷॊೈੑ ˕ ڧྗͳΤίγεςϜ 11
GraphQLΛ͏͜ͱͰ ඞཁͳσʔλͷΈΛཉ͍͠ܗͰऔಘͰ͖Δ 12
ReactͷએݴతUIͱ૬ੑ͕͍͍ UIσʔλཁ݅એݴతʹѻ͑Δ 13
2 . Fragment Colocation 14
Fragment Colocationͱ ˕ UIͱσʔλཁ݅ΛηοτͰཧ͢Δͱ͍͏ߟ͑ํ ˕ ComponentͰ༻͢ΔσʔλΛFragmentͰఆٛ͢ Δ ˕ Meta(چFacebook)Ͱ࠾༻͞Ε͍ͯΔ 15
16 Ϣʔβʔϖʔδͷྫ 16 ˕ Ϣʔβʔใ ˕ ϢʔβʔͷλεΫҰཡ
17 Componentͷ֊ߏ 17 ˕ UserPag e ◦ UserInf o ◦
TaskList UserPage UserInfo TaskList
UserInfo 18 UserPage UserInfo TaskList
UserInfo 19 UserPage UserInfo TaskList Fragmentఆٛ
UserInfo 20 UserPage UserInfo TaskList Fragmentఆٛ FragmentͰఆٛͨ͠σʔλΛhookͰऔಘ
TaskList 21 UserPage UserInfo TaskList
TaskList 22 UserPage UserInfo TaskList Fragmentఆٛ FragmentͰఆٛͨ͠σʔλΛhookͰऔಘ
UserPage 23 UserPage UserInfo TaskList
UserPage 24 UserPage UserInfo TaskList FragmentΛ·ͱΊͨQueryΛఆٛ
UserPage 25 UserPage UserInfo TaskList FragmentΛ·ͱΊͨQueryΛఆٛ hookͰQuery࣮ߦ
UserPage 26 UserPage UserInfo TaskList FragmentΛ·ͱΊͨQueryΛఆٛ hookͰQuery࣮ߦ QueryͰऔಘͨ͠σʔλ ΛࢠComponentʹ͢
શମ૾ 27 TaskList UserPage UserInfo ComponentͱGraphQLͷ֊ߏ͕Ұக
Fragment ColocationͷϝϦοτ σʔλཁؚ݅Ίͯ ComponentΛΧϓηϧԽͰ͖Δ 28
࠶ར༻͕Մೳ ͷComponentͰߦ͍ͬͯ Δͷσʔλཁ݅ͷએݴͷΈ Ͱɺσʔλͷऔಘߦ͍ͬͯ ͳ͍ͷͰෳͷComponent ͔Βར༻͕Մೳ σʔλཁؚ݅ΊͨComponentͷΧϓηϧԽ Өڹൣғ͕ด͍ͯ͡Δ ͷComponentʹमਖ਼Λ Ճ͑ͯݺͼग़͠ݩͷ
Componentमਖ਼ෆཁ 29
30 Ϣʔβʔϖʔδͷྫ 30 ˕ Ϣʔβʔใʹ߲ΛՃ ˕ λεΫҰཡʹมߋͳ͠ ߲ΛՃ
31 UserInfoͷ࣮ 31 ˕ FragmentʹϑΟʔϧυΛՃ ˕ ද߲ࣔΛՃ ˕ Propsͷมߋͳ͠ Ճ
Ճ
32 UserPageͷ࣮ 32 ˕ มߋՕॴͳ͠ ˕ ࢠComponentͷมߋ͕ ComponentʹӨڹ͍ͯ͠ͳ͍
3 . ·ͱΊ 33
·ͱΊ ˕ GraphQLͰσʔλϑΣον͕ॊೈʹߦ͑Δ ˕ ComponentͰඞཁͳσʔλΛFragmentͰએݴతʹ ఆٛͰ͖Δ ˕ ComponentͱFragmentΛηοτͰཧ͢Δ͜ͱͰ σʔλཁؚ݅ΊͯΧϓηϧԽͰ͖Δ 34
35 XFBSFIJSJOH όΠηϧͰ ϦϢʔεۀքͷ%9Λਪਐ͍ͯ͘͠ ΤϯδχΞΛืू͍ͯ͠·͢ όΠηϧ ΤϯδχΞ࠾༻