Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

942bb606679caf4c57b38927f83178e1?s=47 qsona
April 21, 2021

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

iCARE Dev Meetup 20 で発表した資料です #icare_meetup

p.7,8,61 https://graphql.org/
p.18 https://twitter.com/a_suenami/status/1379270185207484417
p.33 [SQLQL - Qiita](https://qiita.com/yancya/items/4b7979d83cbf6af9b819)
p.33 https://twitter.com/onk/status/912491093127598080
p.35 [【エンジニアブログ】ダイニーのエンジニアリング3カ条|dinii(ダイニー)公式|note](https://note.com/dinii/n/n9be778bd7da3)
p.36 [Smart UI パターンが再評価される世界 - id:onk のはてなブログ](https://onk.hatenablog.jp/entry/2020/11/11/024531)
p.41 [Sam Newman - Backends For Frontends](https://samnewman.io/patterns/architectural/bff/)
p.43 [GraphQL for server-side resource aggregation | Technology Radar | ThoughtWorks](https://www.thoughtworks.com/radar/techniques/graphql-for-server-side-resource-aggregation)
p.47 [DroidKaigi 2019 登壇報告 "Server-side Kotlin for Frontend: 複雑なAndroidアプリ開発に対するアプローチ"|qsona|note](https://note.com/qsona/n/nf927588011b4)
p.50 [Quipper Japan | 採用情報](https://career.quipper.com/jp/)
p.54 [Schema-Driven Development とアジャイルなチーム|qsona|note](https://note.com/qsona/n/nfc73a8e82dff)

942bb606679caf4c57b38927f83178e1?s=128

qsona

April 21, 2021
Tweet

Transcript

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

  2. whoami • @qsona • Web Engineer at Quipper Ltd •

    Microservices / Rails / Node.js / GraphQL ※ ຊࢿྉʹొ৔͢ΔϦϯΫ͸ Speaker Deck ͷ֓ཁཝʹ
 ͢΂ͯࡌ͓͖ͤͯ·͢
  3. Ϟνϕʔγϣϯ (1) • GraphQL ͸ൺֱత৽͍ٕ͠ज़Ͱɺ࠷ۙΑΓ஫໨͞Ε͍ͯΔ • େن໛ͳ։ൃʹऔΓೖΕͨΓɺطଘͷϓϩμΫτʹޙ͔Βಋೖ ͞ΕΔࣄྫͳͲ΋૿͖͍͑ͯͯΔ • GraphQL

    Λར༻ͨ͠ઃܭɾΞʔΩςΫνϟͷ
 ॏཁੑ͕૿͍ͯ͠Δ
  4. Ϟνϕʔγϣϯ (2) • طଘͷઃܭϊ΢ϋ΢Λ͏·͘औΓೖΕ͍ͨ • ٯʹɺGraphQL ͱऔΓ߹Θͤͷѱ͍ઃܭύλʔϯ͸
 ͳΔ΂͘࢖͍ͨ͘ͳ͍ • GraphQL

    ͷઃܭͱ͏·͘෇͖߹͏ͨΊʹ
 ݸਓతʹߟ͍͑ͯΔ੔ཧख๏΍ύλʔϯʹ͍ͭͯ࿩͍ͨ͠
  5. Agenda • 1. GraphQL ͱΞʔΩςΫνϟ • Better Web API ͱͯ͠ͷ

    GraphQL • GraphQL as a Service (Hasura / AppSync) • 2. GraphQL ஫ҙ͢΂͖ύλʔϯू
  6. 1. GraphQL ͱΞʔΩςΫνϟ

  7. GraphQL ͷಛ௃ • Web API ͱͯ͠ఏڙ͢Δ GraphQL Schema • ཉ͍͠σʔλΛऔಘ͢Δ

    Query • ্ͷ2͕ͭ෼཭͞Ε͍ͯΔ
  8. Query ͱ Schema

  9. ΞʔΩςΫνϟతଆ໘͔ΒݟΔ • GraphQL ʹ͍ͭͯΞʔΩςΫνϟతͳߟ࡯Λ͍ͯͨ͘͠Ίɺ
 ͜ΕΒʹରԠ͢Δ֓೦ΛطଘͷޠኮͰׂΓ౰ͯͯΈΔͱ... • query <=> Usecase •

    Schema, Types <=> Resource • ͜ͷߟ͑ํΛϕʔεʹɺطଘͷΞʔΩςΫνϟͱͷ૊Έ߹ΘͤͳͲ ͷߟ࡯Λ͍͖͍ͯͨ͠
  10. ※ Usecaseͱ͸? Resourceͱ͸? (SBQI2-2VFSZ (SBQI2-4DIFNBBOE5ZQFT 6TFDBTF 3FTPVSDF 1SFTFOUBUJPO %PNBJO 4ZTUFNPG&OHBHFNFOU

    4ZTUFNPG3FTPVSDF 'SPOUFOE #BDLFOE ྨࣅͷ֓೦
 (ࣅͨΑ͏ͳํ๏ Ͱେ͖͘ೋ෼͠ ͍ͯΔྫ)
  11. a) Better Web API ͱͯ͠ͷ GraphQL ઃܭख๏

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

    2. Resource ϕʔε
  13. Usecase-based Web API • ΫϥΠΞϯτͷϢʔεέʔεʹ߹Θͤͯ Web API Λ࡞Δ • Ϣʔεέʔε

    ≒ ը໘
  14. Usecase-based Web API ͷ໰୊఺ • ࣅͨΑ͏ͳAPI͕ཚཱ͠΍͍͢ • ຖ౓API࡞Δͷ͕໘౗ =>
 ෳ਺ͷϢʔεέʔεʹରԠ͢Δ

    ਆAPI ͕Ͱ͖Δ܏޲ • Usecase ͸มΘΓ΍͍͕͢ɺͦΕʹԠͯ͡ຖ౓APIΛमਖ਼͢Δඞཁ͕͋Δ • ޙํޓ׵ੑΛอͭͨΊʹɺमਖ਼Ͱ͸ͳ͘৽نAPI௥Ճ͕ඞཁʹͳΔ͜ͱ΋ ଟ͍
  15. Resource-based Web API • ΞϓϦέʔγϣϯͦͷ΋ͷͷ࢓༷ʹ߹Θͤͯ Web API Λ࡞Δ • (جຊతʹ͸

    API ఏڙଆͷ౎߹Ͱ࡞Δ) • ྫ: (஫ҙਂ͘ઃܭ͞Εͨ) RESTful API
  16. Resource-based Web API • ໰୊఺: ΫϥΠΞϯτͷϢʔεέʔεʹ߹Θͳ͍͕࣌͋Δ • 1ը໘Ͱෳ਺ͷAPIϦΫΤετ͕ඞཁʹͳͬͨΓ • ٯʹ1ϦΫΤετதͰෆཁͳϑΟʔϧυ΋ؚΊͯऔͬͯ͠·͏͜ͱ͕͋Δ

    • (=> ύϑΥʔϚϯεͷѱԽ) • Resource ͕ࡉ͔͘ͳΓ͗ͯ͢ (ςʔϒϧ୯ҐͳͲ)
 ΫϥΠΞϯτ͔Β࢖͍ʹ͍͘͜ͱ͕͋Δ
  17. GraphQL Web API ઃܭͷצॴ • جຊతʹ Resource-based API ͱͯ͠࡞Δ (GraphQL

    ͷྑ͞Λ׆͔ͨ͢Ίʹ) • GraphQL Schema / Types ͕ Resource Λද͢ • query ͕ Usecase Λද͢ • Query Type ͷ field ͕ endpoint Ͱ͋Δ • ͭ·ΓɺResource ϕʔεͷAPIͱ Usecase ϕʔεͷAPIͷ
 ྑ͍ͱ͜ΖΛཱ྆Ͱ͖Δ!
  18. GraphQL Web API ઃܭͷצॴ • ஫ҙਂ͘ Resource (≒ GraphQL Schema,

    Types) Λ
 ఆ͍ٛͯ͘͠ඞཁ͕͋Δ • ৗʹߴ͍ϨϕϧͷϞσϦϯάྗ͕ٻΊΒΕΔ • Type ͷཻ౓Λ੔͑Δ (ςʔϒϧͱ1:1ͱ͸ݶΒͳ ͍) • (஫ҙਂ͘) RESTful API Λ࡞Δͱ͖ͱɺجຊతʹ͸ม ΘΒͳ͍
  19. ஫ҙਂ͍ Resource ઃܭ (※ ݸਓతͳϓϥΫςΟεͰ͢) • ·ͣ͸ Usecase Λ͖ͪΜͱཧղ͢Δ •

    ಉ࣌ʹɺσʔλઃܭΛΠϝʔδ͢Δ • ҎԼΛຬͨ͢εΩʔϚΛߟ͑Δ • ϢʔεέʔεΛࣗવʹຬͨͤΔ (ඞཁҎ্ʹෳࡶͳ query ΍ client ࣮૷ʹͳΒͳ͍) • σʔλઃܭ͔Βࣗવʹ resolvers ͷ࣮૷͕Ͱ͖Δ • Ϗδωεతͳڞ௨ཧղɾڞ௨ݴޠΛਖ਼͘͠൓ө͍ͯ͠Δ
  20. GraphQL Web API ࣮૷ͷ೰Έॴ (֓ཁ) • (RESTful API ʹൺ΂ͯ) ΫΤϦͷࣗ༝౓͕ߴ͗͢Δ͜ͱʹΑΓ


    ύϑΥʔϚϯε௿ԼΛҾ͖ى͜͢Մೳੑ͕͋Δ • యܕతʹ͸ N+1 ໰୊ • ରॲ๏ • Dataloader Pattern • Ϣʔεέʔεͷ؅ཧͱଥڠ
  21. ྫ) Ұཡը໘ͱৄࡉը໘ • Ұཡը໘ (֤߲໨ͷ৘ใྔ: গ) • => ৄࡉը໘ (৘ใྔ:

    ଟ)
  22. RESTful API ͷ৔߹ Α͋͘Δઃܭख๏ • Ұཡը໘: GET /posts • ഑ྻΛฦ͢

    • 1݅ͣͭͷ৘ใྔ͸গͳ͍ • ৄࡉը໘: GET /posts/:id • ৘ใྔΛଟ͘͢Δ
  23. GraphQL API ͷ৔߹ • Schema ͸ 1ͭͰ྆ํʹରԠ͢Δ • Usecase Λجຊతʹҙࣝ͠ͳ͍

    • Ұཡը໘ɺৄࡉը໘ͦΕͧΕͰ
 ඞཁͳσʔλΛऔಘ͢Δ query Λॻ͘
  24. GraphQL API ͷ৔߹

  25. GraphQL API ಛ༗ͷ՝୊ • posts (഑ྻ) Λɺத਎ͷৄࡉ·Ͱऔಘ͢Δ
 ΫΤϦ΋ॻ͚ͯ͠·͏ • αʔόʔଆͰద੾ʹରԠ͍ͯ͠ͳ͍৔߹ɺ


    N+1 ໰୊͕ى͖ͨΓ͢Δ
  26. Dataloader ύλʔϯ • యܕతʹ͸ Dataloader ύλʔϯΛద༻͢΂͖ • resolver Λ஗ԆධՁ͠ɺόονͰ࣮ߦ͢Δ࢓૊Έ •

    ͕ɺͦ͏؆୯ʹ͍͔ͳ͍৔߹΋͋Δ • ྫ: author Ͱ͸ͳ͘ authors (ෳ਺) Ͱɺ
 ιʔεͱͳΔςʔϒϧ͕ෳ਺͋Γɺ͞Βʹιʔτ͕ඞཁ...
 ͷΑ͏ͳෳࡶͳέʔεͩͱ Dataloader Λద༻͢Δͷ͕೉͍͠৔߹͕͋Δ
  27. Ϣʔεέʔεͷ؅ཧͱଥڠ • ݪཧతʹӈͷΑ͏ͳΫΤϦ͕࣮ߦՄೳͱ͍͏͜ͱͱɺ ࣮ࡍʹ౤͛ΒΕΔ͜ͱ͕͋Δ͔Ͳ͏͔͸ผ໰୊ • ࣮ࡍʹ౤͛ΒΕΔ͜ͱ͕ͳ͍ͳΒɺ໰୊΋ى͖ͳ͍ͷ Ͱରॲෆཁ • => ͦͷΑ͏ͳϢʔεέʔε͕ଘࡏ͠ͳ͍ɺ͜ͱ͕෼

    ͔͍ͬͯΕ͹Α͍ • ग़͖ͯͨΒରॲ͢Δ or ͦ΋ͦ΋ېࢭ͢Δ
  28. Persisted Queries (ҎԼ͸ӡ༻ํ๏ͷҰྫ) • ΫϥΠΞϯτ͕౤͛͏ΔΫΤϦΛɺࣄલʹ GraphQL API αʔόʔʹొ࿥͢Δख๏ • ΫϥΠΞϯτͷϏϧυɾσϓϩΠ࣌ʹ

    Pull Request Λ౤͛Δ • Backend ΤϯδχΞ͕֬ೝ͠ɺ໰୊ͳ͚Ε͹Ϛʔδ • N+1 ໰୊ෆՄආͷΑ͏ͳΫΤϦͷ৔߹ɺFrontend ΤϯδχΞͱ૬ஊ͠ɺͲ͏ͯ͠΋ඞཁͳΒ αʔόʔଆͰରԠ͢Δ • ొ࿥͞ΕͨΫΤϦҎ֎͸ɺ஄͘Α͏ʹ͓ͯ͘͠
  29. Persisted Queries Λར༻͢ΔϝϦοτ • ϢʔεέʔεΛαʔόʔαΠυͰ؅ཧͰ͖Δ • αʔόʔαΠυͰ࠷దԽ͢΂͖ resolvers ͕ͲΕ͔Θ͔Δ •

    API ͷഁյతมߋ/ഇࢭ͕εϜʔζʹߦ͑Δ • ϦΫΤετͷϖΠϩʔυΛݮΒͤΔ • Query ͝ͱʹ id ΛৼͬͨΓ hash ஋Λܭࢉ͓͖ͯ͠ɺ
 ࣮ࡍͷϦΫΤετͰ͸ Query ͦͷ΋ͷͰ͸ͳ͘ id / hash஋ΛૹΔ • POST Ͱ͸ͳ͘ GET ϦΫΤετ΋࢖͑ΔΑ͏ʹͳΔ => ΩϟογϡՄೳʹ
  30. Better Web API ͱͯ͠ͷ GraphQL ઃܭख๏ ·ͱΊ • Resource-based API

    ͱͯ͠ઃܭ͢Δ • ҰํɺUsecase (query) ͷ͜ͱ΋
 ͋Δఔ౓ཧղ͠ͳ͕Βઃܭ͢ΔͱΑ͍ • ࢖͍΍͍͢ API ʹͳΔ • ࠷దԽΛޙճ͠ʹͰ͖Δ
  31. b) GraphQL as a Service (Hasura / AppSync)

  32. GraphQL as a Service • ΋ͱ΋ͱ GraphQL ͸ Web API

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

  34. ֦ுੑͷߴ͍ GraphQL as a Service • Resolvers ͱͯ͠ɺσʔλετΞݺͼग़͠Ҏ֎΋બ୒Ͱ͖Δ • AppSync:

    AWS Lambda, HTTP resolvers • Hasura: Remote Schema • ಛʹ Hasura ͷ৔߹ɺ࠷ऴతʹ͸୯ͳΔ GraphQL Gateway
 ͱͯ͠ଘࡏͰ͖Δ
  35. ࣄྫ: dinii ࣾ͞Μͷ Hasura ͷ࢖͍ํ • গ਺ (5%) ͷ Query

    ͱ
 ଟ਺ (80%) ͷ Mutation Λ
 ผཱͯͷGraphQL αʔόʔʹྲྀ ͍ͯ͠Δ • ։ൃ͕ෳࡶԽ͢ΔʹͭΕɺ͜ͷ ׂ߹͸૿͍͑ͯ͘ͷͰ͸ͳ͍͔ (qsona ͷݟղͰ͢) Ҿ༻ݩ: ʲΤϯδχΞϒϩάʳμΠχʔͷΤϯδχΞϦϯά3Χ৚ʛdiniiʢμΠχʔʣެࣜʛnote https://note.com/dinii/n/n9be778bd7da3
  36. Command - Query Separation • Query ͷ΄ͱΜͲͰ Hasura Λ
 ௚઀࢖͍͑ͯΔɺศར

    • ҰํͰ Mutation ͸جຊతʹಛ༗ ͷυϝΠϯϩδοΫ͕ඞཁʹͳͬ ͯ͘Δ͜ͱ͕ଟ͍ • => CQS ύλʔϯʹ͍ۙ
  37. ॳظ࣮૷ίετ௿ + কདྷతͳ֦ு˕ Hasura ͷྑͦ͞͏ͳͱ͜Ζ • ॳظ͸ Hasura ͷ API

    Λͦͷ··࢖͏͜ͱͰɺ࣮૷ίετΛԼ͛ΒΕΔ • ࣮૷͕ෳࡶʹͳ͖ͬͯͨΒ Remote Schema Λ׆༻͠ɺ
 ϩδοΫΛόοΫΤϯυʹد͍ͤͯ͘ɻ
 কདྷతͳ֦ுੑ΋୲อͰ͖Δ • (ݸਓతʹ͸ Firebase ΑΓ΋༗๬ࢹ͍ͯ͠·͕͢ɺͲͪΒ΋·ͩ࢖ͬͨ͜ͱͳ͍...)
  38. 2. GraphQL ஫ҙ͢΂͖ύλʔϯू

  39. "Ξϯνύλʔϯ" Ͱ͸ͳ͍͕... • ͜Ε͔Β঺հ͢Δύλʔϯ͸ʮΞϯνύλʔϯʯͰ͸ͳ͍ • ঢ়گʹΑͬͯ͸༗༻ • ಛʹɺҰఆҎ্ͷେن໛։ൃʹ͓͍ͯ͸ඞཁʹͳΓͦ͏͕ͩɺ
 ॳख͔Β࢖͏ͱ GraphQL

    ͷྑ͞Λࡴ͢Մೳੑ͕ߴ͘ɺ
 ؾΛ͚ͭͨ΄͏͕Α͍ύλʔϯ
  40. ύλʔϯ1: GraphQL as BFF

  41. BFF (Backends for Frontends) • Microservices จ຺ͰΑ͘ొ৔͢Δ • Frontend ͷͨΊʹαʔόʔΛཱͯɺ

    Backend Services Λू໿ͯ͠ Frontend ޲͚ͷ API Λఏڙ͢Δύλʔϯ • Frontend ΤϯδχΞ͕։ൃɾӡ༻͢Δ ͜ͱ͕ਪ঑͞ΕΔ
  42. GraphQL as BFF • Backend APIs ͸యܕతʹ͸ REST ΍ gRPC

    ͳͲͰఏڙ͞Ε͍ͯΔͱ͢Δ • BFF ͱͯ͠ GraphQL API αʔόʔΛ ࡞Δύλʔϯ
  43. GraphQL for server-side resource aggregation | Technology Radar | ThoughtWorks

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

    https://www.thoughtworks.com/radar/techniques/graphql-for-server-side-resource-aggregation HOLD (qsona ͷݟղͰ͢)
  45. GraphQL as BFF ͷ໰୊఺ • BFF ͱ͸ͦ΋ͦ΋ Frontend ͷͨΊͷ Usecase

    Λఆٛ͢Δ૚ • GraphQL Λར༻͢Δͱɺquery ͕ Usecase ʹͳΔ • => Usecase ͕2૚ʹͳΓɺ໾ׂ͕ඃΔ
  46. GraphQL as BFF ͷ۩ମతͳ໰୊఺ • Backend APIs (REST/RPC) Λ GraphQL

    ʹม׵͢Δίετ͕ߴ͍ • ୯ͳΔϓϩτίϧͷม׵͚ͩͰͳ͘ɺ GraphQL resolvers ʹม׵͢Δ্Ͱຊ࣭తͳΠϯ ϐʔμϯεϛεϚον͕ଘࡏ͢Δ • ͞·͟·ͳ Usecase ʹରԠ͠͏Δ Schema Λ
 ϝϯςφϯε͚ͭͮ͠Δίετ • ҰํͰɺ࢖ΘΕΔ Usecase ͸ݶΒΕ͍ͯΔ • ࢖͏ͷ͸ࣗ෼͚ͨͪͩ (શੈքʹެ։͢ΔΘ͚Ͱ͸ͳ͍)
  47. ୅ସख๏ͷఏҊ (1) • BFF Λ Usecase-based API ͱͯ͠࡞Δ • ϓϩτίϧ͸

    JSON over HTTP Ͱ΋͍͍͠ɺ
 RPC ܥͷԿ͔Λ࢖ͬͯ΋Α͍ • GraphQL ͸ར༻͠ͳ͍ • (͜ͷ࿏ઢͰ BFF Λ࡞Δ৔߹ɺ
 ྑ͚Ε͹ӈͷࢿྉΛࢀߟʹͯ͠Έ͍ͯͩ͘͞)
  48. ୅ସख๏ͷఏҊ (2) • Backend Services GraphQL API ͱ࣮ͯ͠૷͢Δ • GraphQL

    Gateway αʔϏεΛஔ͘ • ٕज़ͱͯ͠͸ Schema Stitching ΍ Apollo Federation Λݕ౼ • => ϓϩτίϧͷม׵ΛखͰ΍Δඞཁ͕ͳ͘ͳΔ • GraphQL Gateway ͸ Backend دΓͷΤϯδχΞ͕؅ཧ͢Δ • جຊతʹ Backend ͷ΋ͷΛ࢖͍΍͘͢͢Δ͚ͩͰɺϩδοΫ͸جຊతʹஔ͔ͳ͍
  49. PR: Quipper ʹ͓͚Δ GraphQL ׆༻ࣄྫ঺հ

  50. None
  51. ৽ن։ൃϓϩδΣΫτʹ͍ͭͯ • ։ൃ͢Δ΋ͷ • iOS / Android / PC Web

    Apps • Backend APIs • ίϯςϯπΛ؅ཧ͢ΔγεςϜ • ։ൃظؒ: > 1೥ • ։ൃऀͷਓ਺: > 10ਓ
  52. ৽ن։ൃʹ GraphQL Λશ໘࠾༻ • client => gateway => backends
 શମͰ

    GraphQL Λ࠾༻ • gateway ͸ schema stitching Λར༻͍ͯ͠Δ • ͦͷଞར༻ٕज़ • Ruby on Rails • Node.js + TypeScript + Apollo Server + Prisma 2 • React, Apollo Client
  53. GraphQL ࠾༻ͷಈػ • native devs (iOS/Android) ͱ web devs (Backend

    + Web Frontend) Ͱ
 ͏·͘ڠಇͰ͖ΔΑ͏ʹ͔ͨͬͨ͠ • => Schema-Driven Development Λ࠾༻͍ͨ͠ • (ҰํͰ BFF ύλʔϯΛճආ͔ͨͬͨ͠) • ͞ΒʹɺͰ͖Δ͚ͩશମͷ։ൃ޻਺΋ݮΒ͍ͨ͠
  54. GraphQL Λશ໘࠾༻ͯ͠Α͔ͬͨ͜ͱ • Schema-Driven Development ʹΑΓ
 ίϛϡχέʔγϣϯͷϩε͕গͳ͘ɺ
 ҆ఆͯ͠։ൃΛਐΊΒΕͨ • ܨ͗͜Έ͕௒εϜʔζ

    • backend / frontend ͦΕͧΕ ~9ϲ݄։ൃͨ͠΋ͷΛ
 1िؒͰશ෦ܨ͗͜Έ׬ྃͨ͠ • GraphQL Gateway ͕ͱͯ΋ศརͰɺ͔ͭ
 ։ൃ޻਺͕΄΅͔͔Βͳ͍
  55. We're hiring! • ͻ͖͖ͭͮɺઈࢍ৽ن։ൃதͰ͢! • ӡ༻ϑΣʔζʹ޲͚ͯɺ͞ΒͳΔٕज़νϟϨϯδΛ͍͖͍ͯͨ͠ • ྫ) Persisted Queries

    ͷϑϩʔ੔උ, Apollo Federation ͷݕ౼, etc... • GraphQL, Microservices ͸΋ͪΖΜ
 ϑϩϯτΤϯυ͔ΒόοΫΤϯυ·Ͱ
 ޿͍ٕज़ʹ৮ΕΒΕΔػձ͋Γ • ·ͣ͸ΧδϡΞϧ໘ஊ͔Βɺͥͻ͝Ԡื͍ͩ͘͞ 😁
  56. ؓ࿩ٳ୊

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

  58. Repository ύλʔϯ • API ݺͼग़͠(ͳͲ)Λϥοϓ͠ɺ
 Domain Model Λฦ͢ϨΠϠʔ • Usecase

    ͔Β࢖ΘΕΔ • API ҎԼͷ۩ମతͳৄࡉΛӅṭ͢Δ͜ͱ͕Ͱ͖Δ • "෗ഊ๷ࢭ૚"
  59. Repository ύλʔϯͱ GraphQL • ͋·Γ૬ੑ͕Α͘ͳ͍ • Usecase ==> Repository ==[query]==>

    GraphQL API • query ͸ Usecase Ͱ͋Δͱଊ͑Δͱ
 Domain ͷ૚͕ Usecase Λ஌͍ͬͯΔ͜ͱʹͳΓɺ͓͔͍͠ • => query ͕ Usecase Λදͤͳ͘ͳΓɺGraphQL ͷྑ͕͞ੜ͖ʹ͍͘ • over-fetching ͳͲͷ໰୊͕ى͖΍͘͢ͳΔ
  60. ୅ସख๏ͷఏҊ • GraphQL Schema ΛυϝΠϯ஌ࣝ๛෋ͳ΋ͷͱͯ͠ɺ
 ͦ΋ͦ΋෗ഊ͠ͳ͍Α͏ʹ͢Δ • ͦͷυϝΠϯ஌ࣝΛΫϥΠΞϯτͱ΋ڞ༗͢Δ • αʔόʔαΠυ·ͰؚΊͨΞʔΩςΫνϟͱଊ͑Δͱྑ͍

    • ΫϥΠΞϯτΤϯδχΞ΋ GraphQL Schema ͷઃܭʹੵۃతʹؔ ΘΔͷ͕ཧ૝
  61. Fragment Colocation • GraphQL ͷॏཁͳಛ௃ͱ͠ ͯɺ1ϦΫΤετͰಉ࣌ʹෳ ਺ͷϦιʔεΛऔಘͰ͖Δ • ͦͷಛ௃Λ׆༻ͭͭ͠΋ɺ Usecase

    Λద੾ʹ෼ׂ͍ͨ͠
  62. Fragment Colocation • ྫ: 1ը໘಺ʹෳ਺ͷ Usecase / Component ͕͋Γɺ
 ͦΕΒͷσʔλऔಘΛ1ϦΫΤετʹ·ͱΊ͍ͨ

    • Usecase (Component) ͸
 ଟஈʹͳ͍ͬͯΔ (ωετ) ͜ͱ΋͋Δ • ֤ Usecase / Component ͝ͱʹ fragment Λ΋ͭ (colocation) • ্Ґͷ Usecase Ͱ fragment Λ·ͱΊͯ1ͭͷ query ʹ͢Δ
  63. ·ͱΊ

  64. GraphQL ͱΞʔΩςΫνϟ·ͱΊ • query ͕ Usecase
 Schema / Types ͕

    Resource Ͱ͋Δɺͱଊ͑Α͏ • ͦͷ্Ͱɺطଘͷઃܭख๏ͱ૊Έ߹Θͤͯߟ͑Α͏ • Client / Server ͷہॴతͳࢹ఺͚ͩͰͳ͘ɺ
 େہతʹݟͯઃܭ͠Α͏
  65. Thank you for listening! • ొ৔ͨ͠ϦϯΫ͸ Speaker Deck ͷ֓ཁཝʹ
 ͢΂ͯࡌ͓͖ͤͯ·͢