$30 off During Our Annual Pro Sale. View Details »

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

KazukiHayase
October 28, 2022

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

KazukiHayase

October 28, 2022
Tweet

More Decks by KazukiHayase

Other Decks in Technology

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