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
͕
4FSWFS
4JEF
σʔλιʔεͷۙ͘
Ͱಈ࡞͢ΔͷͰ͋ Ε͹ɺ΢ΥʔλʔϑΥʔϧͷ஗Ԇ͸େ͖ͳ໰୊Ͱ͸ͳ͍ 4FSWFS
ଆͰඳըࡁΈͷ಺༰ FH
1PTU
$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 !