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

Transcript

1. ReactͱGraphQLͰ࣮ݱ͢Δ
   એݴతσʔλϑΣον
   2022.10.27 ReactΛ΋ͬͱޠΓ͍ͨʂ
   

   View Slide

2. ࣗݾ঺հ
   ˕ 2021೥4݄ Buysell Technologiesೖࣾ
   ˕ ϑϩϯτΤϯυΤϯδχΞ
   ˕ React / TypeScript / Go / GraphQ
   L
   
   ˕ झຯ
   ○ ϚϯΨɺݸਓ։ൃ
   2
   ૣ੉ ࿨ً
   

   View Slide

3. ΞδΣϯμ
   ˕ GraphQL
   ˕ Fragment Colocation
   ˕ ·ͱΊ
   3
   

   View Slide

4. 1
   .
   
   GraphQL
   4
   

   View Slide

5. GraphQLͱ͸
   ˕ Web APIͷن֨
   ˕ APIͷ࢓༷ΛεΩʔϚݴޠͰఆٛ
   ˕ ΫΤϦݴޠʹΑͬͯσʔλΛऔಘ
   5
   

   View Slide

6. GraphQLͰͷAPI௨৴ͷྫ
   6
   Ҿ༻ɿhttps://hasura.io/learn/graphql/intro-graphql/what-is-graphql/
   

   View Slide

7. 7
   GraphQLͷجຊߏจ
   7
   Quer
   y
   
   ˕ σʔλΛऔಘ͢ΔͨΊͷߏจ
   ˕ RESTͷGETʹ૬౰
   ˕ QueryͱϨεϙϯεͷߏ଄͕Ұக
   

   View Slide

8. 8
   Queryͷྫ
   8
   ࢦఆͨ͠ϑΟʔϧυͷΈϨεϙϯεʹؚ·ΕΔ
   

   View Slide

9. 9
   GraphQLͷجຊߏจ
   9
   Fragmen
   t
   
   ˕ ϑΟʔϧυͷू߹Λఆٛ͢Δߏจ
   ˕ QueryͷதͰల։ͯ͠࢖༻
   ˕ σʔλऔಘࣗମ͸Query͕ߦ͏
   

   View Slide

10. GraphQLͷಛ௃
    ˕ ୯ҰͷΤϯυϙΠϯτ
    ˕ σʔλϑΣονͷॊೈੑ
    ˕ ڧྗͳΤίγεςϜ
    10
    

    View Slide

11. GraphQLͷಛ௃
    ˕ ୯ҰͷΤϯυϙΠϯτ
    ˕ σʔλϑΣονͷॊೈੑ
    ˕ ڧྗͳΤίγεςϜ
    11
    

    View Slide

12. GraphQLΛ࢖͏͜ͱͰ
    ඞཁͳσʔλͷΈΛཉ͍͠ܗͰऔಘͰ͖Δ
    12
    

    View Slide

13. ReactͷએݴతUIͱ૬ੑ͕͍͍
    UI΋σʔλཁ݅΋એݴతʹѻ͑Δ
    13
    

    View Slide

14. 2
    .
    
    Fragment Colocation
    14
    

    View Slide

15. Fragment Colocationͱ͸
    ˕ UIͱσʔλཁ݅ΛηοτͰ؅ཧ͢Δͱ͍͏ߟ͑ํ
    ˕ ComponentͰ࢖༻͢ΔσʔλΛFragmentͰఆٛ͢
    Δ
    ˕ Meta(چFacebook)Ͱ࠾༻͞Ε͍ͯΔ
    15
    

    View Slide

16. 16
    Ϣʔβʔϖʔδͷྫ
    16
    ˕ Ϣʔβʔ৘ใ
    ˕ ϢʔβʔͷλεΫҰཡ
    

    View Slide

17. 17
    Componentͷ֊૚ߏ଄
    17
    ˕ UserPag
    e
    
    ○ UserInf
    o
    
    ○ TaskList
    UserPage
    UserInfo
    TaskList
    

    View Slide

18. UserInfo
    18
    UserPage
    UserInfo
    TaskList
    

    View Slide

19. UserInfo
    19
    UserPage
    UserInfo
    TaskList
    Fragmentఆٛ
    

    View Slide

20. UserInfo
    20
    UserPage
    UserInfo
    TaskList
    Fragmentఆٛ
    FragmentͰఆٛͨ͠σʔλΛhookͰऔಘ
    

    View Slide

21. TaskList
    21
    UserPage
    UserInfo
    TaskList
    

    View Slide

22. TaskList
    22
    UserPage
    UserInfo
    TaskList
    Fragmentఆٛ
    FragmentͰఆٛͨ͠σʔλΛhookͰऔಘ
    

    View Slide

23. UserPage
    23
    UserPage
    UserInfo
    TaskList
    

    View Slide

24. UserPage
    24
    UserPage
    UserInfo
    TaskList
    FragmentΛ·ͱΊͨQueryΛఆٛ
    

    View Slide

25. UserPage
    25
    UserPage
    UserInfo
    TaskList
    FragmentΛ·ͱΊͨQueryΛఆٛ
    hookͰQuery࣮ߦ
    

    View Slide

26. UserPage
    26
    UserPage
    UserInfo
    TaskList
    FragmentΛ·ͱΊͨQueryΛఆٛ
    hookͰQuery࣮ߦ
    QueryͰऔಘͨ͠σʔλ
    ΛࢠComponentʹ౉͢
    

    View Slide

27. શମ૾
    27
    TaskList
    UserPage
    UserInfo
    ComponentͱGraphQLͷ֊૚ߏ଄͕Ұக
    

    View Slide

28. Fragment ColocationͷϝϦοτ
    σʔλཁ݅΋ؚΊͯ

    ComponentΛΧϓηϧԽͰ͖Δ
    28
    

    View Slide

29. ࠶ར༻͕Մೳ
    ຤୺ͷComponentͰߦ͍ͬͯ
    Δͷ͸σʔλཁ݅ͷએݴͷΈ
    Ͱɺσʔλͷऔಘ͸ߦ͍ͬͯ
    ͳ͍ͷͰෳ਺ͷComponent

    ͔Βར༻͕Մೳ
    σʔλཁ݅΋ؚΊͨComponentͷΧϓηϧԽ
    Өڹൣғ͕ด͍ͯ͡Δ
    ຤୺ͷComponentʹमਖ਼Λ

    Ճ͑ͯ΋ݺͼग़͠ݩͷ
    Component͸मਖ਼͸ෆཁ
    29
    

    View Slide

30. 30
    Ϣʔβʔϖʔδͷྫ
    30
    ˕ Ϣʔβʔ৘ใʹ߲໨Λ௥Ճ
    ˕ λεΫҰཡʹมߋ͸ͳ͠
    ߲໨Λ௥Ճ
    

    View Slide

31. 31
    UserInfoͷ࣮૷
    31
    ˕ FragmentʹϑΟʔϧυΛ௥Ճ
    ˕ ද߲ࣔ໨Λ௥Ճ
    ˕ Propsͷมߋ͸ͳ͠
    ௥Ճ
    ௥Ճ
    

    View Slide

32. 32
    UserPageͷ࣮૷
    32
    ˕ มߋՕॴ͸ͳ͠
    ˕ ࢠComponentͷมߋ͕

    ਌Componentʹ͸Өڹ͍ͯ͠ͳ͍
    

    View Slide

33. 3
    .
    
    ·ͱΊ
    33
    

    View Slide

34. ·ͱΊ
    ˕ GraphQLͰ͸σʔλϑΣον͕ॊೈʹߦ͑Δ
    ˕ ComponentͰඞཁͳσʔλΛFragmentͰએݴతʹ

    ఆٛͰ͖Δ
    ˕ ComponentͱFragmentΛηοτͰ؅ཧ͢Δ͜ͱͰ
    σʔλཁ݅΋ؚΊͯΧϓηϧԽͰ͖Δ
    34
    

    View Slide

35. 35
    XFBSFIJSJOH
    όΠηϧͰ͸
    

    ϦϢʔεۀքͷ%9Λਪਐ͍ͯ͘͠
    

    ΤϯδχΞΛืू͍ͯ͠·͢
    όΠηϧ ΤϯδχΞ࠾༻
    

    View Slide