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

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

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. Backend ΤϯδχΞࢹ఺͔Βͷ


    GraphQL
    2024-02-08


    LayerXɺελσΟαϓϦɺSHEͱߟ͑ΔɹGraphQL͕޲͍͍ͯΔݱ৔ͱ͸ʁӡ༻࣮ફLT


    #O
    ff
    ers_GraphQL࣮ફLT
    @qsona (SHEגࣜձࣾ)

    View full-size slide

  2. whoami
    • @qsona


    • Working at SHE Inc.


    • ex- Quipper(ελσΟαϓϦ), FiNC Technologies, CyberAgent


    • GraphQL / Microservices / Ruby on Rails / Node.js / Prisma

    View full-size slide

  3. ࠓ೔ͷൃදͷϞνϕʔγϣϯ

    View full-size slide

  4. ൃදͷߏ੒
    • qsona ͕ Backend ΤϯδχΞͱͯ͠ɺGraphQL ͱ͍͏Ұͭͷղ౴ʹ
    ḷΓண͘·ͰͷมભΛ࿩͍ͨ͠


    • ݱ୅ʹ͓͍ͯ΋ Backend ʹ GraphQL ͸خ͍͠ͷ͔ͷߟ࡯

    View full-size slide

  5. @qsona ͕ Backend ΤϯδχΞͱͯ͠ɺ


    GraphQL ͱ͍͏Ұͭͷղ౴ʹḷΓண͘·Ͱ

    View full-size slide

  6. Context
    • 2016 ~ 2017 ೥͝Ζͷ࿩ (8೥લ!)


    • Ruby on Rails ͰɺϚΠΫϩαʔϏεΛ͔ͳΓਅ݋ʹ΍͍ͬͯͨ


    • ΫϥΠΞϯτ͸ iOS, Android, Web Frontend


    • Web API ʹ͍ͭͯɺ՝୊ײΛ΋͍ͬͯͨ


    • JSON over HTTP (REST త)

    View full-size slide

  7. ౰࣌ͷ Web API ͷϝΠϯ՝୊ (1)
    • ಛఆͷϖʔδ޲͚ʹ࡞ΒΕͨ API ͕ଟ͍


    • ࠶ར༻ੑ͕௿͍


    • ෳ਺ͷ API ͷϨεϙϯεΛݟൺ΂Δͱɺಉ͡Α͏Ͱগ͠ҧ͏σʔλ
    ͕ฦ͖ͬͯͨΓ͢Δ => ѻ͍ʹ͍͘

    View full-size slide

  8. ౰࣌ͷ Web API ͷϝΠϯ՝୊ (2)
    • "ਆAPI" ͕ɺ͞·͟·ͳՕॴ͔Βར༻͞Ε͕ͪ


    • ͍ΖΜͳσʔλ͕औΕΔศརͳ API ͳͷͰɺ৭ʑͳϢʔεέʔεͰ
    ࢖ΘΕͯ͠·͏


    • Ϣʔεέʔεͷ௥ՃɾมԽʹԠͯ͡ɺϑΟʔϧυ͕௥Ճ͞Εͯɺ·
    ͢·͢ศརʹͳΔ


    • => ύϑΥʔϚϯε͕ѱԽ͢Δ

    View full-size slide

  9. ՝୊ͷ෼ੳ
    • ՝୊1,2͸ɺਅٯͷΑ͏ʹݟ͑Δ͕...


    • ࠶ར༻ੑ͕௿͍໰୊ͱɺ࠶ར༻͞Ε͗͢Δ໰୊


    • ʮϑϩϯτΤϯυͷϢʔεέʔεʹ API ͕ҾͬுΒΕ͍͗ͯ͢Δʯͱ
    ͍͏఺Ͱɺڞ௨Ͱ͋Δ


    • => ϢʔεέʔεͷมԽʹରԠ͠΍͍͢Α͏ͳ API ʹ͍͖͍ͯͨ͠

    View full-size slide

  10. վળͷํ޲ੑ
    • Ϧιʔεࢦ޲ͷ Web API ઃܭΛ໨ࢦ͍ͯͬͨ͠


    • ෳ਺ͷ API Λލ͍Ͱ҆ఆతͳ "Ϧιʔε" Λఆٛ͠ɺͦΕ͕ϒϨͳ͍Α͏ʹ͢Δ


    • ❌ endpoint ͝ͱʹผʑͷJSONγϦΞϥΠβΛ࡞Δ


    • ⭕ Ϧιʔε͝ͱͷJSONγϦΞϥΠβΛ࡞ΓɺͦΕΛ࢖͍ճ͢


    • 1ͭͷ API ͸ɺͳΔ΂͘1छྨͷϦιʔεΛฦ͢Α͏ʹ͢Δ


    • ্هΛపఈ͠΍͍͢Α͏ɺٕज़બఆͰϨʔϧΛෑ͘

    View full-size slide

  11. վળͷ੒Ռ
    • Ϧιʔεࢦ޲ͷɺཻ౓ײͷΑ͍ API ͕ঃʑʹ૿͍͑ͯͬͨ


    • ਆ API Λ৽͘͠࢖ΘΕΔ͜ͱ͸ݮͬͨ


    • શൠతʹվળ܏޲ʹ!

    View full-size slide

  12. ࣍ͳΔ՝୊
    • ͜ͷҰཡը໘ɺϖΠϩʔυ͕େ͖͗͢Δɻ࢖ͬͯΔΧϥϜ͸͜Εͱ͜
    Ε͚͔ͩͩΒɺͦΕʹߜΓ͍ͨͳ


    • ͬͪ͜ͷը໘Ͱ͸ɺ͜͜·Ͱωετ͞Εͨ৘ใΛऔΓ͍ͨͳ

    View full-size slide

  13. ࣍ͳΔ՝୊ͷղܾࡦ
    • ଞࣾ͞Μ (Wantedly) ͷࣄྫ ...
    fi
    elds, include ΛΫΤϦύϥϝʔλͰ
    ౉ͤΔΑ͏ʹ͢Δ
    ग़య3BJMTΞϓϦʹ3&45GVM"1*ͷϨʔϧΛෑ͍ͯੜ࢈ੑ͕େ্͖͕ͬͨ͘࿩c8BOUFEMZ&OHJOFFS#MPH

    View full-size slide

  14. ͜͜·Ͱͷ·ͱΊ
    • Web API ΛɺϦιʔεࢦ޲ʹد͍ͤͨ


    • ࣗવͱϦιʔεࢦ޲ͷ API ʹͳΔΑ͏ʹɺٕज़બఆͰϨʔϧΛෑ͖͍ͨ


    • ͦͷ্ͰɺσʔλͷऔΓํʹ͸ॊೈੑΛ͍࣋ͨͤͨͱ͖͕͋Δ


    • ϑΟʔϧυࢦఆ


    • ωετͨ͠Ϧιʔεͷऔಘ


    • ͦΕͬͯͭ·Γ...

    View full-size slide

  15. ʊਓਓਓਓਓʊ


    ʼɹGraphQLɹʻ


    ʉY^Y^Y^Y^Y^ʉ

    View full-size slide

  16. GraphQL ͕՝୊Λղܾ͢Δ (1)
    • Ϧιʔεࢦ޲ʹد͍ͤͨ...


    • => GraphQL Type ͕ϦιʔεΛද͢


    • ٯʹɺϢʔεέʔε͝ͱʹ API Λ࡞ΔΑ͏ͳख๏͸ɺGraphQL ͩͱ
    ۃ୺ʹ΍Γʹ͍͘ (= ٕज़ͰϨʔϧΛෑ͘͜ͱ͕Ͱ͖͍ͯΔ)

    View full-size slide

  17. GraphQL ͕՝୊Λղܾ͢Δ (2)
    • σʔλͷऔΓํʹ͸ॊೈੑΛ͍࣋ͨͤͨ


    • => ·͞ʹ GraphQL ͷ Query ʹΑͬͯղܾ͞ΕΔ՝୊


    • ༨ஊ: ઌ΄Ͳͷ Wantedly (஛໺͞Μ) ͷهࣄ͸ 2017೥


    • গͳ͘ͱ΋ͦͷ2೥લ (2015) ʹ͸࣮ફ͞Εͯͨ͸ͣ


    • ͦͷࠒ͸ GraphQL ͸΄΅೔ຊ্཮ͯ͠ͳ͔ͬͨ (ॳग़͕2014)


    • ઌݟͷ໌͕͋Δͳͱײ͡Δ

    View full-size slide

  18. ౰࣌ͷ Web API ͷ՝୊ (3)
    • API υΩϡϝϯτ͕ͳ͔ͬͨ


    • ਖ਼֬ʹ͸ɺendpoint ͱͦͷ request parameters ͸ҰཡͰݟΕΔঢ়ଶ


    • ruby-grape/grape ͱ͍͏ϑϨʔϜϫʔΫΛར༻͍ͯͨ͠


    • ্هΛએݴతʹॻ͚ͯɺSwagger Λు͖ग़͢͜ͱ͕Ͱ͖ͨ


    • ͕ɺResponse body ͷܕͷυΩϡϝϯτ͸ͳ͔ͬͨ


    • ΫϥΠΞϯτ͕৽͘͠ػೳΛ։ൃ͢Δͱ͖ʹෆศ

    View full-size slide

  19. վળͷํ޲ੑ
    • OpenAPI ͰυΩϡϝϯτΛॻ͍͍ͯ͘


    • ౰࣌ OpenAPI 3.0 ͕ͪΐ͏Ͳग़ͦ͏ͳࠒͩͬͨͷͰɺͦΕʹ৐ͬͯ
    ߦͬͨ

    View full-size slide

  20. ࣍ͳΔ՝୊
    • ͔ͤͬ͘υΩϡϝϯτΛॻ͍ͯ΋ɺ࣮ࡍͷ࣮૷ͱဃ཭ͯ͠͠·͏


    • υΩϡϝϯτͷ৴པੑ͕ബΕΔ...

    View full-size slide

  21. ࣍ͳΔ՝୊ͷղܾࡦ
    • OpenAPI ͷυΩϡϝϯτΛ࢖ͬͯɺrequest/response ΛόϦσʔ
    γϣϯ͢Δ͜ͱͰɺဃ཭Λ๷͙


    • interagent/committee


    • Ruby ͷ Web API Ͱɺ্هΛୡ੒Ͱ͖ΔϥΠϒϥϦ


    • ౰࣌ OpenAPI 2.0 ʹ͔͠ରԠ͍ͯ͠ͳ͔ͬͨͷͰɺ3.0 ͷରԠΛ
    νʔϜͰਐΊͯ contribute ͨ͠

    View full-size slide

  22. ʊਓਓਓਓਓʊ


    ʼɹGraphQLɹʻ


    ʉY^Y^Y^Y^Y^ʉ

    View full-size slide

  23. GraphQL ͕՝୊Λղܾ͢Δ (3)
    • GraphQL Schema ͕ͦͷ·· API υΩϡϝϯτͰ͋Δ


    • ࣮૷ͱͷဃ཭͸ɺ·ͣى͖ͳ͍


    • request ͕ؒҧ͍ͬͯͨΓɺresponse Λਖ਼͘͠ฦ͍ͤͯͳ͍৔߹ɺ
    GraphQL αʔόʔ͕ΤϥʔΛు͘

    View full-size slide

  24. ౰࣌ͷ Web API ͷ՝୊ (4) ΤίγεςϜ
    • Web API վળͷจ຺ͰɺΤίγεςϜͷ؍఺Ͱ΋ͦΕͳΓʹۤ࿑ͨ͠


    • Ϧιʔεࢦ޲ͷϨʔϧΛෑͨ͘Ίʹɺactive_model_serializers ͱ͍͏
    gem Λબఆͨ͠ => ͦͷޙϝϯςφϯε͕ࢭ·ͬͯ͠·ͬͨ


    • committee gem ͷ OpenAPI 3ܥରԠΛࣗ෼ͨͪͰ͢Δඞཁ͕͋ͬͨ

    View full-size slide

  25. ʊਓਓਓਓਓʊ


    ʼɹGraphQLɹʻ


    ʉY^Y^Y^Y^Y^ʉ

    View full-size slide

  26. ͜͜·Ͱͷ·ͱΊ
    • ͋Δఔ౓ن໛͕େ͖͘ͳͬͨαʔϏεͰ͸ɺWeb API ͸ҎԼͷΑ͏ͳ
    ੑ࣭Λຬͨͯ͠ཉ͍͠


    • Ϧιʔεࢦ޲Ͱ͋Δ (ٕज़બఆͰϨʔϧΛෑ͖͍ͨ)


    • σʔλऔಘʹҰఆͷॊೈੑ͕͋Δ


    • ࣮૷ͱဃ཭͠ͳ͍ API υΩϡϝϯτ͕खʹೖΔ


    • GraphQL ͸͜ΕΒͷੑ࣭Λશͯຬ͔ͨ͢Β࠷ߴ

    View full-size slide

  27. ݱ୅ʹ͓͍ͯ΋ Backend ʹ
    GraphQL ͸خ͍͠ͷ͔?

    View full-size slide

  28. ݱ୅ͰΑ͋͘ΔΞʔΩςΫνϟߏ੒
    • Backend ͕ෳ਺ (Microservices) ͋ΓɺͦΕΛ·ͱΊΔ Gateway తͳ
    αʔόʔ͕͋Δ

    View full-size slide

  29. Α͋͘Δ GraphQL ͷ࢖ΘΕํ
    • Frontend ΤϯδχΞ͕خ͍͠ GraphQL Gateway


    • ཪ͸ REST ΍ gRPC ͷ͜ͱ͕ଟ͍

    View full-size slide

  30. @qsona ͷϞνϕʔγϣϯ
    • Backend αʔόʔ͔Β GraphQL API Λఏڙ͍ͨ͠


    • Backend ؒ΋ GraphQL ʹ͍ͨ͠

    View full-size slide

  31. React Server Components / Next.js App Router
    • React Server Components (RSC) ͷ୆಄ʹΑΓɺGraphQL ͕ෆཁʹ
    ͳΔ͔΋͠Εͳ͍ੈքઢͷ࿩


    • ඇઐ໳ՈͳͷͰɺ͋·Γποί·Εͳ͍ఔ౓ʹ...

    View full-size slide

  32. React Server Components / Next.js App Router
    • RSC ʹΑͬͯ݁ՌతʹɺServer-Side Rendering (SSR) Ͱ͖Δ෯͕޿
    ͕ΔɻSSR Ͱͷ API ݺͼग़͠͸αʔόʔؒ௨৴ͳͷͰɺ௨৴ͷίετ
    ͕௿͍ɻ


    • ࡉཻ͔͍౓ͷ API ݺͼग़͕͠ਪ঑͞ΕΔ


    • => GraphQL Ͱ͋Δඞཁੑ͕ബΕΔ

    View full-size slide

  33. React Server Components / Next.js App Router
    • Ұ୴ɺͱͯ΋ࢀߟʹͳΔهࣄΛஔ͍͓͖ͯ·͢
    ग़య3FBDU4FSWFS$PNQPOFOUTͱ(SBQI2-ͷΞφϩδʔcCZ:PTVLF,VSBNJc%FD c.FEJVN

    View full-size slide

  34. React Server Components / Next.js App Router
    • Ҏ্ͷ͜ͱΛߟ͑ΔͱɺBackend API ͕ GraphQL Ͱ͋Δඞવੑ͸ɺ͔ͳΓ͔֬
    ʹബΕΔΑ͏ʹࢥ͏


    • Ϧιʔεࢦ޲ͷ API Ͱ͋Δඞཁ͕͋Δ఺͸ಉ͡Ͱ͋Δ͕


    • ͦΕ͸ REST ΍ gRPC ͳͲͰ΋࣮ݱͰ͖Δ͠ɺαʔόʔؒ௨৴ͳͷͰύϑΥʔ
    Ϛϯε؍఺ͷωοΫ͕গͳ͘ͳ͍ͬͯΔ


    • Ͱ͸ɺGraphQL ͷ༏Ґੑ͸ͳ͘ͳΔͷ͔? (ଞʹ͋Δͷ͔?)


    • => GraphQL ޷͖ͱͯ͠ɺଞͷ༏ҐੑΛ4ͭ΄Ͳఏࣔͯ͠ΈΔ

    View full-size slide

  35. (1) iOS / Android app ͳͲͷߟྀ
    • RSC ͷ࿩Λͯ͠ΔΜ͔ͩΒ Web Frontend Ҏ֎Λ࣋ͪग़͢ͷ͸ζϧ͍
    ͱࢥ͏͔΋͠Εͳ͍͕ɺ·͋଴ͯɺͪΐͬͱฉ͍ͯ͘Ε


    • ࠷ॳ͸ Web Frontend ΞϓϦ͔Β࡞Γ࢝ΊΔ͔΋͠Εͳ͍ɻ͍͍ͩͨ
    ਺೥ޙʹɺ΍ͬͺΓωΠςΟϒΞϓϦ΋ཉ͍͠ΑͶͱͳΔ


    • ٕज़ऀͱͯ͠͸ɺͦ͏͍͏ঢ়گʹରԠͰ͖ΔΑ͏ʹ͓͖͍ͯͨ͠

    View full-size slide

  36. (1) iOS / Android app ͳͲͷߟྀ
    • બ୒ࢶ: BFF (Backends for Frontends) ύλʔϯ

    View full-size slide

  37. (1) iOS / Android app ͳͲͷߟྀ
    • બ୒ࢶ: BFF (Backends for Frontends) ύλʔϯ


    • ී௨ʹ༗ྗͳબ୒ࢶͰ͋Δ͕


    • qsona ΋ੲݚڀͯͨ͠


    • γϯϓϧʹ։ൃɾӡ༻ͷίετ͕ߴ͍

    View full-size slide

  38. (1) iOS / Android app ͳͲͷߟྀ
    • ։ൃͷ࠷ॳ͔Β GraphQL Gateway ͕͋Δͱɺ͔ͳΓָͰ͖Δ


    • ཪଆ͕ GraphQL Ͱग़དྷ͍ͯΔͱɺඇৗʹ௿ίετͰ GraphQL
    GatewayΛ࡞Δ͜ͱ͕Ͱ͖Δ (ਪ͠)

    View full-size slide

  39. (1) iOS / Android app ͳͲͷߟྀ

    View full-size slide

  40. (2) ωοτϫʔΫϨϕϧͰͷ N+1 ໰୊ΛճආͰ͖Δ
    • React Server Components Ͱ͸ɺࡉ͔͍୯ҐͷίϯϙʔωϯτͰͦΕͧΕ API Ϧ
    ΫΤετΛૹΔ͜ͱ͕ਪ঑͞Ε͍ͯΔ


    • φΠʔϒʹ࣮૷͢ΔͱɺωοτϫʔΫϨϕϧͰͷ N+1 ໰୊͕ى͖͏Δ


    • Ұཡը໘ͷ਌ίϯϙʔωϯτͰ1ճ


    • ͦͷ֤ཁૉͷίϯϙʔωϯτͰNճ


    • ͜Ε͸ GraphQL API Ͱ΋αʔόʔ಺ͰΑ͘ى͖Δ໰୊͕ͩɺى͖ͨ࣌ͷμϝʔδ
    ͷϨϕϧ͕͍ͩͿҧ͏w

    View full-size slide

  41. (2) ωοτϫʔΫϨϕϧͰͷ N+1 ໰୊ΛճආͰ͖Δ
    • ஫ҙਂ͘ઃܭ͢Ε͹ճආͰ͖Δ (Quramy ͞Μͷࢿྉࢀর)


    • ͕ɺຊ౰ʹΈΜͳͪΌΜͱճආͯ͘͠ΕΔ͔͸ٙ໰͋Γ...w
    ग़య3FBDU4FSWFS$PNQPOFOUTͱ(SBQI2-ͷΞφϩδʔcCZ:PTVLF,VSBNJc%FD c.FEJVN

    View full-size slide

  42. (3) API ͷਐԽΛͤ͞΍͍͢
    • ͜ͷ API ͷϨεϙϯεͷ͜ͷϑΟʔϧυɺ୭΋࢖ͬͯͳ͍ͳΒ࡟আ͠
    ͍ͨͳʔɾɾɾ


    • ͚Ͳɺ࢖ΘΕͯΔͷ͔Ͳ͏͔Λௐ΂Δͷ͕େม


    • REST API ͷ৔߹ɺΫϥΠΞϯτ࣮૷ͷத·Ͱݟʹߦ͘ඞཁ͕͋Δ


    • GraphQL API ͷ৔߹ɺΫΤϦΛݟΔ͚ͩͰΘ͔Δ!

    View full-size slide

  43. (4) API υΩϡϝϯτͱΤίγεςϜ
    • ࣮૷ͱဃ཭͠ͳ͍ API υΩϡϝϯτ͸ඇৗʹॏཁ͕ͩ


    • ݱ࣮తʹࠓͷΤίγεςϜ্ͰҰ൪༗ྗͳબ୒ࢶ͸ GraphQL Ͱ͋Δ


    • (લ൒ͷํͰ࿩ͨ͠ͷͰলུ)

    View full-size slide

  44. ͜͜·Ͱͷ·ͱΊ
    • αʔόʔؒ௨৴͸ɺ௨৴ͷίετΛԼ͛ΒΕΔͷͰɺ͔֬ʹ
    GraphQL ͷԸܙͷྔ͸ݮΔ͔΋͠Εͳ͍


    • ͕ɺͦΕͰ΋ͳ͓ GraphQL ͷ༏Ґੑ͸ଟ͘࢒͍ͬͯΔɺͱݸਓతʹ
    ͸ߟ͍͑ͯΔ

    View full-size slide

  45. શମͷ·ͱΊ

    View full-size slide

  46. શମͷ·ͱΊ
    • GraphQL Λ࢖͍ͨ͘ͳΔϞνϕʔγϣϯʹ͍ͭͯɺBackend Τϯδ
    χΞͷࢹ఺͔Β৭ʑ࿩͠·ͨ͠


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

    View full-size slide