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

Backend エンジニア視点からの GraphQL / GraphQL from a per...

qsona
February 08, 2024

Backend エンジニア視点からの GraphQL / GraphQL from a perspective of backend engineer

"LayerX、スタディサプリ、SHEと考える GraphQLが向いている現場とは?運用実践LT" で登壇した資料です。

引用した資料
[Rails アプリに RESTful API のレールを敷いて生産性が大きく上がった話 | Wantedly Engineer Blog](https://www.wantedly.com/companies/wantedly/post_articles/85098)
[React Server Components と GraphQL のアナロジー | by Yosuke Kurami | Dec, 2023 | Medium](https://quramy.medium.com/89b3f5f41a01)
[実質無料で GraphQL Gateway を手に入れる / low-cost GraphQL Gateway - Speaker Deck](https://speakerdeck.com/ywada526/low-cost-graphql-gateway)
[Server-side Kotlin for Frontend - Speaker Deck](https://speakerdeck.com/qsona/server-side-kotlin-for-frontend)

qsona

February 08, 2024
Tweet

More Decks by qsona

Other Decks in Technology

Transcript

  1. whoami • @qsona • Working at SHE Inc. • ex-

    Quipper(ελσΟαϓϦ), FiNC Technologies, CyberAgent • GraphQL / Microservices / Ruby on Rails / Node.js / Prisma
  2. Context • 2016 ~ 2017 ೥͝Ζͷ࿩ (8೥લ!) • Ruby on

    Rails ͰɺϚΠΫϩαʔϏεΛ͔ͳΓਅ݋ʹ΍͍ͬͯͨ • ΫϥΠΞϯτ͸ iOS, Android, Web Frontend • Web API ʹ͍ͭͯɺ՝୊ײΛ΋͍ͬͯͨ • JSON over HTTP (REST త)
  3. ౰࣌ͷ Web API ͷϝΠϯ՝୊ (1) • ಛఆͷϖʔδ޲͚ʹ࡞ΒΕͨ API ͕ଟ͍ •

    ࠶ར༻ੑ͕௿͍ • ෳ਺ͷ API ͷϨεϙϯεΛݟൺ΂Δͱɺಉ͡Α͏Ͱগ͠ҧ͏σʔλ ͕ฦ͖ͬͯͨΓ͢Δ => ѻ͍ʹ͍͘
  4. ౰࣌ͷ Web API ͷϝΠϯ՝୊ (2) • "ਆAPI" ͕ɺ͞·͟·ͳՕॴ͔Βར༻͞Ε͕ͪ • ͍ΖΜͳσʔλ͕औΕΔศརͳ

    API ͳͷͰɺ৭ʑͳϢʔεέʔεͰ ࢖ΘΕͯ͠·͏ • Ϣʔεέʔεͷ௥ՃɾมԽʹԠͯ͡ɺϑΟʔϧυ͕௥Ճ͞Εͯɺ· ͢·͢ศརʹͳΔ • => ύϑΥʔϚϯε͕ѱԽ͢Δ
  5. վળͷํ޲ੑ • Ϧιʔεࢦ޲ͷ Web API ઃܭΛ໨ࢦ͍ͯͬͨ͠ • ෳ਺ͷ API Λލ͍Ͱ҆ఆతͳ

    "Ϧιʔε" Λఆٛ͠ɺͦΕ͕ϒϨͳ͍Α͏ʹ͢Δ • ❌ endpoint ͝ͱʹผʑͷJSONγϦΞϥΠβΛ࡞Δ • ⭕ Ϧιʔε͝ͱͷJSONγϦΞϥΠβΛ࡞ΓɺͦΕΛ࢖͍ճ͢ • 1ͭͷ API ͸ɺͳΔ΂͘1छྨͷϦιʔεΛฦ͢Α͏ʹ͢Δ • ্هΛపఈ͠΍͍͢Α͏ɺٕज़બఆͰϨʔϧΛෑ͘
  6. ࣍ͳΔ՝୊ͷղܾࡦ • ଞࣾ͞Μ (Wantedly) ͷࣄྫ ... fi elds, include ΛΫΤϦύϥϝʔλͰ

    ౉ͤΔΑ͏ʹ͢Δ ग़య3BJMTΞϓϦʹ3&45GVM"1*ͷϨʔϧΛෑ͍ͯੜ࢈ੑ͕େ্͖͕ͬͨ͘࿩c8BOUFEMZ&OHJOFFS#MPH
  7. ͜͜·Ͱͷ·ͱΊ • Web API ΛɺϦιʔεࢦ޲ʹد͍ͤͨ • ࣗવͱϦιʔεࢦ޲ͷ API ʹͳΔΑ͏ʹɺٕज़બఆͰϨʔϧΛෑ͖͍ͨ •

    ͦͷ্ͰɺσʔλͷऔΓํʹ͸ॊೈੑΛ͍࣋ͨͤͨͱ͖͕͋Δ • ϑΟʔϧυࢦఆ • ωετͨ͠Ϧιʔεͷऔಘ • ͦΕͬͯͭ·Γ...
  8. GraphQL ͕՝୊Λղܾ͢Δ (1) • Ϧιʔεࢦ޲ʹد͍ͤͨ... • => GraphQL Type ͕ϦιʔεΛද͢

    • ٯʹɺϢʔεέʔε͝ͱʹ API Λ࡞ΔΑ͏ͳख๏͸ɺGraphQL ͩͱ ۃ୺ʹ΍Γʹ͍͘ (= ٕज़ͰϨʔϧΛෑ͘͜ͱ͕Ͱ͖͍ͯΔ)
  9. GraphQL ͕՝୊Λղܾ͢Δ (2) • σʔλͷऔΓํʹ͸ॊೈੑΛ͍࣋ͨͤͨ • => ·͞ʹ GraphQL ͷ

    Query ʹΑͬͯղܾ͞ΕΔ՝୊ • ༨ஊ: ઌ΄Ͳͷ Wantedly (஛໺͞Μ) ͷهࣄ͸ 2017೥ • গͳ͘ͱ΋ͦͷ2೥લ (2015) ʹ͸࣮ફ͞Εͯͨ͸ͣ • ͦͷࠒ͸ GraphQL ͸΄΅೔ຊ্཮ͯ͠ͳ͔ͬͨ (ॳग़͕2014) • ઌݟͷ໌͕͋Δͳͱײ͡Δ
  10. ౰࣌ͷ Web API ͷ՝୊ (3) • API υΩϡϝϯτ͕ͳ͔ͬͨ • ਖ਼֬ʹ͸ɺendpoint

    ͱͦͷ request parameters ͸ҰཡͰݟΕΔঢ়ଶ • ruby-grape/grape ͱ͍͏ϑϨʔϜϫʔΫΛར༻͍ͯͨ͠ • ্هΛએݴతʹॻ͚ͯɺSwagger Λు͖ग़͢͜ͱ͕Ͱ͖ͨ • ͕ɺResponse body ͷܕͷυΩϡϝϯτ͸ͳ͔ͬͨ • ΫϥΠΞϯτ͕৽͘͠ػೳΛ։ൃ͢Δͱ͖ʹෆศ
  11. ࣍ͳΔ՝୊ͷղܾࡦ • OpenAPI ͷυΩϡϝϯτΛ࢖ͬͯɺrequest/response ΛόϦσʔ γϣϯ͢Δ͜ͱͰɺဃ཭Λ๷͙ • interagent/committee • Ruby

    ͷ Web API Ͱɺ্هΛୡ੒Ͱ͖ΔϥΠϒϥϦ • ౰࣌ OpenAPI 2.0 ʹ͔͠ରԠ͍ͯ͠ͳ͔ͬͨͷͰɺ3.0 ͷରԠΛ νʔϜͰਐΊͯ contribute ͨ͠
  12. GraphQL ͕՝୊Λղܾ͢Δ (3) • GraphQL Schema ͕ͦͷ·· API υΩϡϝϯτͰ͋Δ •

    ࣮૷ͱͷဃ཭͸ɺ·ͣى͖ͳ͍ • request ͕ؒҧ͍ͬͯͨΓɺresponse Λਖ਼͘͠ฦ͍ͤͯͳ͍৔߹ɺ GraphQL αʔόʔ͕ΤϥʔΛు͘
  13. ౰࣌ͷ Web API ͷ՝୊ (4) ΤίγεςϜ • Web API վળͷจ຺ͰɺΤίγεςϜͷ؍఺Ͱ΋ͦΕͳΓʹۤ࿑ͨ͠

    • Ϧιʔεࢦ޲ͷϨʔϧΛෑͨ͘Ίʹɺactive_model_serializers ͱ͍͏ gem Λબఆͨ͠ => ͦͷޙϝϯςφϯε͕ࢭ·ͬͯ͠·ͬͨ • committee gem ͷ OpenAPI 3ܥରԠΛࣗ෼ͨͪͰ͢Δඞཁ͕͋ͬͨ
  14. ͜͜·Ͱͷ·ͱΊ • ͋Δఔ౓ن໛͕େ͖͘ͳͬͨαʔϏεͰ͸ɺWeb API ͸ҎԼͷΑ͏ͳ ੑ࣭Λຬͨͯ͠ཉ͍͠ • Ϧιʔεࢦ޲Ͱ͋Δ (ٕज़બఆͰϨʔϧΛෑ͖͍ͨ) •

    σʔλऔಘʹҰఆͷॊೈੑ͕͋Δ • ࣮૷ͱဃ཭͠ͳ͍ API υΩϡϝϯτ͕खʹೖΔ • GraphQL ͸͜ΕΒͷੑ࣭Λશͯຬ͔ͨ͢Β࠷ߴ
  15. React Server Components / Next.js App Router • React Server

    Components (RSC) ͷ୆಄ʹΑΓɺGraphQL ͕ෆཁʹ ͳΔ͔΋͠Εͳ͍ੈքઢͷ࿩ • ඇઐ໳ՈͳͷͰɺ͋·Γποί·Εͳ͍ఔ౓ʹ...
  16. React Server Components / Next.js App Router • RSC ʹΑͬͯ݁ՌతʹɺServer-Side

    Rendering (SSR) Ͱ͖Δ෯͕޿ ͕ΔɻSSR Ͱͷ API ݺͼग़͠͸αʔόʔؒ௨৴ͳͷͰɺ௨৴ͷίετ ͕௿͍ɻ • ࡉཻ͔͍౓ͷ API ݺͼग़͕͠ਪ঑͞ΕΔ • => GraphQL Ͱ͋Δඞཁੑ͕ബΕΔ
  17. React Server Components / Next.js App Router • Ҏ্ͷ͜ͱΛߟ͑ΔͱɺBackend API

    ͕ GraphQL Ͱ͋Δඞવੑ͸ɺ͔ͳΓ͔֬ ʹബΕΔΑ͏ʹࢥ͏ • Ϧιʔεࢦ޲ͷ API Ͱ͋Δඞཁ͕͋Δ఺͸ಉ͡Ͱ͋Δ͕ • ͦΕ͸ REST ΍ gRPC ͳͲͰ΋࣮ݱͰ͖Δ͠ɺαʔόʔؒ௨৴ͳͷͰύϑΥʔ Ϛϯε؍఺ͷωοΫ͕গͳ͘ͳ͍ͬͯΔ • Ͱ͸ɺGraphQL ͷ༏Ґੑ͸ͳ͘ͳΔͷ͔? (ଞʹ͋Δͷ͔?) • => GraphQL ޷͖ͱͯ͠ɺଞͷ༏ҐੑΛ4ͭ΄Ͳఏࣔͯ͠ΈΔ
  18. (1) iOS / Android app ͳͲͷߟྀ • RSC ͷ࿩Λͯ͠ΔΜ͔ͩΒ Web

    Frontend Ҏ֎Λ࣋ͪग़͢ͷ͸ζϧ͍ ͱࢥ͏͔΋͠Εͳ͍͕ɺ·͋଴ͯɺͪΐͬͱฉ͍ͯ͘Ε • ࠷ॳ͸ Web Frontend ΞϓϦ͔Β࡞Γ࢝ΊΔ͔΋͠Εͳ͍ɻ͍͍ͩͨ ਺೥ޙʹɺ΍ͬͺΓωΠςΟϒΞϓϦ΋ཉ͍͠ΑͶͱͳΔ • ٕज़ऀͱͯ͠͸ɺͦ͏͍͏ঢ়گʹରԠͰ͖ΔΑ͏ʹ͓͖͍ͯͨ͠
  19. (1) iOS / Android app ͳͲͷߟྀ • બ୒ࢶ: BFF (Backends

    for Frontends) ύλʔϯ • ී௨ʹ༗ྗͳબ୒ࢶͰ͋Δ͕ • qsona ΋ੲݚڀͯͨ͠ • γϯϓϧʹ։ൃɾӡ༻ͷίετ͕ߴ͍
  20. (1) iOS / Android app ͳͲͷߟྀ • ։ൃͷ࠷ॳ͔Β GraphQL Gateway

    ͕͋Δͱɺ͔ͳΓָͰ͖Δ • ཪଆ͕ GraphQL Ͱग़དྷ͍ͯΔͱɺඇৗʹ௿ίετͰ GraphQL GatewayΛ࡞Δ͜ͱ͕Ͱ͖Δ (ਪ͠)
  21. (2) ωοτϫʔΫϨϕϧͰͷ N+1 ໰୊ΛճආͰ͖Δ • React Server Components Ͱ͸ɺࡉ͔͍୯ҐͷίϯϙʔωϯτͰͦΕͧΕ API

    Ϧ ΫΤετΛૹΔ͜ͱ͕ਪ঑͞Ε͍ͯΔ • φΠʔϒʹ࣮૷͢ΔͱɺωοτϫʔΫϨϕϧͰͷ N+1 ໰୊͕ى͖͏Δ • Ұཡը໘ͷ਌ίϯϙʔωϯτͰ1ճ • ͦͷ֤ཁૉͷίϯϙʔωϯτͰNճ • ͜Ε͸ GraphQL API Ͱ΋αʔόʔ಺ͰΑ͘ى͖Δ໰୊͕ͩɺى͖ͨ࣌ͷμϝʔδ ͷϨϕϧ͕͍ͩͿҧ͏w
  22. (3) API ͷਐԽΛͤ͞΍͍͢ • ͜ͷ API ͷϨεϙϯεͷ͜ͷϑΟʔϧυɺ୭΋࢖ͬͯͳ͍ͳΒ࡟আ͠ ͍ͨͳʔɾɾɾ • ͚Ͳɺ࢖ΘΕͯΔͷ͔Ͳ͏͔Λௐ΂Δͷ͕େม

    • REST API ͷ৔߹ɺΫϥΠΞϯτ࣮૷ͷத·Ͱݟʹߦ͘ඞཁ͕͋Δ • GraphQL API ͷ৔߹ɺΫΤϦΛݟΔ͚ͩͰΘ͔Δ!
  23. શମͷ·ͱΊ • GraphQL Λ࢖͍ͨ͘ͳΔϞνϕʔγϣϯʹ͍ͭͯɺBackend Τϯδ χΞͷࢹ఺͔Β৭ʑ࿩͠·ͨ͠ • ݸਓతʹ͸ GraphQL ͸

    "ؤ݈ͳϞσϧ" ͩͱײ͍ͯͯ͡ɺࠓޙ΋͔ͳ Γ௕͍ؒ࢖ΘΕ͍ͯ͘΋ͷʹͳΔΜͰ͸ͳ͍͔ͳͱࢥ͍ͬͯΔ