GraphQL ͋Δ͍͸ React ʹ͓͚Δ ࣗ཯తͳσʔλऔಘʹ͍ͭͯ @Quramy 2024.9.10

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

ࠓ೔࿩͢͜ͱ - ϑϩϯτΤϯυʹͱͬͯɺͳͥ GarphQL ͕͋Γ͕͍ͨͷ͔ - React Server Components ͱ GraphQL ͷؔ܎ʹ͍ͭͯ

σʔλϑΣονͷ՝୊

Data fetch on "Leaf" 1PTU$PNQPOFOUͷσʔλղܾ͕ऴΘΔ·Ͱ"VUIPS$PNQPOFOUʹඞཁ ͳσʔλͷϦΫΤετ͕ߦΘΕͳ͍ʢ͍ΘΏΔ΢ΥʔλʔϑΥʔϧ໰୊ʣ ˠύϑΥʔϚϯε͕ѱ͍

Data fetch on "Root" ίϯϙʔωϯτʹඞཁͳσʔλͷ؅ཧओମ͕ 3PPUͱͳΔ ࣗ཯తͰͳ͍ σʔλදࣔ಺༰ͷมߋͷͨͼʹίϯϙʔωϯτ πϦʔશମʹվम͕ٴͿ ˠอकੑ͕௿͍

σʔλϑΣονʹ͓͚Δ՝୊ 3PPUͰσʔλϑΣον -FBGͰσʔλϑΣον 1FSGPSNBODF ✅ 🤮 %FWFMPQFS&YQFSJFODF 🤮 ✅

GraphQL ʹΑΔղ

σʔλϑΣονʹ͓͚Δ՝୊ 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 🤮 ✅

GraphQL ͷ఩ֶ - Client / Server ͱ΋ʹ Leaf ʹॲཧΛهड़͢Δ ݴ͍׵͑Δͱɺ֤Ϟδϡʔϧ͕ࣗ཯త. Fat Controller ΍ Fat Component ͕ੜ·Εʹ͍͘ - Client: Leaf Ͱએݴ(fragment), Root(Query) ͸·ͱΊ্͛Δ͚ͩ - Server: ϑΟʔϧυϦκϧό͸ʮࣗ෼ࣗ਎͕ԿΛฦ͔͢ʯ͚ͩΛҙࣝ͢Ε ͹Α͍ - Leaf <-> Root ͷ΍ΓͱΓ͸ϑϨʔϜϫʔΫʹ೚ͤΔ

Data fetch w/ GraphQL $PNQPOFOU͕ࣗ਎ʹඞཁͳσʔλΛ3FTPMWFSʹཁٻ͍ͯ͠Δ ௨৴Λ·ͱΊ্͛Δɾ෼഑͢Δͷ͸ϑϨʔϜϫʔΫ͕΍ͬͯ͘ΕΔ

GraphQL ୅ସͱͯ͠ͷ React Server Components

React Server Components (RSC) ͕ղܾ͍ͨ͠໰୊ - 2020೥ͷ RSC ൃද࣌ʹʮReact ʹ͓͚Δ Data Fetch ͷෛΛɺGraphQL / Relay Λར༻ͤͣʹղফ͢Δखஈʯͱ঺հ͞Ε͍ͯΔ - https://www.youtube.com/watch?v=TQQPAU21ZUw

RSC ͱ͸ - ʮαʔόʔͰͷΈಈ࡞͢Δʯ React ίϯϙʔωϯτ(Server Component; SC) ͕ര஀ - ैདྷͷ Server Side Rendering ͸ ϒϥ΢βͰಈ࡞͢Δ React ίϯϙʔ ωϯτΛʮαʔόʔͰ΋ಈ࡞͍ͤͯ͞Δʯ͚ͩ - Server Ͱ͔͠Ͱ͖ͳ͍͜ͱɺ͢ͳΘͪ σʔλղܾඇಉظIO Λ࣮ߦͰ͖ Δ - SC Ͱ͸ "Leaf data fetch" ͕ Performance ্ͷτϨʔυΦϑͰ͸ͳ͘ ͳΔ

Data fetch on "Client" Leaf 1PTU$PNQPOFOUͷσʔλղܾ͕ऴΘΔ·Ͱ"VUIPS$PNQPOFOUʹඞཁ ͳσʔλͷϦΫΤετ͕ߦΘΕͳ͍ʢ͍ΘΏΔ΢ΥʔλʔϑΥʔϧ໰୊ʣ ˠύϑΥʔϚϯε͕ѱ͍ ͜ͷ΢ΥʔλʔϑΥʔϧ͕໰୊ͱͳΔͷ͸ɺ $PNQPOFOU $MJFOU 4FSWFSͷ௨৴͕Π ϯλʔωοτ ߴ஗Ԇ/8 ΛލΔͨΊ

Data fetch on "Server" Leaf $PNQPOFOU͕4FSWFS4JEF σʔλιʔεͷۙ͘ Ͱಈ࡞͢ΔͷͰ͋ Ε͹ɺ΢ΥʔλʔϑΥʔϧͷ஗Ԇ͸େ͖ͳ໰୊Ͱ͸ͳ͍ 4FSWFSଆͰඳըࡁΈͷ಺༰ FH1PTU $PNQPOFOU Λ࣮%0.ʹ൓өͤ͞Δͷ ͸3FBDU͕΍ͬͯ͘ΕΔ

Server Component = Fragment Container + Resolver ~ Async Server Component GraphQL Resolver ͕ Type Data Λฦ͢୅ΘΓʹɺServer Component ͕ ʮData + ඳը͞Εͨ UI ͷஅยʯΛฦ͢ GraphQL RSC

(SBQI2-3FTPMWFS ্ ΋4FSWFS$PNQPOFOU Լ ΋ ࣗ਎͕ඞཁͱ͢ΔσʔλΛࣗ਎Ͱղܾ͍ͯ͠Δ ࣗ཯తͰ͋Δ

͜ͷߏ੒Ͱ։ൃ͢ΔͨΊʹඞ ཁͳ͜ͱ - RSC ʹରԠ͍ͯ͠ΔϝλϑϨʔϜϫʔΫ: Next.js, Redwood, waku, etc... - GraphQL Resolver ։ൃͷ஌ݟ - e.g. N + 1 ໰୊΁ͷରԠύλʔϯ, Lazy Loading - GraphQL Sever Side ܦݧऀ͸͢ΜͳΓ RSC Λ࢝ΊΒΕΔͱࢥ͏

GraphQL ͱͷซ༻

[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 ߏ੒ͷํ͕·ͩγϯϓϧ

GraphQL or RSC (࠶ܝ) Πϯλʔωοτ ߴ஗Ԇ/8 Λލ͍ͩ௨৴ʹରͯ͠ɺ ύϑΥʔϚϯεͱࣗ཯ੑΛཱ྆͢ΔͨΊ

RSC with GraphQL ...? ௿஗Ԇ/8ͳαʔόʔ؀ڥͰ (SBQI2-Λ࢖ͬͯ΋ࢫຯ͕ͳ͍

ͱ͸ݴ͏΋ͷͷ - ࠞͥΔͳͱݴ͍ͭͭ΋ʮݱߦࢿ࢈ͱͯ͠ͷ GraphQL αʔόʔ + ৽نͷϑϩϯτΤ ϯυʹ RSCʯ΁ͷંΓ߹͍͸ɺϢʔβʔϥϯυʹͱͬͯࠓޙͷ՝୊ - GraphQL Λ RSC ্Ͱಈ͔͚ͩ͢ͳΒผʹ؆୯. ͪΌΜͱ΍Δͷ͕೉͍͠͸ͣ - e.g. Fragment colocation ͢Δɾ͠ͳ͍ΛϧʔϧܾΊ͢Δ - Relay ͸ RSC ౷߹ΛҰ౓அ೦͍ͯ͠Δ ※ fragment ͷ݁Ռ͕ RSC ϖΠϩʔυͱͳΔΑ͏ͳṖσΟϨΫςΟϒͳͲࢼߦࡨޡ͍ͯͨ͠෩Ͱ͋Δ͕ɺ ͍ͭͷ·ʹ͔ϨϙδτϦ͔Β࡟আ͞Ε͍ͯͨ - Apollo ͷ https://github.com/apollographql/apollo-client-nextjs ͸ৄࡉෆ໌ ※ ಈ࡞͸͢Δ͕ɺʮΞϓϦέʔγϣϯΛͲ͏࡞Δ΂͖͔ʯͱ͍͏ࢥ૝͕Θ͔Βͳ͍

͓ΘΓʹ

·ͱΊ̍ - GraphQL (+ Relay) ͱ React Server Component ͸ɺΠϯλʔωοτӽ ͠ͷσʔλϑΣονʹ·ͭΘΔ໰୊ (e.g. ΢ΥʔλʔϑΥʔϧ) Λղܾ͢ Δ (ղܾํ๏͕ҟͳΔ͚ͩ) - ͲͪΒͰ΋σʔλϑΣονΛޮ཰Αࣗ͘཯తʹߦ͏ΞϓϦέʔγϣϯ͕ ࡞੒Մೳ - [IMO]ʮಉ͡՝୊ʹର͢Δํ๏ҧ͍ʯͰ͋ΔͨΊࠞͥΔϝϦοτ͕ͳ͍ɻ গͳ͘ͱ΋ɺॳखͰ GraphQL ͱ RSC ΛࠞͥΔબ୒͸Կ͔͕͓͔͍͠

·ͱΊ̎ - ৽نʹ GraphQL Λ࠾༻͠Α͏ͱ͍ͯ͠Δਓ΁: ·ͣ͸ RSC ͱ͍͏બ୒ࢶ͕͋Δ͜ͱΛ஌ͬͯ΄͍͠ - ͜Ε͔Β RSC Λ࢖͓͏ͱ͍ͯ͠Δਓ΁: Server Component ։ൃͱ GraphQL Resolver ։ൃ͸ྨࣅ఺͕ଟ͍ͷ ͰɺGraphQL ΤίγεςϜ͕ഓ͖ͬͯͨϊ΢ϋ΢Λٵऩͯ͠ཉ͍͠

ࢀߟࢿྉ - 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

Thank you !