ReactとGraphQLで実現する宣言的データフェッチ

Transcript

1. ReactͱGraphQLͰ࣮ݱ͢Δ એݴతσʔλϑΣον 2022.10.27 ReactΛ΋ͬͱޠΓ͍ͨʂ
2. ࣗݾ঺հ ˕ 2021೥4݄ Buysell Technologiesೖࣾ ˕ ϑϩϯτΤϯυΤϯδχΞ ˕ React / TypeScript / Go / GraphQ L ˕ झຯ ◦ ϚϯΨɺݸਓ։ൃ 2 ૣ੉ ࿨ً
3. ΞδΣϯμ ˕ GraphQL ˕ Fragment Colocation ˕ ·ͱΊ 3
4. 1 . GraphQL 4
5. GraphQLͱ͸ ˕ Web APIͷن֨ ˕ APIͷ࢓༷ΛεΩʔϚݴޠͰఆٛ ˕ ΫΤϦݴޠʹΑͬͯσʔλΛऔಘ 5
6. GraphQLͰͷAPI௨৴ͷྫ 6 Ҿ༻ɿhttps://hasura.io/learn/graphql/intro-graphql/what-is-graphql/
7. 7 GraphQLͷجຊߏจ 7 Quer y ˕ σʔλΛऔಘ͢ΔͨΊͷߏจ ˕ RESTͷGETʹ૬౰ ˕ QueryͱϨεϙϯεͷߏ଄͕Ұக
8. 8 Queryͷྫ 8 ࢦఆͨ͠ϑΟʔϧυͷΈϨεϙϯεʹؚ·ΕΔ
9. 9 GraphQLͷجຊߏจ 9 Fragmen t ˕ ϑΟʔϧυͷू߹Λఆٛ͢Δߏจ ˕ QueryͷதͰల։ͯ͠࢖༻ ˕ σʔλऔಘࣗମ͸Query͕ߦ͏
10. GraphQLͷಛ௃ ˕ ୯ҰͷΤϯυϙΠϯτ ˕ σʔλϑΣονͷॊೈੑ ˕ ڧྗͳΤίγεςϜ 10
11. GraphQLͷಛ௃ ˕ ୯ҰͷΤϯυϙΠϯτ ˕ σʔλϑΣονͷॊೈੑ ˕ ڧྗͳΤίγεςϜ 11
12. GraphQLΛ࢖͏͜ͱͰ ඞཁͳσʔλͷΈΛཉ͍͠ܗͰऔಘͰ͖Δ 12
13. ReactͷએݴతUIͱ૬ੑ͕͍͍ UI΋σʔλཁ݅΋એݴతʹѻ͑Δ 13
14. 2 . Fragment Colocation 14
15. Fragment Colocationͱ͸ ˕ UIͱσʔλཁ݅ΛηοτͰ؅ཧ͢Δͱ͍͏ߟ͑ํ ˕ ComponentͰ࢖༻͢ΔσʔλΛFragmentͰఆٛ͢ Δ ˕ Meta(چFacebook)Ͱ࠾༻͞Ε͍ͯΔ 15
16. 16 Ϣʔβʔϖʔδͷྫ 16 ˕ Ϣʔβʔ৘ใ ˕ ϢʔβʔͷλεΫҰཡ
17. 17 Componentͷ֊૚ߏ଄ 17 ˕ UserPag e ◦ UserInf o ◦ TaskList UserPage UserInfo TaskList
18. UserInfo 18 UserPage UserInfo TaskList
19. UserInfo 19 UserPage UserInfo TaskList Fragmentఆٛ
20. UserInfo 20 UserPage UserInfo TaskList Fragmentఆٛ FragmentͰఆٛͨ͠σʔλΛhookͰऔಘ
21. TaskList 21 UserPage UserInfo TaskList
22. TaskList 22 UserPage UserInfo TaskList Fragmentఆٛ FragmentͰఆٛͨ͠σʔλΛhookͰऔಘ
23. UserPage 23 UserPage UserInfo TaskList
24. UserPage 24 UserPage UserInfo TaskList FragmentΛ·ͱΊͨQueryΛఆٛ
25. UserPage 25 UserPage UserInfo TaskList FragmentΛ·ͱΊͨQueryΛఆٛ hookͰQuery࣮ߦ
26. UserPage 26 UserPage UserInfo TaskList FragmentΛ·ͱΊͨQueryΛఆٛ hookͰQuery࣮ߦ QueryͰऔಘͨ͠σʔλ ΛࢠComponentʹ౉͢
27. શମ૾ 27 TaskList UserPage UserInfo ComponentͱGraphQLͷ֊૚ߏ଄͕Ұக
28. Fragment ColocationͷϝϦοτ σʔλཁ݅΋ؚΊͯ
 ComponentΛΧϓηϧԽͰ͖Δ 28
29. ࠶ར༻͕Մೳ ຤୺ͷComponentͰߦ͍ͬͯ Δͷ͸σʔλཁ݅ͷએݴͷΈ Ͱɺσʔλͷऔಘ͸ߦ͍ͬͯ ͳ͍ͷͰෳ਺ͷComponent
 ͔Βར༻͕Մೳ σʔλཁ݅΋ؚΊͨComponentͷΧϓηϧԽ Өڹൣғ͕ด͍ͯ͡Δ ຤୺ͷComponentʹमਖ਼Λ
 Ճ͑ͯ΋ݺͼग़͠ݩͷ Component͸मਖ਼͸ෆཁ 29
30. 30 Ϣʔβʔϖʔδͷྫ 30 ˕ Ϣʔβʔ৘ใʹ߲໨Λ௥Ճ ˕ λεΫҰཡʹมߋ͸ͳ͠ ߲໨Λ௥Ճ
31. 31 UserInfoͷ࣮૷ 31 ˕ FragmentʹϑΟʔϧυΛ௥Ճ ˕ ද߲ࣔ໨Λ௥Ճ ˕ Propsͷมߋ͸ͳ͠ ௥Ճ ௥Ճ
32. 32 UserPageͷ࣮૷ 32 ˕ มߋՕॴ͸ͳ͠ ˕ ࢠComponentͷมߋ͕
 ਌Componentʹ͸Өڹ͍ͯ͠ͳ͍
33. 3 . ·ͱΊ 33
34. ·ͱΊ ˕ GraphQLͰ͸σʔλϑΣον͕ॊೈʹߦ͑Δ ˕ ComponentͰඞཁͳσʔλΛFragmentͰએݴతʹ
 ఆٛͰ͖Δ ˕ ComponentͱFragmentΛηοτͰ؅ཧ͢Δ͜ͱͰ σʔλཁ݅΋ؚΊͯΧϓηϧԽͰ͖Δ 34
35. 35 XF
    BSF
    IJSJOH όΠηϧͰ͸ 
 ϦϢʔεۀքͷ%9Λਪਐ͍ͯ͘͠ 
 ΤϯδχΞΛืू͍ͯ͠·͢ όΠηϧ ΤϯδχΞ࠾༻