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
3.9k
ReactとGraphQLで実現する宣言的データフェッチ
KazukiHayase
October 28, 2022
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
420
もし今からGraphQLを採用するなら
kazukihayase
12
5.3k
Goでテストをしやすくするためにやったこと
kazukihayase
1
820
GraphQLクライアントの技術選定 2023冬
kazukihayase
9
7.1k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
970
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
3.2k
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
1.4k
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.8k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
3.2k
Other Decks in Technology
See All in Technology
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
2
690
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
340
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
200
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
560
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
730
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
290
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
120
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
230
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
170
TableauLangchainとは何か?
cielo1985
1
150
VGGT: Visual Geometry Grounded Transformer
peisuke
1
620
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
240
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
Side Projects
sachag
455
42k
Building Adaptive Systems
keathley
43
2.7k
RailsConf 2023
tenderlove
30
1.1k
Agile that works and the tools we love
rasmusluckow
329
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Practical Orchestrator
shlominoach
189
11k
A Tale of Four Properties
chriscoyier
160
23k
Writing Fast Ruby
sferik
628
62k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Making Projects Easy
brettharned
116
6.3k
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Λਪਐ͍ͯ͘͠ ΤϯδχΞΛืू͍ͯ͠·͢ όΠηϧ ΤϯδχΞ࠾༻