GraphQL を利用したアーキテクチャの勘所 / Architecture practices with GraphQL

by qsona

Slide 1

Slide 1 text

GraphQL Λར༻ͨ͠ ΞʔΩςΫνϟͷצॴ @qsona 2021-04-21 iCARE Dev Meetup #20

Slide 2

Slide 2 text

whoami • @qsona • Web Engineer at Quipper Ltd • Microservices / Rails / Node.js / GraphQL ※ ຊࢿྉʹొ৔͢ΔϦϯΫ͸ Speaker Deck ͷ֓ཁཝʹ  ͢΂ͯࡌ͓͖ͤͯ·͢

Slide 3

Slide 3 text

Ϟνϕʔγϣϯ (1) • GraphQL ͸ൺֱత৽͍ٕ͠ज़Ͱɺ࠷ۙΑΓ஫໨͞Ε͍ͯΔ • େن໛ͳ։ൃʹऔΓೖΕͨΓɺطଘͷϓϩμΫτʹޙ͔Βಋೖ ͞ΕΔࣄྫͳͲ΋૿͖͍͑ͯͯΔ • GraphQL Λར༻ͨ͠ઃܭɾΞʔΩςΫνϟͷ  ॏཁੑ͕૿͍ͯ͠Δ

Slide 4

Slide 4 text

Ϟνϕʔγϣϯ (2) • طଘͷઃܭϊ΢ϋ΢Λ͏·͘औΓೖΕ͍ͨ • ٯʹɺGraphQL ͱऔΓ߹Θͤͷѱ͍ઃܭύλʔϯ͸  ͳΔ΂͘࢖͍ͨ͘ͳ͍ • GraphQL ͷઃܭͱ͏·͘෇͖߹͏ͨΊʹ  ݸਓతʹߟ͍͑ͯΔ੔ཧख๏΍ύλʔϯʹ͍ͭͯ࿩͍ͨ͠

Slide 5

Slide 5 text

Agenda • 1. GraphQL ͱΞʔΩςΫνϟ • Better Web API ͱͯ͠ͷ GraphQL • GraphQL as a Service (Hasura / AppSync) • 2. GraphQL ஫ҙ͢΂͖ύλʔϯू

Slide 6

Slide 6 text

1. GraphQL ͱΞʔΩςΫνϟ

Slide 7

Slide 7 text

GraphQL ͷಛ௃ • Web API ͱͯ͠ఏڙ͢Δ GraphQL Schema • ཉ͍͠σʔλΛऔಘ͢Δ Query • ্ͷ2͕ͭ෼཭͞Ε͍ͯΔ

Slide 8

Slide 8 text

Query ͱ Schema

Slide 9

Slide 9 text

ΞʔΩςΫνϟతଆ໘͔ΒݟΔ • GraphQL ʹ͍ͭͯΞʔΩςΫνϟతͳߟ࡯Λ͍ͯͨ͘͠Ίɺ  ͜ΕΒʹରԠ͢Δ֓೦ΛطଘͷޠኮͰׂΓ౰ͯͯΈΔͱ... • query <=> Usecase • Schema, Types <=> Resource • ͜ͷߟ͑ํΛϕʔεʹɺطଘͷΞʔΩςΫνϟͱͷ૊Έ߹ΘͤͳͲ ͷߟ࡯Λ͍͖͍ͯͨ͠

Slide 10

Slide 10 text

※ Usecaseͱ͸? Resourceͱ͸? (SBQI2-2VFSZ (SBQI2-4DIFNBBOE5ZQFT 6TFDBTF 3FTPVSDF 1SFTFOUBUJPO %PNBJO 4ZTUFNPG&OHBHFNFOU 4ZTUFNPG3FTPVSDF 'SPOUFOE #BDLFOE ྨࣅͷ֓೦  (ࣅͨΑ͏ͳํ๏ Ͱେ͖͘ೋ෼͠ ͍ͯΔྫ)

Slide 11

Slide 11 text

a) Better Web API ͱͯ͠ͷ GraphQL ઃܭख๏

Slide 12

Slide 12 text

Web API ͷઃܭख๏ • େ͖͘2௨Γ͋Δͱߟ͍͑ͯΔ • 1. Usecase ϕʔε • 2. Resource ϕʔε

Slide 13

Slide 13 text

Usecase-based Web API • ΫϥΠΞϯτͷϢʔεέʔεʹ߹Θͤͯ Web API Λ࡞Δ • Ϣʔεέʔε ≒ ը໘

Slide 14

Slide 14 text

Usecase-based Web API ͷ໰୊఺ • ࣅͨΑ͏ͳAPI͕ཚཱ͠΍͍͢ • ຖ౓API࡞Δͷ͕໘౗ =>  ෳ਺ͷϢʔεέʔεʹରԠ͢Δ ਆAPI ͕Ͱ͖Δ܏޲ • Usecase ͸มΘΓ΍͍͕͢ɺͦΕʹԠͯ͡ຖ౓APIΛमਖ਼͢Δඞཁ͕͋Δ • ޙํޓ׵ੑΛอͭͨΊʹɺमਖ਼Ͱ͸ͳ͘৽نAPI௥Ճ͕ඞཁʹͳΔ͜ͱ΋ ଟ͍

Slide 15

Slide 15 text

Resource-based Web API • ΞϓϦέʔγϣϯͦͷ΋ͷͷ࢓༷ʹ߹Θͤͯ Web API Λ࡞Δ • (جຊతʹ͸ API ఏڙଆͷ౎߹Ͱ࡞Δ) • ྫ: (஫ҙਂ͘ઃܭ͞Εͨ) RESTful API

Slide 16

Slide 16 text

Resource-based Web API • ໰୊఺: ΫϥΠΞϯτͷϢʔεέʔεʹ߹Θͳ͍͕࣌͋Δ • 1ը໘Ͱෳ਺ͷAPIϦΫΤετ͕ඞཁʹͳͬͨΓ • ٯʹ1ϦΫΤετதͰෆཁͳϑΟʔϧυ΋ؚΊͯऔͬͯ͠·͏͜ͱ͕͋Δ • (=> ύϑΥʔϚϯεͷѱԽ) • Resource ͕ࡉ͔͘ͳΓ͗ͯ͢ (ςʔϒϧ୯ҐͳͲ)  ΫϥΠΞϯτ͔Β࢖͍ʹ͍͘͜ͱ͕͋Δ

Slide 17

Slide 17 text

GraphQL Web API ઃܭͷצॴ • جຊతʹ Resource-based API ͱͯ͠࡞Δ (GraphQL ͷྑ͞Λ׆͔ͨ͢Ίʹ) • GraphQL Schema / Types ͕ Resource Λද͢ • query ͕ Usecase Λද͢ • Query Type ͷ ﬁeld ͕ endpoint Ͱ͋Δ • ͭ·ΓɺResource ϕʔεͷAPIͱ Usecase ϕʔεͷAPIͷ  ྑ͍ͱ͜ΖΛཱ྆Ͱ͖Δ!

Slide 18

Slide 18 text

GraphQL Web API ઃܭͷצॴ • ஫ҙਂ͘ Resource (≒ GraphQL Schema, Types) Λ  ఆ͍ٛͯ͘͠ඞཁ͕͋Δ • ৗʹߴ͍ϨϕϧͷϞσϦϯάྗ͕ٻΊΒΕΔ • Type ͷཻ౓Λ੔͑Δ (ςʔϒϧͱ1:1ͱ͸ݶΒͳ ͍) • (஫ҙਂ͘) RESTful API Λ࡞Δͱ͖ͱɺجຊతʹ͸ม ΘΒͳ͍

Slide 19

Slide 19 text

஫ҙਂ͍ Resource ઃܭ (※ ݸਓతͳϓϥΫςΟεͰ͢) • ·ͣ͸ Usecase Λ͖ͪΜͱཧղ͢Δ • ಉ࣌ʹɺσʔλઃܭΛΠϝʔδ͢Δ • ҎԼΛຬͨ͢εΩʔϚΛߟ͑Δ • ϢʔεέʔεΛࣗવʹຬͨͤΔ (ඞཁҎ্ʹෳࡶͳ query ΍ client ࣮૷ʹͳΒͳ͍) • σʔλઃܭ͔Βࣗવʹ resolvers ͷ࣮૷͕Ͱ͖Δ • Ϗδωεతͳڞ௨ཧղɾڞ௨ݴޠΛਖ਼͘͠൓ө͍ͯ͠Δ

Slide 20

Slide 20 text

GraphQL Web API ࣮૷ͷ೰Έॴ (֓ཁ) • (RESTful API ʹൺ΂ͯ) ΫΤϦͷࣗ༝౓͕ߴ͗͢Δ͜ͱʹΑΓ  ύϑΥʔϚϯε௿ԼΛҾ͖ى͜͢Մೳੑ͕͋Δ • యܕతʹ͸ N+1 ໰୊ • ରॲ๏ • Dataloader Pattern • Ϣʔεέʔεͷ؅ཧͱଥڠ

Slide 21

Slide 21 text

ྫ) Ұཡը໘ͱৄࡉը໘ • Ұཡը໘ (֤߲໨ͷ৘ใྔ: গ) • => ৄࡉը໘ (৘ใྔ: ଟ)

Slide 22

Slide 22 text

RESTful API ͷ৔߹ Α͋͘Δઃܭख๏ • Ұཡը໘: GET /posts • ഑ྻΛฦ͢ • 1݅ͣͭͷ৘ใྔ͸গͳ͍ • ৄࡉը໘: GET /posts/:id • ৘ใྔΛଟ͘͢Δ

Slide 23

Slide 23 text

GraphQL API ͷ৔߹ • Schema ͸ 1ͭͰ྆ํʹରԠ͢Δ • Usecase Λجຊతʹҙࣝ͠ͳ͍ • Ұཡը໘ɺৄࡉը໘ͦΕͧΕͰ  ඞཁͳσʔλΛऔಘ͢Δ query Λॻ͘

Slide 24

Slide 24 text

GraphQL API ͷ৔߹

Slide 25

Slide 25 text

GraphQL API ಛ༗ͷ՝୊ • posts (഑ྻ) Λɺத਎ͷৄࡉ·Ͱऔಘ͢Δ  ΫΤϦ΋ॻ͚ͯ͠·͏ • αʔόʔଆͰద੾ʹରԠ͍ͯ͠ͳ͍৔߹ɺ  N+1 ໰୊͕ى͖ͨΓ͢Δ

Slide 26

Slide 26 text

Dataloader ύλʔϯ • యܕతʹ͸ Dataloader ύλʔϯΛద༻͢΂͖ • resolver Λ஗ԆධՁ͠ɺόονͰ࣮ߦ͢Δ࢓૊Έ • ͕ɺͦ͏؆୯ʹ͍͔ͳ͍৔߹΋͋Δ • ྫ: author Ͱ͸ͳ͘ authors (ෳ਺) Ͱɺ  ιʔεͱͳΔςʔϒϧ͕ෳ਺͋Γɺ͞Βʹιʔτ͕ඞཁ...  ͷΑ͏ͳෳࡶͳέʔεͩͱ Dataloader Λద༻͢Δͷ͕೉͍͠৔߹͕͋Δ

Slide 27

Slide 27 text

Ϣʔεέʔεͷ؅ཧͱଥڠ • ݪཧతʹӈͷΑ͏ͳΫΤϦ͕࣮ߦՄೳͱ͍͏͜ͱͱɺ ࣮ࡍʹ౤͛ΒΕΔ͜ͱ͕͋Δ͔Ͳ͏͔͸ผ໰୊ • ࣮ࡍʹ౤͛ΒΕΔ͜ͱ͕ͳ͍ͳΒɺ໰୊΋ى͖ͳ͍ͷ Ͱରॲෆཁ • => ͦͷΑ͏ͳϢʔεέʔε͕ଘࡏ͠ͳ͍ɺ͜ͱ͕෼ ͔͍ͬͯΕ͹Α͍ • ग़͖ͯͨΒରॲ͢Δ or ͦ΋ͦ΋ېࢭ͢Δ

Slide 28

Slide 28 text

Persisted Queries (ҎԼ͸ӡ༻ํ๏ͷҰྫ) • ΫϥΠΞϯτ͕౤͛͏ΔΫΤϦΛɺࣄલʹ GraphQL API αʔόʔʹొ࿥͢Δख๏ • ΫϥΠΞϯτͷϏϧυɾσϓϩΠ࣌ʹ Pull Request Λ౤͛Δ • Backend ΤϯδχΞ͕֬ೝ͠ɺ໰୊ͳ͚Ε͹Ϛʔδ • N+1 ໰୊ෆՄආͷΑ͏ͳΫΤϦͷ৔߹ɺFrontend ΤϯδχΞͱ૬ஊ͠ɺͲ͏ͯ͠΋ඞཁͳΒ αʔόʔଆͰରԠ͢Δ • ొ࿥͞ΕͨΫΤϦҎ֎͸ɺ஄͘Α͏ʹ͓ͯ͘͠

Slide 29

Slide 29 text

Persisted Queries Λར༻͢ΔϝϦοτ • ϢʔεέʔεΛαʔόʔαΠυͰ؅ཧͰ͖Δ • αʔόʔαΠυͰ࠷దԽ͢΂͖ resolvers ͕ͲΕ͔Θ͔Δ • API ͷഁյతมߋ/ഇࢭ͕εϜʔζʹߦ͑Δ • ϦΫΤετͷϖΠϩʔυΛݮΒͤΔ • Query ͝ͱʹ id ΛৼͬͨΓ hash ஋Λܭࢉ͓͖ͯ͠ɺ  ࣮ࡍͷϦΫΤετͰ͸ Query ͦͷ΋ͷͰ͸ͳ͘ id / hash஋ΛૹΔ • POST Ͱ͸ͳ͘ GET ϦΫΤετ΋࢖͑ΔΑ͏ʹͳΔ => ΩϟογϡՄೳʹ

Slide 30

Slide 30 text

Better Web API ͱͯ͠ͷ GraphQL ઃܭख๏ ·ͱΊ • Resource-based API ͱͯ͠ઃܭ͢Δ • ҰํɺUsecase (query) ͷ͜ͱ΋  ͋Δఔ౓ཧղ͠ͳ͕Βઃܭ͢ΔͱΑ͍ • ࢖͍΍͍͢ API ʹͳΔ • ࠷దԽΛޙճ͠ʹͰ͖Δ

Slide 31

Slide 31 text

b) GraphQL as a Service (Hasura / AppSync)

Slide 32

Slide 32 text

GraphQL as a Service • ΋ͱ΋ͱ GraphQL ͸ Web API Λ૝ఆͯ͠࡞ΒΕͨ • ͦͷޙɺDatastore ʹରͯ͠ GraphQL ͱͯ͠ΫΤϦͰ͖Δ  ϥΠϒϥϦ/੡඼͕ొ৔ͨ͠ • Graphcool (ऴྃ), Prisma 1 (৽ن։ൃͳ͠), PostGraphile • Web API Λࣗ෼Ͱ࣮૷͠ͳͯ͘΋ɺσʔλετΞΛ༻ҙ͢Δ͚ͩͰ  ؆୯ʹ GraphQL Web API ΛఏڙͰ͖ΔαʔϏε͕ొ৔ͨ͠ • Hasura, AppSync (͜ΕΒΛҰ୴উखʹ GraphQL as a Service ͱݺͿ͜ͱʹ͠·͢)

Slide 33

Slide 33 text

΋͸΍ SQL ͱԿ͕ҧ͏ͷ͔...?

Slide 34

Slide 34 text

֦ுੑͷߴ͍ GraphQL as a Service • Resolvers ͱͯ͠ɺσʔλετΞݺͼग़͠Ҏ֎΋બ୒Ͱ͖Δ • AppSync: AWS Lambda, HTTP resolvers • Hasura: Remote Schema • ಛʹ Hasura ͷ৔߹ɺ࠷ऴతʹ͸୯ͳΔ GraphQL Gateway  ͱͯ͠ଘࡏͰ͖Δ

Slide 35

Slide 35 text

ࣄྫ: dinii ࣾ͞Μͷ Hasura ͷ࢖͍ํ • গ਺ (5%) ͷ Query ͱ  ଟ਺ (80%) ͷ Mutation Λ  ผཱͯͷGraphQL αʔόʔʹྲྀ ͍ͯ͠Δ • ։ൃ͕ෳࡶԽ͢ΔʹͭΕɺ͜ͷ ׂ߹͸૿͍͑ͯ͘ͷͰ͸ͳ͍͔ (qsona ͷݟղͰ͢) Ҿ༻ݩ: ʲΤϯδχΞϒϩάʳμΠχʔͷΤϯδχΞϦϯά3Χ৚ʛdiniiʢμΠχʔʣެࣜʛnote https://note.com/dinii/n/n9be778bd7da3

Slide 36

Slide 36 text

Command - Query Separation • Query ͷ΄ͱΜͲͰ Hasura Λ  ௚઀࢖͍͑ͯΔɺศར • ҰํͰ Mutation ͸جຊతʹಛ༗ ͷυϝΠϯϩδοΫ͕ඞཁʹͳͬ ͯ͘Δ͜ͱ͕ଟ͍ • => CQS ύλʔϯʹ͍ۙ

Slide 37

Slide 37 text

ॳظ࣮૷ίετ௿ + কདྷతͳ֦ு˕ Hasura ͷྑͦ͞͏ͳͱ͜Ζ • ॳظ͸ Hasura ͷ API Λͦͷ··࢖͏͜ͱͰɺ࣮૷ίετΛԼ͛ΒΕΔ • ࣮૷͕ෳࡶʹͳ͖ͬͯͨΒ Remote Schema Λ׆༻͠ɺ  ϩδοΫΛόοΫΤϯυʹد͍ͤͯ͘ɻ  কདྷతͳ֦ுੑ΋୲อͰ͖Δ • (ݸਓతʹ͸ Firebase ΑΓ΋༗๬ࢹ͍ͯ͠·͕͢ɺͲͪΒ΋·ͩ࢖ͬͨ͜ͱͳ͍...)

Slide 38

Slide 38 text

2. GraphQL ஫ҙ͢΂͖ύλʔϯू

Slide 39

Slide 39 text

"Ξϯνύλʔϯ" Ͱ͸ͳ͍͕... • ͜Ε͔Β঺հ͢Δύλʔϯ͸ʮΞϯνύλʔϯʯͰ͸ͳ͍ • ঢ়گʹΑͬͯ͸༗༻ • ಛʹɺҰఆҎ্ͷେن໛։ൃʹ͓͍ͯ͸ඞཁʹͳΓͦ͏͕ͩɺ  ॳख͔Β࢖͏ͱ GraphQL ͷྑ͞Λࡴ͢Մೳੑ͕ߴ͘ɺ  ؾΛ͚ͭͨ΄͏͕Α͍ύλʔϯ

Slide 40

Slide 40 text

ύλʔϯ1: GraphQL as BFF

Slide 41

Slide 41 text

BFF (Backends for Frontends) • Microservices จ຺ͰΑ͘ొ৔͢Δ • Frontend ͷͨΊʹαʔόʔΛཱͯɺ Backend Services Λू໿ͯ͠ Frontend ޲͚ͷ API Λఏڙ͢Δύλʔϯ • Frontend ΤϯδχΞ͕։ൃɾӡ༻͢Δ ͜ͱ͕ਪ঑͞ΕΔ

Slide 42

Slide 42 text

GraphQL as BFF • Backend APIs ͸యܕతʹ͸ REST ΍ gRPC ͳͲͰఏڙ͞Ε͍ͯΔͱ͢Δ • BFF ͱͯ͠ GraphQL API αʔόʔΛ ࡞Δύλʔϯ

Slide 43

Slide 43 text

GraphQL for server-side resource aggregation | Technology Radar | ThoughtWorks https://www.thoughtworks.com/radar/techniques/graphql-for-server-side-resource-aggregation

Slide 44

Slide 44 text

GraphQL for server-side resource aggregation | Technology Radar | ThoughtWorks https://www.thoughtworks.com/radar/techniques/graphql-for-server-side-resource-aggregation HOLD (qsona ͷݟղͰ͢)

Slide 45

Slide 45 text

GraphQL as BFF ͷ໰୊఺ • BFF ͱ͸ͦ΋ͦ΋ Frontend ͷͨΊͷ Usecase Λఆٛ͢Δ૚ • GraphQL Λར༻͢Δͱɺquery ͕ Usecase ʹͳΔ • => Usecase ͕2૚ʹͳΓɺ໾ׂ͕ඃΔ

Slide 46

Slide 46 text

GraphQL as BFF ͷ۩ମతͳ໰୊఺ • Backend APIs (REST/RPC) Λ GraphQL ʹม׵͢Δίετ͕ߴ͍ • ୯ͳΔϓϩτίϧͷม׵͚ͩͰͳ͘ɺ GraphQL resolvers ʹม׵͢Δ্Ͱຊ࣭తͳΠϯ ϐʔμϯεϛεϚον͕ଘࡏ͢Δ • ͞·͟·ͳ Usecase ʹରԠ͠͏Δ Schema Λ  ϝϯςφϯε͚ͭͮ͠Δίετ • ҰํͰɺ࢖ΘΕΔ Usecase ͸ݶΒΕ͍ͯΔ • ࢖͏ͷ͸ࣗ෼͚ͨͪͩ (શੈքʹެ։͢ΔΘ͚Ͱ͸ͳ͍)

Slide 47

Slide 47 text

୅ସख๏ͷఏҊ (1) • BFF Λ Usecase-based API ͱͯ͠࡞Δ • ϓϩτίϧ͸ JSON over HTTP Ͱ΋͍͍͠ɺ  RPC ܥͷԿ͔Λ࢖ͬͯ΋Α͍ • GraphQL ͸ར༻͠ͳ͍ • (͜ͷ࿏ઢͰ BFF Λ࡞Δ৔߹ɺ  ྑ͚Ε͹ӈͷࢿྉΛࢀߟʹͯ͠Έ͍ͯͩ͘͞)

Slide 48

Slide 48 text

୅ସख๏ͷఏҊ (2) • Backend Services GraphQL API ͱ࣮ͯ͠૷͢Δ • GraphQL Gateway αʔϏεΛஔ͘ • ٕज़ͱͯ͠͸ Schema Stitching ΍ Apollo Federation Λݕ౼ • => ϓϩτίϧͷม׵ΛखͰ΍Δඞཁ͕ͳ͘ͳΔ • GraphQL Gateway ͸ Backend دΓͷΤϯδχΞ͕؅ཧ͢Δ • جຊతʹ Backend ͷ΋ͷΛ࢖͍΍͘͢͢Δ͚ͩͰɺϩδοΫ͸جຊతʹஔ͔ͳ͍

Slide 49

Slide 49 text

PR: Quipper ʹ͓͚Δ GraphQL ׆༻ࣄྫ঺հ

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

৽ن։ൃϓϩδΣΫτʹ͍ͭͯ • ։ൃ͢Δ΋ͷ • iOS / Android / PC Web Apps • Backend APIs • ίϯςϯπΛ؅ཧ͢ΔγεςϜ • ։ൃظؒ: > 1೥ • ։ൃऀͷਓ਺: > 10ਓ

Slide 52

Slide 52 text

৽ن։ൃʹ GraphQL Λશ໘࠾༻ • client => gateway => backends  શମͰ GraphQL Λ࠾༻ • gateway ͸ schema stitching Λར༻͍ͯ͠Δ • ͦͷଞར༻ٕज़ • Ruby on Rails • Node.js + TypeScript + Apollo Server + Prisma 2 • React, Apollo Client

Slide 53

Slide 53 text

GraphQL ࠾༻ͷಈػ • native devs (iOS/Android) ͱ web devs (Backend + Web Frontend) Ͱ  ͏·͘ڠಇͰ͖ΔΑ͏ʹ͔ͨͬͨ͠ • => Schema-Driven Development Λ࠾༻͍ͨ͠ • (ҰํͰ BFF ύλʔϯΛճආ͔ͨͬͨ͠) • ͞ΒʹɺͰ͖Δ͚ͩશମͷ։ൃ޻਺΋ݮΒ͍ͨ͠

Slide 54

Slide 54 text

GraphQL Λશ໘࠾༻ͯ͠Α͔ͬͨ͜ͱ • Schema-Driven Development ʹΑΓ  ίϛϡχέʔγϣϯͷϩε͕গͳ͘ɺ  ҆ఆͯ͠։ൃΛਐΊΒΕͨ • ܨ͗͜Έ͕௒εϜʔζ • backend / frontend ͦΕͧΕ ~9ϲ݄։ൃͨ͠΋ͷΛ  1िؒͰશ෦ܨ͗͜Έ׬ྃͨ͠ • GraphQL Gateway ͕ͱͯ΋ศརͰɺ͔ͭ  ։ൃ޻਺͕΄΅͔͔Βͳ͍

Slide 55

Slide 55 text

We're hiring! • ͻ͖͖ͭͮɺઈࢍ৽ن։ൃதͰ͢! • ӡ༻ϑΣʔζʹ޲͚ͯɺ͞ΒͳΔٕज़νϟϨϯδΛ͍͖͍ͯͨ͠ • ྫ) Persisted Queries ͷϑϩʔ੔උ, Apollo Federation ͷݕ౼, etc... • GraphQL, Microservices ͸΋ͪΖΜ  ϑϩϯτΤϯυ͔ΒόοΫΤϯυ·Ͱ  ޿͍ٕज़ʹ৮ΕΒΕΔػձ͋Γ • ·ͣ͸ΧδϡΞϧ໘ஊ͔Βɺͥͻ͝Ԡื͍ͩ͘͞ 😁

Slide 56

Slide 56 text

ؓ࿩ٳ୊

Slide 57

Slide 57 text

ύλʔϯ2: Repository pattern on Client-side GraphQL

Slide 58

Slide 58 text

Repository ύλʔϯ • API ݺͼग़͠(ͳͲ)Λϥοϓ͠ɺ  Domain Model Λฦ͢ϨΠϠʔ • Usecase ͔Β࢖ΘΕΔ • API ҎԼͷ۩ମతͳৄࡉΛӅṭ͢Δ͜ͱ͕Ͱ͖Δ • "෗ഊ๷ࢭ૚"

Slide 59

Slide 59 text

Repository ύλʔϯͱ GraphQL • ͋·Γ૬ੑ͕Α͘ͳ͍ • Usecase ==> Repository ==[query]==> GraphQL API • query ͸ Usecase Ͱ͋Δͱଊ͑Δͱ  Domain ͷ૚͕ Usecase Λ஌͍ͬͯΔ͜ͱʹͳΓɺ͓͔͍͠ • => query ͕ Usecase Λදͤͳ͘ͳΓɺGraphQL ͷྑ͕͞ੜ͖ʹ͍͘ • over-fetching ͳͲͷ໰୊͕ى͖΍͘͢ͳΔ

Slide 60

Slide 60 text

୅ସख๏ͷఏҊ • GraphQL Schema ΛυϝΠϯ஌ࣝ๛෋ͳ΋ͷͱͯ͠ɺ  ͦ΋ͦ΋෗ഊ͠ͳ͍Α͏ʹ͢Δ • ͦͷυϝΠϯ஌ࣝΛΫϥΠΞϯτͱ΋ڞ༗͢Δ • αʔόʔαΠυ·ͰؚΊͨΞʔΩςΫνϟͱଊ͑Δͱྑ͍ • ΫϥΠΞϯτΤϯδχΞ΋ GraphQL Schema ͷઃܭʹੵۃతʹؔ ΘΔͷ͕ཧ૝

Slide 61

Slide 61 text

Fragment Colocation • GraphQL ͷॏཁͳಛ௃ͱ͠ ͯɺ1ϦΫΤετͰಉ࣌ʹෳ ਺ͷϦιʔεΛऔಘͰ͖Δ • ͦͷಛ௃Λ׆༻ͭͭ͠΋ɺ Usecase Λద੾ʹ෼ׂ͍ͨ͠

Slide 62

Slide 62 text

Fragment Colocation • ྫ: 1ը໘಺ʹෳ਺ͷ Usecase / Component ͕͋Γɺ  ͦΕΒͷσʔλऔಘΛ1ϦΫΤετʹ·ͱΊ͍ͨ • Usecase (Component) ͸  ଟஈʹͳ͍ͬͯΔ (ωετ) ͜ͱ΋͋Δ • ֤ Usecase / Component ͝ͱʹ fragment Λ΋ͭ (colocation) • ্Ґͷ Usecase Ͱ fragment Λ·ͱΊͯ1ͭͷ query ʹ͢Δ

Slide 63

Slide 63 text

·ͱΊ

Slide 64

Slide 64 text

GraphQL ͱΞʔΩςΫνϟ·ͱΊ • query ͕ Usecase  Schema / Types ͕ Resource Ͱ͋Δɺͱଊ͑Α͏ • ͦͷ্Ͱɺطଘͷઃܭख๏ͱ૊Έ߹Θͤͯߟ͑Α͏ • Client / Server ͷہॴతͳࢹ఺͚ͩͰͳ͘ɺ  େہతʹݟͯઃܭ͠Α͏

Slide 65

Slide 65 text

Thank you for listening! • ొ৔ͨ͠ϦϯΫ͸ Speaker Deck ͷ֓ཁཝʹ  ͢΂ͯࡌ͓͖ͤͯ·͢