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

Slide 1

Slide 1 text

Backend ΤϯδχΞࢹ఺͔Βͷ GraphQL 2024-02-08 LayerXɺελσΟαϓϦɺSHEͱߟ͑ΔɹGraphQL͕޲͍͍ͯΔݱ৔ͱ͸ʁӡ༻࣮ફLT #O ff ers_GraphQL࣮ફLT @qsona (SHEגࣜձࣾ)

Slide 2

Slide 2 text

whoami • @qsona • Working at SHE Inc. • ex- Quipper(ελσΟαϓϦ), FiNC Technologies, CyberAgent • GraphQL / Microservices / Ruby on Rails / Node.js / Prisma

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ൃදͷߏ੒ • qsona ͕ Backend ΤϯδχΞͱͯ͠ɺGraphQL ͱ͍͏Ұͭͷղ౴ʹ ḷΓண͘·ͰͷมભΛ࿩͍ͨ͠ • ݱ୅ʹ͓͍ͯ΋ Backend ʹ GraphQL ͸خ͍͠ͷ͔ͷߟ࡯

Slide 5

Slide 5 text

@qsona ͕ Backend ΤϯδχΞͱͯ͠ɺ GraphQL ͱ͍͏Ұͭͷղ౴ʹḷΓண͘·Ͱ

Slide 6

Slide 6 text

Context • 2016 ~ 2017 ೥͝Ζͷ࿩ (8೥લ!) • Ruby on Rails ͰɺϚΠΫϩαʔϏεΛ͔ͳΓਅ݋ʹ΍͍ͬͯͨ • ΫϥΠΞϯτ͸ iOS, Android, Web Frontend • Web API ʹ͍ͭͯɺ՝୊ײΛ΋͍ͬͯͨ • JSON over HTTP (REST త)

Slide 7

Slide 7 text

౰࣌ͷ Web API ͷϝΠϯ՝୊ (1) • ಛఆͷϖʔδ޲͚ʹ࡞ΒΕͨ API ͕ଟ͍ • ࠶ར༻ੑ͕௿͍ • ෳ਺ͷ API ͷϨεϙϯεΛݟൺ΂Δͱɺಉ͡Α͏Ͱগ͠ҧ͏σʔλ ͕ฦ͖ͬͯͨΓ͢Δ => ѻ͍ʹ͍͘

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

౰࣌ͷ Web API ͷϝΠϯ՝୊ (2) • "ਆAPI" ͕ɺ͞·͟·ͳՕॴ͔Βར༻͞Ε͕ͪ • ͍ΖΜͳσʔλ͕औΕΔศརͳ API ͳͷͰɺ৭ʑͳϢʔεέʔεͰ ࢖ΘΕͯ͠·͏ • Ϣʔεέʔεͷ௥ՃɾมԽʹԠͯ͡ɺϑΟʔϧυ͕௥Ճ͞Εͯɺ· ͢·͢ศརʹͳΔ • => ύϑΥʔϚϯε͕ѱԽ͢Δ

Slide 10

Slide 10 text

՝୊ͷ෼ੳ • ՝୊1,2͸ɺਅٯͷΑ͏ʹݟ͑Δ͕... • ࠶ར༻ੑ͕௿͍໰୊ͱɺ࠶ར༻͞Ε͗͢Δ໰୊ • ʮϑϩϯτΤϯυͷϢʔεέʔεʹ API ͕ҾͬுΒΕ͍͗ͯ͢Δʯͱ ͍͏఺Ͱɺڞ௨Ͱ͋Δ • => ϢʔεέʔεͷมԽʹରԠ͠΍͍͢Α͏ͳ API ʹ͍͖͍ͯͨ͠

Slide 11

Slide 11 text

վળͷํ޲ੑ • Ϧιʔεࢦ޲ͷ Web API ઃܭΛ໨ࢦ͍ͯͬͨ͠ • ෳ਺ͷ API Λލ͍Ͱ҆ఆతͳ "Ϧιʔε" Λఆٛ͠ɺͦΕ͕ϒϨͳ͍Α͏ʹ͢Δ • ❌ endpoint ͝ͱʹผʑͷJSONγϦΞϥΠβΛ࡞Δ • ⭕ Ϧιʔε͝ͱͷJSONγϦΞϥΠβΛ࡞ΓɺͦΕΛ࢖͍ճ͢ • 1ͭͷ API ͸ɺͳΔ΂͘1छྨͷϦιʔεΛฦ͢Α͏ʹ͢Δ • ্هΛపఈ͠΍͍͢Α͏ɺٕज़બఆͰϨʔϧΛෑ͘

Slide 12

Slide 12 text

վળͷ੒Ռ • Ϧιʔεࢦ޲ͷɺཻ౓ײͷΑ͍ API ͕ঃʑʹ૿͍͑ͯͬͨ • ਆ API Λ৽͘͠࢖ΘΕΔ͜ͱ͸ݮͬͨ • શൠతʹվળ܏޲ʹ!

Slide 13

Slide 13 text

࣍ͳΔ՝୊ • ͜ͷҰཡը໘ɺϖΠϩʔυ͕େ͖͗͢Δɻ࢖ͬͯΔΧϥϜ͸͜Εͱ͜ Ε͚͔ͩͩΒɺͦΕʹߜΓ͍ͨͳ • ͬͪ͜ͷը໘Ͱ͸ɺ͜͜·Ͱωετ͞Εͨ৘ใΛऔΓ͍ͨͳ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

͜͜·Ͱͷ·ͱΊ • Web API ΛɺϦιʔεࢦ޲ʹد͍ͤͨ • ࣗવͱϦιʔεࢦ޲ͷ API ʹͳΔΑ͏ʹɺٕज़બఆͰϨʔϧΛෑ͖͍ͨ • ͦͷ্ͰɺσʔλͷऔΓํʹ͸ॊೈੑΛ͍࣋ͨͤͨͱ͖͕͋Δ • ϑΟʔϧυࢦఆ • ωετͨ͠Ϧιʔεͷऔಘ • ͦΕͬͯͭ·Γ...

Slide 16

Slide 16 text

ʊਓਓਓਓਓʊ ʼɹGraphQLɹʻ ʉY^Y^Y^Y^Y^ʉ

Slide 17

Slide 17 text

GraphQL ͕՝୊Λղܾ͢Δ (1) • Ϧιʔεࢦ޲ʹد͍ͤͨ... • => GraphQL Type ͕ϦιʔεΛද͢ • ٯʹɺϢʔεέʔε͝ͱʹ API Λ࡞ΔΑ͏ͳख๏͸ɺGraphQL ͩͱ ۃ୺ʹ΍Γʹ͍͘ (= ٕज़ͰϨʔϧΛෑ͘͜ͱ͕Ͱ͖͍ͯΔ)

Slide 18

Slide 18 text

GraphQL ͕՝୊Λղܾ͢Δ (2) • σʔλͷऔΓํʹ͸ॊೈੑΛ͍࣋ͨͤͨ • => ·͞ʹ GraphQL ͷ Query ʹΑͬͯղܾ͞ΕΔ՝୊ • ༨ஊ: ઌ΄Ͳͷ Wantedly (஛໺͞Μ) ͷهࣄ͸ 2017೥ • গͳ͘ͱ΋ͦͷ2೥લ (2015) ʹ͸࣮ફ͞Εͯͨ͸ͣ • ͦͷࠒ͸ GraphQL ͸΄΅೔ຊ্཮ͯ͠ͳ͔ͬͨ (ॳग़͕2014) • ઌݟͷ໌͕͋Δͳͱײ͡Δ

Slide 19

Slide 19 text

౰࣌ͷ Web API ͷ՝୊ (3) • API υΩϡϝϯτ͕ͳ͔ͬͨ • ਖ਼֬ʹ͸ɺendpoint ͱͦͷ request parameters ͸ҰཡͰݟΕΔঢ়ଶ • ruby-grape/grape ͱ͍͏ϑϨʔϜϫʔΫΛར༻͍ͯͨ͠ • ্هΛએݴతʹॻ͚ͯɺSwagger Λు͖ग़͢͜ͱ͕Ͱ͖ͨ • ͕ɺResponse body ͷܕͷυΩϡϝϯτ͸ͳ͔ͬͨ • ΫϥΠΞϯτ͕৽͘͠ػೳΛ։ൃ͢Δͱ͖ʹෆศ

Slide 20

Slide 20 text

վળͷํ޲ੑ • OpenAPI ͰυΩϡϝϯτΛॻ͍͍ͯ͘ • ౰࣌ OpenAPI 3.0 ͕ͪΐ͏Ͳग़ͦ͏ͳࠒͩͬͨͷͰɺͦΕʹ৐ͬͯ ߦͬͨ

Slide 21

Slide 21 text

࣍ͳΔ՝୊ • ͔ͤͬ͘υΩϡϝϯτΛॻ͍ͯ΋ɺ࣮ࡍͷ࣮૷ͱဃ཭ͯ͠͠·͏ • υΩϡϝϯτͷ৴པੑ͕ബΕΔ...

Slide 22

Slide 22 text

࣍ͳΔ՝୊ͷղܾࡦ • OpenAPI ͷυΩϡϝϯτΛ࢖ͬͯɺrequest/response ΛόϦσʔ γϣϯ͢Δ͜ͱͰɺဃ཭Λ๷͙ • interagent/committee • Ruby ͷ Web API Ͱɺ্هΛୡ੒Ͱ͖ΔϥΠϒϥϦ • ౰࣌ OpenAPI 2.0 ʹ͔͠ରԠ͍ͯ͠ͳ͔ͬͨͷͰɺ3.0 ͷରԠΛ νʔϜͰਐΊͯ contribute ͨ͠

Slide 23

Slide 23 text

ʊਓਓਓਓਓʊ ʼɹGraphQLɹʻ ʉY^Y^Y^Y^Y^ʉ

Slide 24

Slide 24 text

GraphQL ͕՝୊Λղܾ͢Δ (3) • GraphQL Schema ͕ͦͷ·· API υΩϡϝϯτͰ͋Δ • ࣮૷ͱͷဃ཭͸ɺ·ͣى͖ͳ͍ • request ͕ؒҧ͍ͬͯͨΓɺresponse Λਖ਼͘͠ฦ͍ͤͯͳ͍৔߹ɺ GraphQL αʔόʔ͕ΤϥʔΛు͘

Slide 25

Slide 25 text

౰࣌ͷ Web API ͷ՝୊ (4) ΤίγεςϜ • Web API վળͷจ຺ͰɺΤίγεςϜͷ؍఺Ͱ΋ͦΕͳΓʹۤ࿑ͨ͠ • Ϧιʔεࢦ޲ͷϨʔϧΛෑͨ͘Ίʹɺactive_model_serializers ͱ͍͏ gem Λબఆͨ͠ => ͦͷޙϝϯςφϯε͕ࢭ·ͬͯ͠·ͬͨ • committee gem ͷ OpenAPI 3ܥରԠΛࣗ෼ͨͪͰ͢Δඞཁ͕͋ͬͨ

Slide 26

Slide 26 text

ʊਓਓਓਓਓʊ ʼɹGraphQLɹʻ ʉY^Y^Y^Y^Y^ʉ

Slide 27

Slide 27 text

͜͜·Ͱͷ·ͱΊ • ͋Δఔ౓ن໛͕େ͖͘ͳͬͨαʔϏεͰ͸ɺWeb API ͸ҎԼͷΑ͏ͳ ੑ࣭Λຬͨͯ͠ཉ͍͠ • Ϧιʔεࢦ޲Ͱ͋Δ (ٕज़બఆͰϨʔϧΛෑ͖͍ͨ) • σʔλऔಘʹҰఆͷॊೈੑ͕͋Δ • ࣮૷ͱဃ཭͠ͳ͍ API υΩϡϝϯτ͕खʹೖΔ • GraphQL ͸͜ΕΒͷੑ࣭Λશͯຬ͔ͨ͢Β࠷ߴ

Slide 28

Slide 28 text

ݱ୅ʹ͓͍ͯ΋ Backend ʹ GraphQL ͸خ͍͠ͷ͔?

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Α͋͘Δ GraphQL ͷ࢖ΘΕํ • Frontend ΤϯδχΞ͕خ͍͠ GraphQL Gateway • ཪ͸ REST ΍ gRPC ͷ͜ͱ͕ଟ͍

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

React Server Components / Next.js App Router • React Server Components (RSC) ͷ୆಄ʹΑΓɺGraphQL ͕ෆཁʹ ͳΔ͔΋͠Εͳ͍ੈքઢͷ࿩ • ඇઐ໳ՈͳͷͰɺ͋·Γποί·Εͳ͍ఔ౓ʹ...

Slide 33

Slide 33 text

React Server Components / Next.js App Router • RSC ʹΑͬͯ݁ՌతʹɺServer-Side Rendering (SSR) Ͱ͖Δ෯͕޿ ͕ΔɻSSR Ͱͷ API ݺͼग़͠͸αʔόʔؒ௨৴ͳͷͰɺ௨৴ͷίετ ͕௿͍ɻ • ࡉཻ͔͍౓ͷ API ݺͼग़͕͠ਪ঑͞ΕΔ • => GraphQL Ͱ͋Δඞཁੑ͕ബΕΔ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

React Server Components / Next.js App Router • Ҏ্ͷ͜ͱΛߟ͑ΔͱɺBackend API ͕ GraphQL Ͱ͋Δඞવੑ͸ɺ͔ͳΓ͔֬ ʹബΕΔΑ͏ʹࢥ͏ • Ϧιʔεࢦ޲ͷ API Ͱ͋Δඞཁ͕͋Δ఺͸ಉ͡Ͱ͋Δ͕ • ͦΕ͸ REST ΍ gRPC ͳͲͰ΋࣮ݱͰ͖Δ͠ɺαʔόʔؒ௨৴ͳͷͰύϑΥʔ Ϛϯε؍఺ͷωοΫ͕গͳ͘ͳ͍ͬͯΔ • Ͱ͸ɺGraphQL ͷ༏Ґੑ͸ͳ͘ͳΔͷ͔? (ଞʹ͋Δͷ͔?) • => GraphQL ޷͖ͱͯ͠ɺଞͷ༏ҐੑΛ4ͭ΄Ͳఏࣔͯ͠ΈΔ

Slide 36

Slide 36 text

(1) iOS / Android app ͳͲͷߟྀ • RSC ͷ࿩Λͯ͠ΔΜ͔ͩΒ Web Frontend Ҏ֎Λ࣋ͪग़͢ͷ͸ζϧ͍ ͱࢥ͏͔΋͠Εͳ͍͕ɺ·͋଴ͯɺͪΐͬͱฉ͍ͯ͘Ε • ࠷ॳ͸ Web Frontend ΞϓϦ͔Β࡞Γ࢝ΊΔ͔΋͠Εͳ͍ɻ͍͍ͩͨ ਺೥ޙʹɺ΍ͬͺΓωΠςΟϒΞϓϦ΋ཉ͍͠ΑͶͱͳΔ • ٕज़ऀͱͯ͠͸ɺͦ͏͍͏ঢ়گʹରԠͰ͖ΔΑ͏ʹ͓͖͍ͯͨ͠

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

(1) iOS / Android app ͳͲͷߟྀ • બ୒ࢶ: BFF (Backends for Frontends) ύλʔϯ • ී௨ʹ༗ྗͳબ୒ࢶͰ͋Δ͕ • qsona ΋ੲݚڀͯͨ͠ • γϯϓϧʹ։ൃɾӡ༻ͷίετ͕ߴ͍

Slide 39

Slide 39 text

(1) iOS / Android app ͳͲͷߟྀ • ։ൃͷ࠷ॳ͔Β GraphQL Gateway ͕͋Δͱɺ͔ͳΓָͰ͖Δ • ཪଆ͕ GraphQL Ͱग़དྷ͍ͯΔͱɺඇৗʹ௿ίετͰ GraphQL GatewayΛ࡞Δ͜ͱ͕Ͱ͖Δ (ਪ͠)

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

(2) ωοτϫʔΫϨϕϧͰͷ N+1 ໰୊ΛճආͰ͖Δ • React Server Components Ͱ͸ɺࡉ͔͍୯ҐͷίϯϙʔωϯτͰͦΕͧΕ API Ϧ ΫΤετΛૹΔ͜ͱ͕ਪ঑͞Ε͍ͯΔ • φΠʔϒʹ࣮૷͢ΔͱɺωοτϫʔΫϨϕϧͰͷ N+1 ໰୊͕ى͖͏Δ • Ұཡը໘ͷ਌ίϯϙʔωϯτͰ1ճ • ͦͷ֤ཁૉͷίϯϙʔωϯτͰNճ • ͜Ε͸ GraphQL API Ͱ΋αʔόʔ಺ͰΑ͘ى͖Δ໰୊͕ͩɺى͖ͨ࣌ͷμϝʔδ ͷϨϕϧ͕͍ͩͿҧ͏w

Slide 42

Slide 42 text

(2) ωοτϫʔΫϨϕϧͰͷ N+1 ໰୊ΛճආͰ͖Δ • ஫ҙਂ͘ઃܭ͢Ε͹ճආͰ͖Δ (Quramy ͞Μͷࢿྉࢀর) • ͕ɺຊ౰ʹΈΜͳͪΌΜͱճආͯ͘͠ΕΔ͔͸ٙ໰͋Γ...w ग़య3FBDU4FSWFS$PNQPOFOUTͱ(SBQI2-ͷΞφϩδʔcCZ:PTVLF,VSBNJc%FD c.FEJVN

Slide 43

Slide 43 text

(3) API ͷਐԽΛͤ͞΍͍͢ • ͜ͷ API ͷϨεϙϯεͷ͜ͷϑΟʔϧυɺ୭΋࢖ͬͯͳ͍ͳΒ࡟আ͠ ͍ͨͳʔɾɾɾ • ͚Ͳɺ࢖ΘΕͯΔͷ͔Ͳ͏͔Λௐ΂Δͷ͕େม • REST API ͷ৔߹ɺΫϥΠΞϯτ࣮૷ͷத·Ͱݟʹߦ͘ඞཁ͕͋Δ • GraphQL API ͷ৔߹ɺΫΤϦΛݟΔ͚ͩͰΘ͔Δ!

Slide 44

Slide 44 text

(4) API υΩϡϝϯτͱΤίγεςϜ • ࣮૷ͱဃ཭͠ͳ͍ API υΩϡϝϯτ͸ඇৗʹॏཁ͕ͩ • ݱ࣮తʹࠓͷΤίγεςϜ্ͰҰ൪༗ྗͳબ୒ࢶ͸ GraphQL Ͱ͋Δ • (લ൒ͷํͰ࿩ͨ͠ͷͰলུ)

Slide 45

Slide 45 text

͜͜·Ͱͷ·ͱΊ • αʔόʔؒ௨৴͸ɺ௨৴ͷίετΛԼ͛ΒΕΔͷͰɺ͔֬ʹ GraphQL ͷԸܙͷྔ͸ݮΔ͔΋͠Εͳ͍ • ͕ɺͦΕͰ΋ͳ͓ GraphQL ͷ༏Ґੑ͸ଟ͘࢒͍ͬͯΔɺͱݸਓతʹ ͸ߟ͍͑ͯΔ

Slide 46

Slide 46 text

શମͷ·ͱΊ

Slide 47

Slide 47 text

શମͷ·ͱΊ • GraphQL Λ࢖͍ͨ͘ͳΔϞνϕʔγϣϯʹ͍ͭͯɺBackend Τϯδ χΞͷࢹ఺͔Β৭ʑ࿩͠·ͨ͠ • ݸਓతʹ͸ GraphQL ͸ "ؤ݈ͳϞσϧ" ͩͱײ͍ͯͯ͡ɺࠓޙ΋͔ͳ Γ௕͍ؒ࢖ΘΕ͍ͯ͘΋ͷʹͳΔΜͰ͸ͳ͍͔ͳͱࢥ͍ͬͯΔ