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)

Transcript

1. Backend ΤϯδχΞࢹ఺͔Βͷ GraphQL 2024-02-08 LayerXɺελσΟαϓϦɺSHEͱߟ͑ΔɹGraphQL͕޲͍͍ͯΔݱ৔ͱ͸ʁӡ༻࣮ફLT #O ff ers_GraphQL࣮ફLT @qsona (SHEגࣜձࣾ)
2. whoami • @qsona • Working at SHE Inc. • ex- Quipper(ελσΟαϓϦ), FiNC Technologies, CyberAgent • GraphQL / Microservices / Ruby on Rails / Node.js / Prisma
3. ࠓ೔ͷൃදͷϞνϕʔγϣϯ
4. ൃදͷߏ੒ • qsona ͕ Backend ΤϯδχΞͱͯ͠ɺGraphQL ͱ͍͏Ұͭͷղ౴ʹ ḷΓண͘·ͰͷมભΛ࿩͍ͨ͠ • ݱ୅ʹ͓͍ͯ΋ Backend ʹ GraphQL ͸خ͍͠ͷ͔ͷߟ࡯
5. @qsona ͕ Backend ΤϯδχΞͱͯ͠ɺ GraphQL ͱ͍͏Ұͭͷղ౴ʹḷΓண͘·Ͱ
6. Context • 2016 ~ 2017 ೥͝Ζͷ࿩ (8೥લ!) • Ruby on Rails ͰɺϚΠΫϩαʔϏεΛ͔ͳΓਅ݋ʹ΍͍ͬͯͨ • ΫϥΠΞϯτ͸ iOS, Android, Web Frontend • Web API ʹ͍ͭͯɺ՝୊ײΛ΋͍ͬͯͨ • JSON over HTTP (REST త)
7. ౰࣌ͷ Web API ͷϝΠϯ՝୊ (1) • ಛఆͷϖʔδ޲͚ʹ࡞ΒΕͨ API ͕ଟ͍ • ࠶ར༻ੑ͕௿͍ • ෳ਺ͷ API ͷϨεϙϯεΛݟൺ΂Δͱɺಉ͡Α͏Ͱগ͠ҧ͏σʔλ ͕ฦ͖ͬͯͨΓ͢Δ => ѻ͍ʹ͍͘
9. ౰࣌ͷ Web API ͷϝΠϯ՝୊ (2) • "ਆAPI" ͕ɺ͞·͟·ͳՕॴ͔Βར༻͞Ε͕ͪ • ͍ΖΜͳσʔλ͕औΕΔศརͳ API ͳͷͰɺ৭ʑͳϢʔεέʔεͰ ࢖ΘΕͯ͠·͏ • Ϣʔεέʔεͷ௥ՃɾมԽʹԠͯ͡ɺϑΟʔϧυ͕௥Ճ͞Εͯɺ· ͢·͢ศརʹͳΔ • => ύϑΥʔϚϯε͕ѱԽ͢Δ
10. ՝୊ͷ෼ੳ • ՝୊1,2͸ɺਅٯͷΑ͏ʹݟ͑Δ͕... • ࠶ར༻ੑ͕௿͍໰୊ͱɺ࠶ར༻͞Ε͗͢Δ໰୊ • ʮϑϩϯτΤϯυͷϢʔεέʔεʹ API ͕ҾͬுΒΕ͍͗ͯ͢Δʯͱ ͍͏఺Ͱɺڞ௨Ͱ͋Δ • => ϢʔεέʔεͷมԽʹରԠ͠΍͍͢Α͏ͳ API ʹ͍͖͍ͯͨ͠
11. վળͷํ޲ੑ • Ϧιʔεࢦ޲ͷ Web API ઃܭΛ໨ࢦ͍ͯͬͨ͠ • ෳ਺ͷ API Λލ͍Ͱ҆ఆతͳ "Ϧιʔε" Λఆٛ͠ɺͦΕ͕ϒϨͳ͍Α͏ʹ͢Δ • ❌ endpoint ͝ͱʹผʑͷJSONγϦΞϥΠβΛ࡞Δ • ⭕ Ϧιʔε͝ͱͷJSONγϦΞϥΠβΛ࡞ΓɺͦΕΛ࢖͍ճ͢ • 1ͭͷ API ͸ɺͳΔ΂͘1छྨͷϦιʔεΛฦ͢Α͏ʹ͢Δ • ্هΛపఈ͠΍͍͢Α͏ɺٕज़બఆͰϨʔϧΛෑ͘
12. վળͷ੒Ռ • Ϧιʔεࢦ޲ͷɺཻ౓ײͷΑ͍ API ͕ঃʑʹ૿͍͑ͯͬͨ • ਆ API Λ৽͘͠࢖ΘΕΔ͜ͱ͸ݮͬͨ • શൠతʹվળ܏޲ʹ!
13. ࣍ͳΔ՝୊ • ͜ͷҰཡը໘ɺϖΠϩʔυ͕େ͖͗͢Δɻ࢖ͬͯΔΧϥϜ͸͜Εͱ͜ Ε͚͔ͩͩΒɺͦΕʹߜΓ͍ͨͳ • ͬͪ͜ͷը໘Ͱ͸ɺ͜͜·Ͱωετ͞Εͨ৘ใΛऔΓ͍ͨͳ
14. ࣍ͳΔ՝୊ͷղܾࡦ • ଞࣾ͞Μ (Wantedly) ͷࣄྫ ... fi elds, include ΛΫΤϦύϥϝʔλͰ ౉ͤΔΑ͏ʹ͢Δ ग़య
    3BJMT
    ΞϓϦʹ
    3&45GVM
    "1*
    ͷϨʔϧΛෑ͍ͯੜ࢈ੑ͕େ্͖͕ͬͨ͘࿩
    c
    8BOUFEMZ
    &OHJOFFS
    #MPH
15. ͜͜·Ͱͷ·ͱΊ • Web API ΛɺϦιʔεࢦ޲ʹد͍ͤͨ • ࣗવͱϦιʔεࢦ޲ͷ API ʹͳΔΑ͏ʹɺٕज़બఆͰϨʔϧΛෑ͖͍ͨ • ͦͷ্ͰɺσʔλͷऔΓํʹ͸ॊೈੑΛ͍࣋ͨͤͨͱ͖͕͋Δ • ϑΟʔϧυࢦఆ • ωετͨ͠Ϧιʔεͷऔಘ • ͦΕͬͯͭ·Γ...
16. ʊਓਓਓਓਓʊ ʼɹGraphQLɹʻ ʉY^Y^Y^Y^Y^ʉ
17. GraphQL ͕՝୊Λղܾ͢Δ (1) • Ϧιʔεࢦ޲ʹد͍ͤͨ... • => GraphQL Type ͕ϦιʔεΛද͢ • ٯʹɺϢʔεέʔε͝ͱʹ API Λ࡞ΔΑ͏ͳख๏͸ɺGraphQL ͩͱ ۃ୺ʹ΍Γʹ͍͘ (= ٕज़ͰϨʔϧΛෑ͘͜ͱ͕Ͱ͖͍ͯΔ)
18. GraphQL ͕՝୊Λղܾ͢Δ (2) • σʔλͷऔΓํʹ͸ॊೈੑΛ͍࣋ͨͤͨ • => ·͞ʹ GraphQL ͷ Query ʹΑͬͯղܾ͞ΕΔ՝୊ • ༨ஊ: ઌ΄Ͳͷ Wantedly (஛໺͞Μ) ͷهࣄ͸ 2017೥ • গͳ͘ͱ΋ͦͷ2೥લ (2015) ʹ͸࣮ફ͞Εͯͨ͸ͣ • ͦͷࠒ͸ GraphQL ͸΄΅೔ຊ্཮ͯ͠ͳ͔ͬͨ (ॳग़͕2014) • ઌݟͷ໌͕͋Δͳͱײ͡Δ
19. ౰࣌ͷ Web API ͷ՝୊ (3) • API υΩϡϝϯτ͕ͳ͔ͬͨ • ਖ਼֬ʹ͸ɺendpoint ͱͦͷ request parameters ͸ҰཡͰݟΕΔঢ়ଶ • ruby-grape/grape ͱ͍͏ϑϨʔϜϫʔΫΛར༻͍ͯͨ͠ • ্هΛએݴతʹॻ͚ͯɺSwagger Λు͖ग़͢͜ͱ͕Ͱ͖ͨ • ͕ɺResponse body ͷܕͷυΩϡϝϯτ͸ͳ͔ͬͨ • ΫϥΠΞϯτ͕৽͘͠ػೳΛ։ൃ͢Δͱ͖ʹෆศ
20. վળͷํ޲ੑ • OpenAPI ͰυΩϡϝϯτΛॻ͍͍ͯ͘ • ౰࣌ OpenAPI 3.0 ͕ͪΐ͏Ͳग़ͦ͏ͳࠒͩͬͨͷͰɺͦΕʹ৐ͬͯ ߦͬͨ
21. ࣍ͳΔ՝୊ • ͔ͤͬ͘υΩϡϝϯτΛॻ͍ͯ΋ɺ࣮ࡍͷ࣮૷ͱဃ཭ͯ͠͠·͏ • υΩϡϝϯτͷ৴པੑ͕ബΕΔ...
22. ࣍ͳΔ՝୊ͷղܾࡦ • OpenAPI ͷυΩϡϝϯτΛ࢖ͬͯɺrequest/response ΛόϦσʔ γϣϯ͢Δ͜ͱͰɺဃ཭Λ๷͙ • interagent/committee • Ruby ͷ Web API Ͱɺ্هΛୡ੒Ͱ͖ΔϥΠϒϥϦ • ౰࣌ OpenAPI 2.0 ʹ͔͠ରԠ͍ͯ͠ͳ͔ͬͨͷͰɺ3.0 ͷରԠΛ νʔϜͰਐΊͯ contribute ͨ͠
23. ʊਓਓਓਓਓʊ ʼɹGraphQLɹʻ ʉY^Y^Y^Y^Y^ʉ
24. GraphQL ͕՝୊Λղܾ͢Δ (3) • GraphQL Schema ͕ͦͷ·· API υΩϡϝϯτͰ͋Δ • ࣮૷ͱͷဃ཭͸ɺ·ͣى͖ͳ͍ • request ͕ؒҧ͍ͬͯͨΓɺresponse Λਖ਼͘͠ฦ͍ͤͯͳ͍৔߹ɺ GraphQL αʔόʔ͕ΤϥʔΛు͘
25. ౰࣌ͷ Web API ͷ՝୊ (4) ΤίγεςϜ • Web API վળͷจ຺ͰɺΤίγεςϜͷ؍఺Ͱ΋ͦΕͳΓʹۤ࿑ͨ͠ • Ϧιʔεࢦ޲ͷϨʔϧΛෑͨ͘Ίʹɺactive_model_serializers ͱ͍͏ gem Λબఆͨ͠ => ͦͷޙϝϯςφϯε͕ࢭ·ͬͯ͠·ͬͨ • committee gem ͷ OpenAPI 3ܥରԠΛࣗ෼ͨͪͰ͢Δඞཁ͕͋ͬͨ
26. ʊਓਓਓਓਓʊ ʼɹGraphQLɹʻ ʉY^Y^Y^Y^Y^ʉ
27. ͜͜·Ͱͷ·ͱΊ • ͋Δఔ౓ن໛͕େ͖͘ͳͬͨαʔϏεͰ͸ɺWeb API ͸ҎԼͷΑ͏ͳ ੑ࣭Λຬͨͯ͠ཉ͍͠ • Ϧιʔεࢦ޲Ͱ͋Δ (ٕज़બఆͰϨʔϧΛෑ͖͍ͨ) • σʔλऔಘʹҰఆͷॊೈੑ͕͋Δ • ࣮૷ͱဃ཭͠ͳ͍ API υΩϡϝϯτ͕खʹೖΔ • GraphQL ͸͜ΕΒͷੑ࣭Λશͯຬ͔ͨ͢Β࠷ߴ
28. ݱ୅ʹ͓͍ͯ΋ Backend ʹ GraphQL ͸خ͍͠ͷ͔?
29. ݱ୅ͰΑ͋͘ΔΞʔΩςΫνϟߏ੒ • Backend ͕ෳ਺ (Microservices) ͋ΓɺͦΕΛ·ͱΊΔ Gateway తͳ αʔόʔ͕͋Δ
30. Α͋͘Δ GraphQL ͷ࢖ΘΕํ • Frontend ΤϯδχΞ͕خ͍͠ GraphQL Gateway • ཪ͸ REST ΍ gRPC ͷ͜ͱ͕ଟ͍
31. @qsona ͷϞνϕʔγϣϯ • Backend αʔόʔ͔Β GraphQL API Λఏڙ͍ͨ͠ • Backend ؒ΋ GraphQL ʹ͍ͨ͠
32. React Server Components / Next.js App Router • React Server Components (RSC) ͷ୆಄ʹΑΓɺGraphQL ͕ෆཁʹ ͳΔ͔΋͠Εͳ͍ੈքઢͷ࿩ • ඇઐ໳ՈͳͷͰɺ͋·Γποί·Εͳ͍ఔ౓ʹ...
33. React Server Components / Next.js App Router • RSC ʹΑͬͯ݁ՌతʹɺServer-Side Rendering (SSR) Ͱ͖Δ෯͕޿ ͕ΔɻSSR Ͱͷ API ݺͼग़͠͸αʔόʔؒ௨৴ͳͷͰɺ௨৴ͷίετ ͕௿͍ɻ • ࡉཻ͔͍౓ͷ API ݺͼग़͕͠ਪ঑͞ΕΔ • => GraphQL Ͱ͋Δඞཁੑ͕ബΕΔ
34. React Server Components / Next.js App Router • Ұ୴ɺͱͯ΋ࢀߟʹͳΔهࣄΛஔ͍͓͖ͯ·͢ ग़య
    3FBDU
    4FSWFS
    $PNQPOFOUT
    ͱ
    (SBQI2-
    ͷΞφϩδʔ
    c
    CZ
    :PTVLF
    ,VSBNJ
    c
    %FD
    
    c
    .FEJVN
35. React Server Components / Next.js App Router • Ҏ্ͷ͜ͱΛߟ͑ΔͱɺBackend API ͕ GraphQL Ͱ͋Δඞવੑ͸ɺ͔ͳΓ͔֬ ʹബΕΔΑ͏ʹࢥ͏ • Ϧιʔεࢦ޲ͷ API Ͱ͋Δඞཁ͕͋Δ఺͸ಉ͡Ͱ͋Δ͕ • ͦΕ͸ REST ΍ gRPC ͳͲͰ΋࣮ݱͰ͖Δ͠ɺαʔόʔؒ௨৴ͳͷͰύϑΥʔ Ϛϯε؍఺ͷωοΫ͕গͳ͘ͳ͍ͬͯΔ • Ͱ͸ɺGraphQL ͷ༏Ґੑ͸ͳ͘ͳΔͷ͔? (ଞʹ͋Δͷ͔?) • => GraphQL ޷͖ͱͯ͠ɺଞͷ༏ҐੑΛ4ͭ΄Ͳఏࣔͯ͠ΈΔ
36. (1) iOS / Android app ͳͲͷߟྀ • RSC ͷ࿩Λͯ͠ΔΜ͔ͩΒ Web Frontend Ҏ֎Λ࣋ͪग़͢ͷ͸ζϧ͍ ͱࢥ͏͔΋͠Εͳ͍͕ɺ·͋଴ͯɺͪΐͬͱฉ͍ͯ͘Ε • ࠷ॳ͸ Web Frontend ΞϓϦ͔Β࡞Γ࢝ΊΔ͔΋͠Εͳ͍ɻ͍͍ͩͨ ਺೥ޙʹɺ΍ͬͺΓωΠςΟϒΞϓϦ΋ཉ͍͠ΑͶͱͳΔ • ٕज़ऀͱͯ͠͸ɺͦ͏͍͏ঢ়گʹରԠͰ͖ΔΑ͏ʹ͓͖͍ͯͨ͠
37. (1) iOS / Android app ͳͲͷߟྀ • બ୒ࢶ: BFF (Backends for Frontends) ύλʔϯ
38. (1) iOS / Android app ͳͲͷߟྀ • બ୒ࢶ: BFF (Backends for Frontends) ύλʔϯ • ී௨ʹ༗ྗͳબ୒ࢶͰ͋Δ͕ • qsona ΋ੲݚڀͯͨ͠ • γϯϓϧʹ։ൃɾӡ༻ͷίετ͕ߴ͍
39. (1) iOS / Android app ͳͲͷߟྀ • ։ൃͷ࠷ॳ͔Β GraphQL Gateway ͕͋Δͱɺ͔ͳΓָͰ͖Δ • ཪଆ͕ GraphQL Ͱग़དྷ͍ͯΔͱɺඇৗʹ௿ίετͰ GraphQL GatewayΛ࡞Δ͜ͱ͕Ͱ͖Δ (ਪ͠)
40. (1) iOS / Android app ͳͲͷߟྀ
41. (2) ωοτϫʔΫϨϕϧͰͷ N+1 ໰୊ΛճආͰ͖Δ • React Server Components Ͱ͸ɺࡉ͔͍୯ҐͷίϯϙʔωϯτͰͦΕͧΕ API Ϧ ΫΤετΛૹΔ͜ͱ͕ਪ঑͞Ε͍ͯΔ • φΠʔϒʹ࣮૷͢ΔͱɺωοτϫʔΫϨϕϧͰͷ N+1 ໰୊͕ى͖͏Δ • Ұཡը໘ͷ਌ίϯϙʔωϯτͰ1ճ • ͦͷ֤ཁૉͷίϯϙʔωϯτͰNճ • ͜Ε͸ GraphQL API Ͱ΋αʔόʔ಺ͰΑ͘ى͖Δ໰୊͕ͩɺى͖ͨ࣌ͷμϝʔδ ͷϨϕϧ͕͍ͩͿҧ͏w
42. (2) ωοτϫʔΫϨϕϧͰͷ N+1 ໰୊ΛճආͰ͖Δ • ஫ҙਂ͘ઃܭ͢Ε͹ճආͰ͖Δ (Quramy ͞Μͷࢿྉࢀর) • ͕ɺຊ౰ʹΈΜͳͪΌΜͱճආͯ͘͠ΕΔ͔͸ٙ໰͋Γ...w ग़య
    3FBDU
    4FSWFS
    $PNQPOFOUT
    ͱ
    (SBQI2-
    ͷΞφϩδʔ
    c
    CZ
    :PTVLF
    ,VSBNJ
    c
    %FD
    
    c
    .FEJVN
43. (3) API ͷਐԽΛͤ͞΍͍͢ • ͜ͷ API ͷϨεϙϯεͷ͜ͷϑΟʔϧυɺ୭΋࢖ͬͯͳ͍ͳΒ࡟আ͠ ͍ͨͳʔɾɾɾ • ͚Ͳɺ࢖ΘΕͯΔͷ͔Ͳ͏͔Λௐ΂Δͷ͕େม • REST API ͷ৔߹ɺΫϥΠΞϯτ࣮૷ͷத·Ͱݟʹߦ͘ඞཁ͕͋Δ • GraphQL API ͷ৔߹ɺΫΤϦΛݟΔ͚ͩͰΘ͔Δ!
44. (4) API υΩϡϝϯτͱΤίγεςϜ • ࣮૷ͱဃ཭͠ͳ͍ API υΩϡϝϯτ͸ඇৗʹॏཁ͕ͩ • ݱ࣮తʹࠓͷΤίγεςϜ্ͰҰ൪༗ྗͳબ୒ࢶ͸ GraphQL Ͱ͋Δ • (લ൒ͷํͰ࿩ͨ͠ͷͰলུ)
45. ͜͜·Ͱͷ·ͱΊ • αʔόʔؒ௨৴͸ɺ௨৴ͷίετΛԼ͛ΒΕΔͷͰɺ͔֬ʹ GraphQL ͷԸܙͷྔ͸ݮΔ͔΋͠Εͳ͍ • ͕ɺͦΕͰ΋ͳ͓ GraphQL ͷ༏Ґੑ͸ଟ͘࢒͍ͬͯΔɺͱݸਓతʹ ͸ߟ͍͑ͯΔ
46. શମͷ·ͱΊ
47. શମͷ·ͱΊ • GraphQL Λ࢖͍ͨ͘ͳΔϞνϕʔγϣϯʹ͍ͭͯɺBackend Τϯδ χΞͷࢹ఺͔Β৭ʑ࿩͠·ͨ͠ • ݸਓతʹ͸ GraphQL ͸ "ؤ݈ͳϞσϧ" ͩͱײ͍ͯͯ͡ɺࠓޙ΋͔ͳ Γ௕͍ؒ࢖ΘΕ͍ͯ͘΋ͷʹͳΔΜͰ͸ͳ͍͔ͳͱࢥ͍ͬͯΔ