GraphQLΫϥΠΞϯτͷٕज़બఆ 2023ౙϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ20232023.11.18
View Slide
ૣًʢ@KazukiHayaseʣ● 2021BuySell Technologies৽ଔೖࣾ● ग़ཧSaaSνʔϜ ϓϩδΣΫτϦʔμʔ● Go / TypeScript / GraphQL / ։ൃੜ࢈ੑվળ
● GraphQLΫϥΠΞϯτͷٕज़બఆͷ؍● GraphQLΫϥΠΞϯτͷհͱൺֱ͢͜ͱ● GraphQLʹ͍ͭͯͷৄ͍͠આ໌͞ͳ͍͜ͱ
ΞδΣϯμGraphQLʹ͍ͭͯ01ٕज़બఆͷ؍02GraphQLΫϥΠΞϯτͷൺֱ03۩ମతͳબఆࣄྫ04
01GraphQLʹ͍ͭͯ
● Meta͕։ൃͨ͠Web APIͷن֨● APIͷ༷ΛεΩʔϚͰఆٛ● ΫϥΠΞϯτ͕ඞཁͳσʔλߏΛࢦఆͯ͠औಘՄೳGraphQLͱ
● ॊೈͳσʔλϑΣον● ܕ͚͞ΕͨεΩʔϚ● ڧྗͳΤίγεςϜ● Fragment ColocationGraphQLͷϝϦοτ
ॊೈͳσʔλϑΣον
ॊೈͳσʔλϑΣονඞཁͳσʔλͷΈΛ୯ҰͷϦΫΤετͰऔಘՄೳΦʔόʔϑΣον/ΞϯμʔϑΣονͷࢭϞόΠϧͳͲͷωοτϫʔΫͰߴʹಈ࡞
● υΩϡϝϯτͱ࣮ʹဃ͕ੜ·Εͳ͍● εΩʔϚϑΝʔετͳ։ൃ● εΩʔϚΛݩʹͨ͠ίʔυͷࣗಈੜܕ͚͞ΕͨεΩʔϚ
● The GuildΛத৺ͱͨ͠ڧྗͳΤίγεςϜ● e.g. GraphQL Code Generator, GraphQL Mesh, GraphQL ESLintڧྗͳΤίγεςϜ
● ֤छGraphQLΫϥΠΞϯτΤίγεςϜͷॏཁͳཁૉ● ΩϟογϡػߏͳͲʹΑΓΠϯϑϥΛҰͰ͖ΔڧྗͳΤίγεςϜApollo Client & Client-side Architecture Basics
ίϯϙʔωϯτͷσʔλཁ݅ΛίϯϙʔωϯτͷଆʹFragmentͰఆٛ͢ΔઃܭࢥFragment Colocationͱ
Fragment ColocationͱFragmentͱίϯϙʔωϯτΛಉҰϑΝΠϧʹఆٛ
Fragment ColocationͱίϯϙʔωϯτͱGraphQLͷ֊ߏ͕Ұக
σʔλཁ֤݅ίϯϙʔωϯτͰఆٛͭͭ͠σʔλऔಘ୯ҰͷQueryʢϦΫΤετʣͰߦ͑ΔFragment ColocationʹΑΔϝϦοτ
● ΦʔόʔϑΣονʹؾ͖͍ͮ͢● मਖ਼࣌ͷӨڹൣғ͕ίϯϙʔωϯτʹด͍ͯ͡Δ● ߴڽूɾૄ݁߹ͳͷͰνʔϜλεΫΛׂ͍͢͠Fragment ColocationʹΑΔϝϦοτGraphQLͷϝϦοτΛ࠷େԽ͢ΔʹɺFragment Colocation͕ඞཁ
1. ίϯϙʔωϯτπϦʔશମͰඞཁͳσʔλΛ1ͭͷQueryͰఆٛa. Queryมߋ࣌ͷӨڹൣғ͕͍b. ࢠίϯϙʔωϯτͷमਖ਼͕ίϯϙʔωϯτʹӨڹ2. ֤ίϯϙʔωϯτͰσʔλऔಘΛ࣮ߦa. ΥʔλʔϑΥʔϧͷൃੜFragment ColocationΛߦΘͳ͍߹
● The GuildFragment Colocationਪ͍ͯ͠Δ○ Unleash the power of Fragments with GraphQL Codegen● GraphQL Code Generatorͷclient preset○ Fragment Masking͕σϑΥϧτͰ༗ޮ○ Fragment ColocationΛڧ੍͞ΕΔΤίγεςϜͷํੑ
React Server Componentsͷ಄ʹΑΔGraphQLͷඞཁੑ
RSCΛ͏͜ͱͰAPIϦΫΤετ͕αʔόʔͰ࣮ߦ͞ΕΥʔλʔϑΥʔϧͷӨڹ͕গͳ͘ͳΔReact Server Componentsͷ಄ʹΑΔGraphQLͷඞཁੑ֤ίϯϙʔωϯτͰAPIϦΫΤετΛߦ͏͜ͱͰ֤ίϯϙʔωϯτͰσʔλཁ݅ͷఆٛͱऔಘͷ྆ํ͕ՄೳʹͳΔ
RSCͱGraphQLͷڞ௨● ແବͳσʔλసૹͷݮʹΑΔύϑΥʔϚϯεͷ্● ඇಉظσʔλసૹʹUXͷվળ○ GraphQLͷ@deferσΟϨΫςΟϒ○ RSCͷஈ֊తͳετϦʔϛϯά
ύϑΥʔϚϯεͱUXͷ؍ʹ͓͍ͯGraphQL͕RSCͰஔ͖͑ΒΕΔϢʔεέʔεଘࡏ͢Δ
GraphQL͕༗ޮͳ໘● SPAͷ߹○ APIϦΫΤετΫϥΠΞϯτ͔Β࣮ߦ● RSCΑΓGraphQLͷํ͕ίεύ͕ྑ͍߹○ RSCಋೖͷΠϯϑϥɾӡ༻ɾֶशίετߴ͍
02ٕज़બఆͷ؍
● 📍 Fragment Colocation● ⚡ ܕͷࣗಈੜ● 🔨 Ωϟογϡػߏ● 📝 ֶशίετٕज़બఆͷ؍
ύϑΥʔϚϯεͱ։ൃऀମݧͷ؍Ͱඞཁ؍● Fragment Colocationͷ࣮ͷ͢͠͞● Fragment Colocationʹ͓͚ΔύϑΥʔϚϯεͷ࠷దԽ📍 Fragment Colocation
ܕ҆શੑͱҰ؏ੑͷ୲อʹඞཁ؍● Query/Mutation/Fragmentͷܕͷࣗಈੜ͕Ͱ͖Δ͔⚡ ܕͷࣗಈੜ
ωοτϫʔΫϦΫΤετͷ࠷దԽͷͨΊʹඞཁ؍● Ωϟογϡػߏͷ༗ແ● ΩϟογϡػߏͷΈ● Ωϟογϡͷѻ͍͢͞🔨 Ωϟογϡػߏ
։ൃੜ࢈ੑ্ͷͨΊʹඞཁ؍● ϥΠϒϥϦͷѻ͍͢͞● υΩϡϝϯτใྔͷॆ࣮ੑ● ίϛϡχςΟͷ׆ൃ͞📝 ֶशίετ
03GraphQLΫϥΠΞϯτͷൺֱ
● Relay● Apollo Client● urql● graphql-requestGraphQLΫϥΠΞϯτͷൺֱ
GraphQLΫϥΠΞϯτͷൺֱRelay Apollo Client urql graphql-requestFragmentColocation🟢 🟡 🟡 🟡ܕͷࣗಈੜ 🟢 🟢 🟢 🟢Ωϟογϡػߏ 🟢 🟡 🟡 🔴ֶशίετ 🔴 🟡 🟢 🟢
● ։ൃݩɿMeta● GitHub Starɿ18kʢ2023/11/12࣌ʣ● ࠾༻ࣄྫɿFacebookɺAtlassianRelay
● Relayͷࢥͱͯ͠Fragment ColocationΛॏཁࢹ● ࣗવͱFragment Colocationʹ४ڌ࣮ͨ͠ʹͳΔ○ Relay CompilerʹΑΔ࠷దͳQueryͷੜ○ Data MaskingʹΑΔσʔλͷΞΫηε੍ޚ○ Fragment scopedͳม📍 Fragment Colocation - Relay
📍 Fragment Colocation - RelayData MaskingʹΑΓఆٛͯ͠ͳ͍σʔλʹΞΫηεͰ͖ͳ͍
● ίϯύΠϥʢRelay CompilerʣΛแ● Relay Compiler͕TypeScriptʢ͘͠FlowʣͷܕΛࣗಈੜ⚡ ܕͷࣗಈੜ - Relay
● σʔλΛਖ਼نԽͯ͠อ࣋͢ΔΩϟογϡػߏΛ࣋ͭ● Global Object IdentificationʹΑΔσʔλͷਖ਼نԽ○ άϩʔόϧʹҰҙͳIDΛఆ○ ͜ΕʹΑΓϦϑΣονΩϟογϡͷߋ৽͕࠷దԽ͞ΕΔ🔨 Ωϟογϡػߏ - Relay
Ωϟογϡ͕ར༻͞ΕΔ߹ͷྫ● ಉ͡Queryͷ߹● ҟͳΔQueryͰཁٻσʔλ͕Ωϟογϡʹଘࡏ͢Δ߹🔨 Ωϟογϡػߏ - Relay
● Ωϟογϡͷߋ৽Λݕͯ͠ίϯϙʔωϯτΛ࠶ϨϯμϦϯά● ࠶ϨϯμϦϯά࠷దԽ͞ΕΔ○ ֤ίϯϙʔωϯτͰఆٛͨ͠σʔλʹߋ৽͕͋ͬͨ߹ͷΈൃՐ○ πϦʔશମ͕࠶ϨϯμϦϯά͞ΕΔ͜ͱ͕ͳ͍🔨 Ωϟογϡػߏ - Relay
● ߴ͍● ಛʹຊޠͷใ͕গͳ͍● GraphQLʹରͯ͠ͷशख़͕ٻΊΒΕΔ● ഁյతมߋ͕ଟ͍ͷͰै͕ඞཁ📝 ֶशίετ - Relay
● Meta͕։ൃ͍ͯ͠ΔͷͰReactͱͷ૬ੑ͕͍͍○ React18ͷSuspenseͳͲਅͬઌʹରԠ͞Εͨ● Relay CompilerʹΑΔGraphQLͷ໋໊نଇͷڧ੍● શମతʹGraphQLͷ༷ʹ४ڌͦͷଞͷಛ - Relay
● ։ൃݩɿApollo Graph Inc.● GitHub Starɿ19kʢ2023/11/12࣌ʣ● ࠾༻ࣄྫɿMediumɺCircleCIApollo Client
● Apollo Client୯ମͰ͍͠○ v3.8͔ΒuseFragment͕Stableʹͳ͕ͬͨɺॾʑͷػೳ͕Γͳ͍ҹ● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ○ client presetͷFragment MaskingʹΑΔσʔλͷΞΫηε੍ޚ○ ≒ RelayͷDataMasking📍 Fragment Colocation - Apollo Client
📍 Fragment Colocation - Apollo Client
● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ● TypedDocumentNodeʹΑΔܕਪ○ ܕ͚͞ΕͨDocumentNodeΦϒδΣΫτΛ࡞͢ΔͨΊͷ։ൃπʔϧ○ Apollo ClientҎ֎ͷϥΠϒϥϦͰ༻Մೳ⚡ ܕͷࣗಈੜ - Apollo Client
● σʔλΛਖ਼نԽͯ͠อ࣋͢ΔΩϟογϡػߏΛ࣋ͭ● ҰҙͳࣝผࢠͷੜʹΑΔσʔλͷਖ਼نԽ○ idͱ__typenameΛ݁߹ͨ͠Ωϟογϡ༻ͷࣝผࢠΛੜ🔨 Ωϟογϡػߏ - Apollo Client
Ωϟογϡ͕ར༻͞ΕΔ߹ͷྫ● ಉ͡Queryͷ߹● ҟͳΔQueryͰཁٻσʔλ͕Ωϟογϡ͕ଘࡏ͢Δ߹🔨 Ωϟογϡػߏ - Apollo Client
● Ωϟογϡͷߋ৽Λݕͯ͠ίϯϙʔωϯτΛ࠶ϨϯμϦϯά● QueryΛ࣮ߦ͍ͯ͠Δίϯϙʔωϯτ͕࠶ϨϯμϦϯά͞ΕΔ○ Relayͱҧ͍πϦʔશମ͕࠶ϨϯμϦϯά͞ΕΔ🔨 Ωϟογϡػߏ - Apollo Client
● ී௨● ίϛϡχςΟ͕׆ൃ● ຊޠͷใ͕ॆ࣮͍ͯ͠Δ● ใ͕๛ͳ໘ɺػೳଟ͍📝 ֶशίετ - Apollo Client
● Apollo LinkͳͲͷपลϥΠϒϥϦ͕ॆ࣮͍ͯ͠Δ● Relayurqlͱൺͯ։ൃ͕Ε͍ͯΔ○ e.g. React18ͷSuspenseͷରԠ͕ະྃʢ2023/11/12࣌ʣͦͷଞͷಛ - Apollo Client
● ։ൃݩɿFormidable● GitHub Starɿ8.2kʢ2023/11/12࣌ʣ● ࠾༻ࣄྫɿGitHubɺTripadvisorurql
● Apollo Clientͱಉ༷● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ📍 Fragment Colocation - urql
● Apollo Clientͱಉ༷● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ⚡ ܕͷࣗಈੜ - urql
● Document CacheͱݺΕΔΩϟογϡػߏΛ࣋ͭ● QueryͱVariablesͷΈ߹Θͤ͝ͱʹΩϟογϡΛอ࣋🔨 Ωϟογϡػߏ - urql
Ωϟογϡ͕ར༻͞ΕΔ߹ͷྫ● ಉ͡Queryͷ߹🔨 Ωϟογϡػߏ - urql
● Apollo Clientͱಉ༷● Ωϟογϡͷߋ৽Λݕͯ͠ίϯϙʔωϯτΛ࠶ϨϯμϦϯά● QueryΛ࣮ߦ͍ͯ͠Δίϯϙʔωϯτ͕࠶ϨϯμϦϯά͞ΕΔ○ Relayͱҧ͍πϦʔશମ͕࠶ϨϯμϦϯά͞ΕΔ🔨 Ωϟογϡػߏ - urql
● ਖ਼نԽ͞ΕͨΩϟογϡΛར༻͢Δ͜ͱՄೳ● ਖ਼نԽͷϩδοΫApollo Clientͱಉ༷🔨 Ωϟογϡػߏ - urql
● ͍● ػೳ͕γϯϓϧͳͨΊɺΩϟονΞοϓ͕༰қ📝 ֶशίετ - urql
● όϯυϧαΠζ͕খ͍͞● ExchangeʹΑΔ֦ு͕Մೳ○ ≒ GraphQLͷϦΫΤετ/ϨεϙϯεΛॲཧ͢ΔͨΊͷϛυϧΣΞͦͷଞͷಛ - urql
● ։ൃݩɿJason Kuhrtࢯ● GitHub Starɿ5.5kʢ2023/11/12࣌ʣ● ࠾༻ࣄྫɿஶ໊ͳاۀͰͳ͠graphql-request
● Apollo Clientͱಉ༷● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ📍 Fragment Colocation - graphql-request
● Apollo Clientͱಉ༷● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ⚡ ܕͷࣗಈੜ - graphql-request
● ࣋ͨͳ͍🔨 Ωϟογϡػߏ - graphql-request
● ۃΊ͍ͯ● ࠷ݶͷػೳ͔͠උ͍͑ͯͳ͍📝 ֶशίετ - graphql-request
● ඇৗʹγϯϓϧͰܰྔͦͷଞͷಛ - graphql-request
● Ωϟογϡػߏ͕ෆཁͳΒgraphql-request● Ωϟογϡػߏ͕ඞཁͳΒRelay or Apollo Client or urqlͲΕΛ࠾༻͢Ε͍͍͔ʁ
● ୈҰީิͱͯ͠Relay● ࣍ͰApollo Client or urqlΩϟογϡػߏ͕ඞཁͳ߹
ͳ͔ͥʁ
GraphQLಋೖͷҰ൪ͷత ωοτϫʔΫτϥϑΟοΫͷ࠷దԽʹΑΔύϑΥʔϚϯεͱUXͷ্
● Fragment Colocationͷ࠾༻͕ඞਢ● ͦͷࢥʹैͬͯ࠷దԽ͞Ε͍ͯΔͷݱঢ়ͰRelayͷΈ● ֶशίετߴ͍͕ɺͦΕʹݟ߹͏Ϧλʔϯେ͍ʹ͋ΔωοτϫʔΫτϥϑΟοΫͷ࠷దԽʹ͓͍ͯ
● Apollo ClientͰ͍͍ͨػೳ͕ͳ͍ͳΒurql○ ࣮ݱ͍ͨ͜͠ͱʹରͯ͠Apollo ClientΦʔόʔͳέʔε͕ଟ͍○ େମͷϢʔεέʔεurqlΧόʔͰ͖Δ● Apollo Clientͷෳࡶ͞ނͷ͋Δ○ όʔδϣϯΞοϓʹ͏ΩϟογϡपΓσάϨ○ ReactͷैͷΕApollo Client ͱ urql
04۩ମతͳબఆࣄྫ
۩ମతͳબఆࣄྫग़ཧSaaSνʔϜͰApollo ClientΛ࠾༻
● ϓϩμΫτͷཁ݅తʹΩϟογϡػߏඞཁ● GraphQLࣗମ͕ॳΊͯͩͬͨͷ͋Γಋೖͷ͢͠͞Λ༏ઌ● ࣌࠾༻ࣄྫগͳ͔ͬͨͷ͋Γurqlͷ࠾༻ݟૹΓબఆཧ༝
● ಋೖεϜʔζͰ։ൃॳظͳ͔ͬͨ● ։ൃ͕ਐΉʹͭΕ͕ͯൃੜ○ ΩϟογϡपΓͷෆ۩߹○ Fragment Colocationͷڧ੍͕Ͱ͖ͳ͍○ SuspenseͷରԠͷΕ։ൃͯ͠Έͯ
● ్தͰRelayͷΓ͑ݕ౼͕ͨ͠அ೦● αʔόʔ͕Global Object Identificationʹ४ڌͰ͖ͳ͔ͬͨRelayͷΓ͑
● client presetҠߦͯ͠ɺFragment Colocationͷڧ੍● ESLintͰ໋໊نଇͷϧʔϧՃApollo ClientΛ͍ଓ͚ΔํͰڥඋʹྗ
● HygenʹΑΔίϯϙʔωϯτͷܗͷੜApollo ClientΛ͍ଓ͚ΔํͰڥඋʹྗ
● v3.8ͰuseFragment͕Stableʹͳͬͨ○ Fragmentͷߋ৽ͷΈΛݕͯ͠࠶ϨϯμϦϯά○ SuspenseະରԠͰɺଞʹ੍͕͋ΔͷͰར༻·͍ͩ͠● ͜ͷล͕ॆ࣮ͯ͘͠Ε࠾༻ͷ༏ઌ্͕͕Δ͔ʁApollo Clientͷࠓޙ
● GraphQLΛ࠷େݶ׆༻͢ΔʹFragment Colocation͕ॏཁ● ͦͷ؍ͰGraphQLΫϥΠΞϯτRelay͕͓͢͢Ί● ଞͷΫϥΠΞϯτͰ͍ۙମݧಘΒΕΔΑ͏ʹͳͬͯདྷͯΔ·ͱΊ
THANK YOU
kazukihayase
kojira
tacck
takasehideki
wakamsha
leveragestech
hakubishin3
sansantech
ikumatadokoro
bun913
radkmb
shkitayama
peisuke
eileencodes
philhawksworth
dotmariusz
akmur
orderedlist
smashingmag
davidbonilla
bkeepers
kneath
jeffersonlam
rasmusluckow
lynnandtonic