GraphQL あるいは React における自律的なデータ取得について

Transcript

1. GraphQL ͋Δ͍͸ React ʹ͓͚Δ ࣗ཯తͳσʔλऔಘʹ͍ͭͯ @Quramy 2024.9.10
2. About me - id: @Quramy (GitHub, X) - ৬छ: Web ϑϩϯτΤϯυΤϯδχΞ - Quramy ͱ Query ͷؔ܎ - GraphQL ͷܦݧ: ຊ൪ͰܞΘΔΑ͏ʹͳͬͯ5 ~ 6 ೥ - Ұ࣌ظ GraphQL Server Side Λ΍͍ͬͯͨ͜ͱ΋͋Γ·͕͢ɺ جຊ͸ React ʹΑΔΫϥΠΞϯταΠυͷ։ൃ͕ϝΠϯ - झຯͰ ts-graphql-plugin ͱ͍͏πʔϧΛϝϯς͍ͯ͠·͢ (ͬͪ͜͸ 7೥͘Β͍) https://github.com/Quramy/ts-graphql-plugin
3. ࠓ೔࿩͢͜ͱ - ϑϩϯτΤϯυʹͱͬͯɺͳͥ GarphQL ͕͋Γ͕͍ͨͷ͔ - React Server Components ͱ GraphQL ͷؔ܎ʹ͍ͭͯ
4. σʔλϑΣονͷ՝୊
5. Data fetch on "Leaf" 1PTU
   $PNQPOFOU
   ͷσʔλղܾ͕ऴΘΔ·Ͱ
   "VUIPS
   $PNQPOFOU
   ʹඞཁ ͳσʔλͷϦΫΤετ͕ߦΘΕͳ͍ʢ͍ΘΏΔ΢ΥʔλʔϑΥʔϧ໰୊ʣ
   ˠ
   ύϑΥʔϚϯε͕ѱ͍
6. Data fetch on "Root" ίϯϙʔωϯτʹඞཁͳσʔλͷ؅ཧओମ͕
   3PPU
   ͱͳΔ 
   ࣗ཯తͰͳ͍ 
   σʔλදࣔ಺༰ͷมߋͷͨͼʹίϯϙʔωϯτ πϦʔશମʹվम͕ٴͿ
   ˠ
   อकੑ͕௿͍
7. σʔλϑΣονʹ͓͚Δ՝୊ 3PPU
   ͰσʔλϑΣον -FBG
   ͰσʔλϑΣον 1FSGPSNBODF ✅ 🤮 %FWFMPQFS
   &YQFSJFODF
   🤮 ✅
8. GraphQL ʹΑΔղ
9. σʔλϑΣονʹ͓͚Δ՝୊ GraphQL / Relay ͸͜ΕΛղফ͢ΔͨΊʹچ Facebook ࣾʹΑͬͯ࡞ΒΕͨ ※ ҎԼ͸ React Europe 2015 ʹ͓͚ΔͦΕͧΕͷ঺հಈը • Lee Byron ࢯͷ GraphQL ঺հಈը: https://www.youtube.com/watch?v=WQLzZf34FJ8 • Joe Savona ࢯͷ Relay ঺հಈը: https://www.youtube.com/watch?v=IrgHurBjQbg 3PPU
   ͰσʔλϑΣον -FBG
   ͰσʔλϑΣον 1FSGPSNBODF ✅ 🤮 %FWFMPQFS
   &YQFSJFODF
   🤮 ✅
10. GraphQL ͷ఩ֶ - Client / Server ͱ΋ʹ Leaf ʹॲཧΛهड़͢Δ ݴ͍׵͑Δͱɺ֤Ϟδϡʔϧ͕ࣗ཯త. Fat Controller ΍ Fat Component ͕ੜ·Εʹ͍͘ - Client: Leaf Ͱએݴ(fragment), Root(Query) ͸·ͱΊ্͛Δ͚ͩ - Server: ϑΟʔϧυϦκϧό͸ʮࣗ෼ࣗ਎͕ԿΛฦ͔͢ʯ͚ͩΛҙࣝ͢Ε ͹Α͍ - Leaf <-> Root ͷ΍ΓͱΓ͸ϑϨʔϜϫʔΫʹ೚ͤΔ
11. Data fetch w/ GraphQL $PNQPOFOU
    ͕ࣗ਎ʹඞཁͳσʔλΛ
    3FTPMWFS
    ʹཁٻ͍ͯ͠Δ
    ௨৴Λ·ͱΊ্͛Δɾ෼഑͢Δͷ͸ϑϨʔϜϫʔΫ͕΍ͬͯ͘ΕΔ
12. GraphQL ୅ସͱͯ͠ͷ React Server Components
13. React Server Components (RSC) ͕ղܾ͍ͨ͠໰୊ - 2020೥ͷ RSC ൃද࣌ʹʮReact ʹ͓͚Δ Data Fetch ͷෛΛɺGraphQL / Relay Λར༻ͤͣʹղফ͢Δखஈʯͱ঺հ͞Ε͍ͯΔ - https://www.youtube.com/watch?v=TQQPAU21ZUw
14. RSC ͱ͸ - ʮαʔόʔͰͷΈಈ࡞͢Δʯ React ίϯϙʔωϯτ(Server Component; SC) ͕ര஀ - ैདྷͷ Server Side Rendering ͸ ϒϥ΢βͰಈ࡞͢Δ React ίϯϙʔ ωϯτΛʮαʔόʔͰ΋ಈ࡞͍ͤͯ͞Δʯ͚ͩ - Server Ͱ͔͠Ͱ͖ͳ͍͜ͱɺ͢ͳΘͪ σʔλղܾඇಉظIO Λ࣮ߦͰ͖ Δ - SC Ͱ͸ "Leaf data fetch" ͕ Performance ্ͷτϨʔυΦϑͰ͸ͳ͘ ͳΔ
15. Data fetch on "Client" Leaf 1PTU
    $PNQPOFOU
    ͷσʔλղܾ͕ऴΘΔ·Ͱ
    "VUIPS
    $PNQPOFOU
    ʹඞཁ ͳσʔλͷϦΫΤετ͕ߦΘΕͳ͍ʢ͍ΘΏΔ΢ΥʔλʔϑΥʔϧ໰୊ʣ
    ˠ
    ύϑΥʔϚϯε͕ѱ͍ ͜ͷ΢ΥʔλʔϑΥʔϧ͕໰୊ͱͳΔͷ͸ɺ
    $PNQPOFOU $MJFOU
    
    4FSWFS
    ͷ௨৴͕Π ϯλʔωοτ
    
    ߴ஗Ԇ
    /8
    ΛލΔͨΊ
16. Data fetch on "Server" Leaf $PNQPOFOU
    ͕
    4FSWFS
    4JEF
    σʔλιʔεͷۙ͘
    Ͱಈ࡞͢ΔͷͰ͋ Ε͹ɺ΢ΥʔλʔϑΥʔϧͷ஗Ԇ͸େ͖ͳ໰୊Ͱ͸ͳ͍ 4FSWFS
    ଆͰඳըࡁΈͷ಺༰ FH
    1PTU
    $PNQPOFOU
    Λ
    ࣮
    %0.
    ʹ൓өͤ͞Δͷ ͸
    3FBDU
    ͕΍ͬͯ͘ΕΔ
17. Server Component = Fragment Container + Resolver ~ Async Server Component GraphQL Resolver ͕ Type Data Λฦ͢୅ΘΓʹɺServer Component ͕ ʮData + ඳը͞Εͨ UI ͷஅยʯΛฦ͢ GraphQL RSC
18. (SBQI2-
    3FTPMWFS ্
    ΋
    4FSWFS
    $PNQPOFOU
    Լ
    ΋ ࣗ਎͕ඞཁͱ͢ΔσʔλΛࣗ਎Ͱղܾ͍ͯ͠Δ
    
    ࣗ཯తͰ͋Δ
19. ͜ͷߏ੒Ͱ։ൃ͢ΔͨΊʹඞ ཁͳ͜ͱ - RSC ʹରԠ͍ͯ͠ΔϝλϑϨʔϜϫʔΫ: Next.js, Redwood, waku, etc... - GraphQL Resolver ։ൃͷ஌ݟ - e.g. N + 1 ໰୊΁ͷରԠύλʔϯ, Lazy Loading - GraphQL Sever Side ܦݧऀ͸͢ΜͳΓ RSC Λ࢝ΊΒΕΔͱࢥ͏
20. GraphQL ͱͷซ༻
21. [IMO] RSC + GraphQL ͸΍Γͨ͘ ͳ͍ - ಉ͜͡ͱΛ࣮ݱ͢Δํ๏͕ࠞࡏ͍ͯ͠Δ͜ͱʹର͢Δسආײ - RSC ͱ GraphQL ʹॏෳ͍ͯ͠Δཁૉ͕ଟ͍ ղܾ͠Α͏ͱͨ͠໰୊͕ʮΠϯλʔωοτӽ͠ͷޮ཰తͳσʔλϑΣονʯͳͷͰ౰વ - σʔλऔಘํ๏: Fragment colocation v.s. Fetching data on Leaf - Client Side Cache: Apollo ΍ Relay ͷ Store ૚ v.s. Next.js ͷ Cache (Router Cache) - Streaming: @defer Directive v.s. React Streaming SSR - RSC ͷཪʹ GraphQL Λஔ͍ͯ΋ࢫຯ͕ͳ͍ - RSC Λ࢖ΘͣʹɺGraphQL + Relay(or Apollo Client) ͳ SPA ߏ੒ͷํ͕·ͩγϯϓϧ
22. GraphQL or RSC (࠶ܝ) Πϯλʔωοτ
    ߴ஗Ԇ
    /8
    Λލ͍ͩ௨৴ʹରͯ͠ɺ ύϑΥʔϚϯεͱࣗ཯ੑΛཱ྆͢ΔͨΊ
23. RSC with GraphQL ...? ௿஗Ԇ
    /8
    ͳαʔόʔ؀ڥͰ
    (SBQI2-
    Λ࢖ͬͯ΋ࢫຯ͕ͳ͍
24. ͱ͸ݴ͏΋ͷͷ - ࠞͥΔͳͱݴ͍ͭͭ΋ʮݱߦࢿ࢈ͱͯ͠ͷ GraphQL αʔόʔ + ৽نͷϑϩϯτΤ ϯυʹ RSCʯ΁ͷંΓ߹͍͸ɺϢʔβʔϥϯυʹͱͬͯࠓޙͷ՝୊ - GraphQL Λ RSC ্Ͱಈ͔͚ͩ͢ͳΒผʹ؆୯. ͪΌΜͱ΍Δͷ͕೉͍͠͸ͣ - e.g. Fragment colocation ͢Δɾ͠ͳ͍ΛϧʔϧܾΊ͢Δ - Relay ͸ RSC ౷߹ΛҰ౓அ೦͍ͯ͠Δ ※ fragment ͷ݁Ռ͕ RSC ϖΠϩʔυͱͳΔΑ͏ͳṖσΟϨΫςΟϒͳͲࢼߦࡨޡ͍ͯͨ͠෩Ͱ͋Δ͕ɺ ͍ͭͷ·ʹ͔ϨϙδτϦ͔Β࡟আ͞Ε͍ͯͨ - Apollo ͷ https://github.com/apollographql/apollo-client-nextjs ͸ৄࡉෆ໌ ※ ಈ࡞͸͢Δ͕ɺʮΞϓϦέʔγϣϯΛͲ͏࡞Δ΂͖͔ʯͱ͍͏ࢥ૝͕Θ͔Βͳ͍
25. ͓ΘΓʹ
26. ·ͱΊ̍ - GraphQL (+ Relay) ͱ React Server Component ͸ɺΠϯλʔωοτӽ ͠ͷσʔλϑΣονʹ·ͭΘΔ໰୊ (e.g. ΢ΥʔλʔϑΥʔϧ) Λղܾ͢ Δ (ղܾํ๏͕ҟͳΔ͚ͩ) - ͲͪΒͰ΋σʔλϑΣονΛޮ཰Αࣗ͘཯తʹߦ͏ΞϓϦέʔγϣϯ͕ ࡞੒Մೳ - [IMO]ʮಉ͡՝୊ʹର͢Δํ๏ҧ͍ʯͰ͋ΔͨΊࠞͥΔϝϦοτ͕ͳ͍ɻ গͳ͘ͱ΋ɺॳखͰ GraphQL ͱ RSC ΛࠞͥΔબ୒͸Կ͔͕͓͔͍͠
27. ·ͱΊ̎ - ৽نʹ GraphQL Λ࠾༻͠Α͏ͱ͍ͯ͠Δਓ΁: ·ͣ͸ RSC ͱ͍͏બ୒ࢶ͕͋Δ͜ͱΛ஌ͬͯ΄͍͠ - ͜Ε͔Β RSC Λ࢖͓͏ͱ͍ͯ͠Δਓ΁: Server Component ։ൃͱ GraphQL Resolver ։ൃ͸ྨࣅ఺͕ଟ͍ͷ ͰɺGraphQL ΤίγεςϜ͕ഓ͖ͬͯͨϊ΢ϋ΢Λٵऩͯ͠ཉ͍͠
28. ࢀߟࢿྉ - GraphQL ͷ Fragment Colocation ʹ͍ͭͯͷ֓ཁ: https://speakerdeck.com/quramy/fragment-composition-of-graphql - RSC (ಛʹ Next.js ʹ͓͚Δ) σʔλϑΣονͷ͋Γํ: https://zenn.dev/akfm/books/nextjs-basic-principle/viewer/part_1 - GraphQL ͱ RSC ͷྨࣅؔ܎ʹ͍ͭͯ (ίʔυྫؚΉ): https://quramy.medium.com/react-server-components-ͱ-graphql-ͷΞ φϩδʔ-89b3f5f41a01
29. Thank you !