Slide 1

Slide 1 text

GraphQLαʔόΛ࡞Δۤ͠Έ ͱղܾख๏ @mackee_w a.k.a macopy 2020-07-21 ٢঵ࣉ.pm23

Slide 2

Slide 2 text

࿩͢͜ͱ • ΋ͱ΋ͱGraphQLʹջٙతͩͬͨਓ͕ • GraphQL͕͢Ͱʹ࢖ΘΕ͍ͯΔϓϩδΣΫτͰͪΐͬͱۤ͠Έ • ࡞Γ௚ͧ͢ʂͱͳͬͨͱ͖ʹ·ͨGraphQLΛ࢖͏ཧ༝

Slide 3

Slide 3 text

macopy *ʮ ߏ଄ମҠ͠ସ͑ۀʯ * WebΞϓϦέʔγϣϯΤϯδχΞ * ୲౰͸αʔόαΠυ(Perl/Go) * Ϛελσʔλ؅ཧ͕ಘҙͰ͕͢࠷ ۙ͸ͦ͏͍͏࢓ࣄ͕͋Γ·ͤΜ

Slide 4

Slide 4 text

࠷ۙͷ͓࢓ࣄ

Slide 5

Slide 5 text

ࠓ೔ͷओ୊ GraphQL

Slide 6

Slide 6 text

΋͔ͯ͠͠٢঵ ࣉpmʹGraphQL ͷ೾͕དྷ͍ͯ Δʁʁʁ

Slide 7

Slide 7 text

GraphQL͓͞Β͍ • Web޲͚ΫΤϦݴޠ • ಉ͡໾ׂΛ͢Δ΋ͷ: OpenAPI, gRPC, JSON-RPC… • GitHubͳͲͷWeb APIͰ࠾༻ྫ͋Γ • `/graphql`Έ͍ͨͳ୯ҰͷΤϯυϙΠϯτʹΫΤϦΛ౤͛Δ • Ϩεϙϯε͸JSON͕Α͘࢖ΘΕΔ(͕ɺผʹԿͰ΋ྑ͍͸ͣ)

Slide 8

Slide 8 text

GraphQLΛ࢖͏ͱ͖ͷྲྀΕ εΩʔϚ ΫΤϦ ม਺ Ϩεϙϯε POST /graphql

Slide 9

Slide 9 text

GraphQLɺԿ͕͏Ε͍͠ͷʁ • ܕ͕͋ͬͯૉ੖Β͍͠ • ܕ໊ʹ`!`͕ͭ͘ͱnot nullable • ඞཁͳfieldͷߜΓࠐΈ΍ɺҰॹʹऔΓ͍ͨϦιʔεͷҰׅऔಘ΋Ͱ͖Δ • ࣹӨ΍batch requestΈ͍ͨͳ࢓૊ΈΛ࡞Γࠐ·ͣʹࡁΉ • पลπʔϧ/ϥΠϒϥϦ͕͍ͬͺ͍͋ͬͯૉ੖Β͍͠ • GraphiQL, apollo-client/apollo-server ͳͲͳͲ

Slide 10

Slide 10 text

͜ͷ”͏Ε͍͠”͸ ୭ͷࢹ఺͔ʁ

Slide 11

Slide 11 text

αʔό(Perl)୲౰ͷࢲࢹ఺ͰݟΔͱ

Slide 12

Slide 12 text

GraphQLɺԿ͕͏Ε͍͠ͷʁ • ܕ͕͋ͬͯૉ੖Β͍͠ • ܕ໊ʹ`!`͕ͭ͘ͱnot nullable • ඞཁͳfieldͷߜΓࠐΈ΍ɺҰॹʹऔΓ͍ͨϦιʔεͷҰׅऔಘ΋Ͱ͖Δ • ࣹӨ΍batch requestΈ͍ͨͳ࢓૊ΈΛ࡞Γࠐ·ͣʹࡁΉ • पลπʔϧ/ϥΠϒϥϦ͕͍ͬͺ͍͋ͬͯૉ੖Β͍͠ • GraphiQL, apollo-client/apollo-server ͳͲͳͲ ←ͤ΍ͳͰ΋αʔόɺPerl΍ͶΜ… ɹundefେ׻ܴ΍ͶΜ… ↑͑ɺͭ·Γൃߦ͞ΕΔSQL͕ݻఆͰ͖ͳ͍ʁʁ ɹࠔΔͷͰ͸ʁʁʁ ↑ͦΕPerlʹ͋Δͷʁʁʁʁʁ

Slide 13

Slide 13 text

GraphQLΛຊ֨తʹ࢖͏લ·Ͱͷҹ৅(1) • ΫϥΠΞϯτଆͷૢ࡞ͰσʔλͷऔΓग़͠ํ͕ಈతʹมΘΓ͏Δͷ͸ड ͚ೖΕ͕͍ͨ • ύϑΥʔϚϯενϡʔχϯά͕͔ͳΓ೉͍͠ • RESTful APIʹൺ΂ͯGraphQLͰN+1ͷղܾ͕೉͍͠࿩͸͕͜͜ΩϞ ͩͱࢥΘΕΔ • RESTful APIͰฦ͢σʔλͷܗ͕ҰఆͩͱܾΊଧͪνϡʔχϯάͰ͖ Δ GraphQL͸ͦΕ͕ग़དྷͳ͍

Slide 14

Slide 14 text

GraphQLΛຊ֨తʹ࢖͏લ·Ͱͷҹ৅(2) • GitHub API v4(GraphQL)͕ग़ͨͱ͖ʹΘʔ͍ͱ৮ͬͯΈͨͱ͖ͷײ૝ • GraphQLݴޠΛ֮͑Δͷ͕೉ղ(ʹݟ͑ͨ) • ୯ͳΔJSONͷ೿ੜͰ͸ͳ͍ಠࣗDSL • ͪΐͬͱෳࡶͰωετ͕ਂͯ͘ྔ͕ଟ͍ΫΤϦΛൃߦ͢Δͱ500͕ฦ͖ͬͯͨ • ʮGitHubͰ͢Β͜͏ͳΔΜ͔ͩΒզʑʹ͸…ʯ • ͨͿΜࠓ͸ComplexityΛܭࢉͯ͠200Ͱฦͤͳ͍Αͱݴͬͯ͘ΔͷͰ͸ͳ͍͔

Slide 15

Slide 15 text

๻͕ٕज़બ୒͢ΔͳΒબ͹ͳ͍ͩΖ͏…

Slide 16

Slide 16 text

ԑ͕ͳ͍ͱࢥ͍͕ͬͯͨɺ͔͠͠…

Slide 17

Slide 17 text

ࠓ೥಄ʹҟಈͨ͠ ςʔϚʮࠓ೥ͷલ൒ͷ׆ಈΛৼΓฦΔʯ

Slide 18

Slide 18 text

ҟಈ௚ޙͷձ࿩ • ʮͳΜ͔͜ͷϖʔδදࣔ͞ΕΔ·Ͱॏ͍͠ɺαʔό΋͘͢͝CPU৯͏ ΜͰ͢ΑͶʯ • ๻ʮͲΕͲΕݟͯΈΔ͔…͋͋׳Ε਌͠ΜͩPerlͩ…ʯ •ʮ͸ͬɺGraphQLͩ…ʯ

Slide 19

Slide 19 text

ॏ͍ϖʔδΛνϡʔχϯά͢Δ • ͜ͷ࣌఺Ͱ͸Կ͕ݪҼ͔͸Θ͔Βͳ͍ • GraphQLͰ͸ͳ͘ɺΞϓϦέʔγϣϯϩδοΫͷํʹݪҼ͕͋Δ͔΋ • WebΞϓϦαʔόͷCPUΛ৯͏࣌఺ͰDBͰ͸ͳ͍ • …͔͜͠͠ͷ୊ࡐͷൃදͰ͜͜ʹॻ࣌͘఺ͰΦν͕ݟ͍͑ͯΔ • ͳʹ͸ͱ΋͋ΕͦͷϖʔδͰୟ͔Ε͍ͯΔAPIΛൈ͖ग़ͯ͠ϑϨʔϜάϥ ϑΛग़ͧ͢

Slide 20

Slide 20 text

Devel::NYTProfͷ݁Ռ • ԣ͕࣠࣌ؒͰॎ͕ίʔϧελοΫ • ͖Ε͍ͳϏϧ͕ݐͬͨ • ΞϓϦέʔγϣϯϩδοΫ͸੺ ؙ͍ͷ෦෼ • Ϗϧ͕ݐͬͯΔͷ͸Resolverͱݺ ͹ΕΔfieldΛղܾ͢ΔϝιουΛ ࠶ؼతʹ୳͍ͯ͠Δ෦෼

Slide 21

Slide 21 text

PerlͷGraphQL.pm • ࠷ઌ୺ͷϞμϯPerl • Function::Parameters • Return::Type • ܕ͕ΨνΨνʹॻ͔Ε͍ͯΔ • ͔͠͠Perl͸ಈతܕ෇͚ݴޠͳͷͰಈతʹ ܕνΣοΫ͠·͢ • ↑͕͜͜ϘτϧωοΫʹͳΔ • ܕνΣοΫΛແޮԽ͢ΔΑ͏ʹ Function::ParametersΛ͍͡ΔͱΫΤϦ୯Ґ Ͱݟͯ3ഒߴ଎Խ͞Εͨ

Slide 22

Slide 22 text

GraphQL APIͷߴ଎ԽͷҊ • GraphQL.pm͓ΑͼFunction::ParametersΛ͍ͬͯ͡Pull RequestΛग़͢ • ܕνΣοΫແޮԽ͸ຊମΛ͍͡Δ͔͠ແ͍ • ͕ɺ͜ͷPull Request͕Authorʹཧղ͞ΕΔࣗ৴͕ͳ͍…͋ͱͬ͞͞ͱղܾ͍ͨ͠ • Ωϟογϡ͢Δ • GraphQLͰ࢖ΘΕΔresolver΍Ϧιʔε୯ҐͷΩϟογϡͰ͸ແҙຯ • GraphQLΛύʔεͨ࣌͠఺Ͱෛ͚͕֬ఆ͍ͯ͠Δ • GraphQLΛGraphQL.pmͰύʔε͢ΔલʹϨεϙϯεΩϟογϡΛฦ͢ => ࠾༻

Slide 23

Slide 23 text

GraphQL͸Ωϟογϡ͕ࠔ೉ͱ͍͏ᷚ • ΤϯυϙΠϯτ͸1Օॴ, ΫΤϦ͸bodyʹ٧ΊΒΕ͍ͯΔͷͰ… • query stringʹΫΤϦΛೖΕͯϨεϙϯεΩϟογϡ͢Δख๏ͳͲ ΋͋ΔΒ͍͠ • nginxͰ͸ͳ͘Perlʹདྷ͔ͯΒΩϟογϡ͢Δ͜ͱʹ͠ɺBody͸ಡΉ • ͔͠͠BodyΛGraphQLͱͯ͠ಡΉͱෛ͚ͳͷͰGraphQLͱͯ͠ಡ ·ͳ͍

Slide 24

Slide 24 text

ΫΤϦΛϋογϡԽͨ͠΋ͷΛredisͰ ϨεϙϯεΩϟογϡ ※ηογϣϯͳͲߟྀ͢Δͱ͔,$variables΋normalize͢ΔͳͲ΋͏গ͠޻෉͕ඞཁ

Slide 25

Slide 25 text

CPUͷεύΠΫ͕؇࿨͞Εͯ ΊͰͨ͠ΊͰͨ͠

Slide 26

Slide 26 text

ୈೋষ ͜ͷମݧΛͨ͠ਓ͕ؒ શ෦࡞Γ௚͠Λ΍Δͱ͖ʹ ·ͨGraphQLΛબ΂Δ͔

Slide 27

Slide 27 text

શ෦࡞Γ௚͠ͷܦҢ • ͜ͷGraphQLΛ࢖͍ͬͯΔ෦෼͸ɺͦΕൈ͖ʹͯ͠΋͔ͳΓࠐΈೖͬ ͨϩδοΫ͕ೖ͍ͬͯΔ • νʔϜ಺Ͱ΋ཧղͰ͖͍ͯΔਓ͕গͳ͍ • ͔͠͠αʔϏεͷ֩ͷ෦෼ͳͷͰ࢓༷มߋ΍ػೳ௥ՃΛόϯόϯೖΕ ͍ͨ • ͔ͳΓͰ͔͍ػೳ௥ՃΛ͍ͨ͠ => ࡞Γ௚͔͢…

Slide 28

Slide 28 text

࡞Γ௚͍ͭ͢ͰʹGraphQLΛ˓˓͍ͨ͠ • ݱঢ়ͷ࢓૊Έ͸ෳࡶͳGraphQLΫΤϦΛॻ͘ͱWebαʔό͕ॏ͘ͳΔ ಛੑ • ΩϟογϡͰ͖Δͷ΋ඇϩάΠϯϢʔβͰϦΞϧλΠϜੑ͕ແ͍಺༰ͩ ͚Ͱݶք͕͋Δ • ͦ΋ͦ΋GraphQLΛ˓˓ͯ͠ղܾ͍ͨ͠ • ○○ʹ͸ʮ΍ΊΔʯͱ͔ʮҡ࣋ͨ͠··࢓૊ΈΛม͑Δʯͱ͔ͦͷ΁ Μ͕ೖΓ·͢

Slide 29

Slide 29 text

࡞Γ௚͢ଞͷཁҼ • ύϑΥʔϚϯεཁ͕݅ଞͷ෦෼ͱҧ͏ • ि຤ͳͲʹਓ͕ϫοͱདྷͨΒ࢖ΘΕΔ͕ීஈ͸શ͘࢖ΘΕͳ͍ • ࠷ۙ͸ਓ͕૿͑ͯDBෛՙ΋ؾʹͳΓ࢝Ίͨ

Slide 30

Slide 30 text

GraphQL͸ے͕ѱ͍ͷ͔ʁ • ͜ͷ࿩͚ͩฉ͘ͱʮ΍ͬ΂ۙدΒΜͱ͜ʯͬͯࢥ͏ਓ΋͍Δ͔΋ • ੾Γ෼͚ͯߟ͑Δ • ݱঢ়ͷ࢓૊ΈΑΓ΋͍͍ղ๏͕͋Δͷ͔ • ͦΕͱ΋ • GraphQLࣗମ͕ۤ࿑ʹରͯ͠Ϧλʔϯ͕߹ͬͯͳ͍ͷ͔

Slide 31

Slide 31 text

WebϑϩϯτΤϯυଆͷਓʹҙݟΛฉ͍ͯΈΔ • ʮ͢Ͱʹ։ൃ͕͜ͳΕ͖͍ͯͯΔʯʮπʔϧνΣΠϯͷϊ΢ϋ΢΋ཷ·ͬͯ ͍Δʯ • ͦ΋ͦ΋ϑϩϯτΤϯυଆ͸TypeScriptΛશ໘తʹ࠾༻͍ͯͯ͠GraphQLͱ ૬ੑ͕ྑ͍ • ੈؒʹࣄྫ͕ᷓΕ͍ͯΔ૊Έ߹Θͤ • ୅ҊͷgRPC(Web͔Gateway)ͩͱ࢓૊Έ͔Βߏங͢Δ͜ͱʹͳΔ • ʮWebϑϩϯτΤϯυଆͷਓ͕GraphQLҎ֎Λ࠾༻͢Δಈػ͸ͳͦ͞͏ʯ

Slide 32

Slide 32 text

಄ΛϦηοτͯ͠GraphQLΛ͏·͘αʔόͰѻ ͏͜ͱΛߟ͑Δ • Perlͷ··͍͘ͷ͸೉ͦ͠͏ • ௚઀ѻ͏ʹ͸GraphQL.pm΄΅Ұ୒ͳͷͰ • खલʹapollo-serverཱͯͯREST APIͱ૬ޓม׵͢ΔͷͳΒ… • Go͸ࣄྫ͕গ͚ͩ͋͠ΔͬΆ͍ ϥΠϒϥϦ΋͍͔ͭ͋͘Δ • TypeScriptͰ࢖͑Δ੩తܕͷϝϦοτ΋GoͳΒड͚ΒΕΔ

Slide 33

Slide 33 text

͔͠͠GraphQLͷαʔόΛ࡞Δ͜ͱࣗମͷ໰୊ ΋͋Δ • DBʹରͯ͠N+1ΫΤϦ • ωετͨ͠ΓෳࡶͳΫΤϦΛೖΕΒΕͨͱ͖ʹDoSΈ͍ͨʹͳΒͳ͍ ͔ • Ωϟογϡ೉͍͠໰୊ • etc…etc…

Slide 34

Slide 34 text

͔͠͠GraphQLͷαʔόΛ࡞Δ͜ͱࣗମͷ໰୊ ΋͋Δ • DBʹରͯ͠N+1ΫΤϦ • ωετͨ͠ΓෳࡶͳΫΤϦΛೖΕΒΕͨͱ͖ʹDoSΈ͍ͨʹͳΒͳ͍ ͔ • Ωϟογϡ೉͍͠໰୊ • etc…etc… Ұճۤ࿑ͨ͠͠ ͳΜͱ͔ͳΔ͔ͳͱࢥͬͨ

Slide 35

Slide 35 text

ҰͭҰͭղܾ͍ͯ͘͠աఔ

Slide 36

Slide 36 text

GraphQLύʔαʔ/Resolver => gqlgen • εΩʔϚ͔ΒResolverΛࣗಈੜ੒͢ΔϥΠϒϥϦ

Slide 37

Slide 37 text

N+1ͷղ๏ => vektah/dataloaden • ӈͷ໰͍߹Θͤϓʔϧ ͷ෦෼Λࣗಈੜ੒͢Δ ϥΠϒϥϦ • Ұఆ࣌ؒ಺ͷಉ͡ςʔ ϒϧʹର͢ΔΫΤϦΛ ·ͱΊΒΕΔ

Slide 38

Slide 38 text

ෳࡶͳΫΤϦʹର͢Δख๏ • Query Complexity • ΫΤϦͷResolverΛ࣮ߦ͢Δલʹॏ͍ΫΤϦ͡Όͳ͍͔ௐ΂Δ • ۩ମతʹ͸ϖʔδϯάΛڧ੍͢ΔͳͲͯ͠औಘ͢Δ࠷େ݅਺ΛΫΤϦ Ͱ֬ఆͤ͞Δ => ᮢ஋Λ΋͏͚ͯ஄͘ • ϖʔδϯάܗࣜ => Relay Server Specification • Ҿ਺΍ϨεϙϯεܗࣜʹσϑΝΫτελϯμʔυ͕͋ΔͷͰ͜ΕΛ࢖͏

Slide 39

Slide 39 text

͜ͷลͷ࢓૊ΈͰٙ໰͸ղফͯ͠ ࠓ͸ຊ൪౤ೖʹ޲͚ͯಈ͍͍ͯΔͱ͜Ζ

Slide 40

Slide 40 text

͜͜ͰҰ۟ ྑༀ͸ ɹɹޱʹۤ͠ ɹɹɹɹGraphQL

Slide 41

Slide 41 text

·ͱΊ • GraphQLʹର͢Δ఍߅ײ͸Կͩͬͨͷ͔͕গ͠Θ͔ͬͨ • ͨͿΜࠓ·Ͱͷαʔόͷ࡞ΓํΛ੍ݶ͢Δ࢓༷ • ৽͍͠ύϥμΠϜͱ͢ΔͱɺڵຯΛ࣋ͬͯऔΓ૊Ίͨ • ৽͍ٕ͠ज़Λ࠾༻͢Δ͜ͱ͸ɺͦͷٕज़ͷະདྷʹϕοτ͢Δ͜ͱ • ϕοτ͢Δͱ͍͏͜ͱ͸ɺ͍͟ͱͳΕ͹OSSʹPull RequestΛग़ͨ͠Γɺϓ ϩδΣΫτ಺ʹ޿ΊΔΑ͏ͳओମతͳಈ͖͕ٻΊΒΕΔ • ͜͏΍ͬͯࣄྫΛग़͢ͷ΋ߩݙ͔΋͠Εͳ͍ͱࢥͬͯ΍ͬͯ·͢

Slide 42

Slide 42 text

͓·͚

Slide 43

Slide 43 text

ͭΒ͍΍ͭ: root queryͷnode • Relay Server Specificationʹྫࣔ͞Εͯ ͍Δ΍ͭ • ผʹඞਢͰ͸ͳ͍͕ɺΫϥΠΞϯτଆ͸ ͋Δͱศར • ΫϥΠΞϯταΠυͷΩϟογϡߋ৽ͷ ͨΊʹNodeͩͬͨΒͳΜͰ΋ฦͤΔ΍ͭ • αʔόαΠυ͸`ID`͚ͩͰͲͷܕ͔Λ൑ఆ ͠ͳ͚Ε͹ͳΒͳ͍

Slide 44

Slide 44 text

GitHubͷղ๏ idʹܕ৘ใຒΊࠐΜͰbase64Τϯίʔυ

Slide 45

Slide 45 text

GitHubͷղ๏ idʹܕ৘ใຒΊࠐΜͰbase64Τϯίʔυ

Slide 46

Slide 46 text

GitHubͷղ๏ idʹܕ৘ใຒΊࠐΜͰbase64Τϯίʔυ