Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

KazukiHayase

October 28, 2022
Tweet

More Decks by KazukiHayase

Other Decks in Technology

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 XFBSFIJSJOH όΠηϧͰ͸ 
 ϦϢʔεۀքͷ%9Λਪਐ͍ͯ͘͠ 
 ΤϯδχΞΛืू͍ͯ͠·͢ όΠηϧ ΤϯδχΞ࠾༻