GraphQLの話 (API for Front-end)

by KOBA789

Slide 1

Slide 1 text

API for Front-end KOBA789

Slide 2

Slide 2 text

KOBA789 େੲʹ  ʮαʔόʔαΠυJavaScript Node.js ೖ໳ʯ  ͱ͍͏ຊͷࣥචͷ͓ख఻͍Λ͠·ͨ͠ ࠓ͸ஜ೾େֶͰB2 ࠷ۙ͸ΞΠΧπͷਓͱͯ͠ੜ͖͍ͯ·͢

Slide 3

Slide 3 text

໨ඪ: GraphQLͷඞཁੑΛཧղ͢Δ

Slide 4

Slide 4 text

ྲྀΕ 1.RESTful API࠶ߟ 2.ϑϩϯτΤϯυͱ͸ 3.ϑϩϯτΤϯυʹخ͍͠API

Slide 5

Slide 5 text

ॱΛ௥ͬͯ΍͍͖ͬͯ·͢ ·ͣ͸໰୊ҙࣝͷڞ༗͔Β

Slide 6

Slide 6 text

໰਍ ✓ϑϩϯτΤϯυ͸ͭΒ͍ ✓RESTful API͸ͭΒ͍ ✓APIͷ࢓༷ʹΩϨͨ͜ͱ͕͋Δ

Slide 7

Slide 7 text

1. RESTful API࠶ߟ

Slide 8

Slide 8 text

RESTful API Έͳ͞Μ͝ଘ஌ Ͱ΋ຊ౰ʹ?

Slide 9

Slide 9 text

΍ͬͯΈ·͠ΐ͏

Slide 10

Slide 10 text

// ϒϩάهࣄ(id=1)Λऔಘ GET /articles/1 // ϒϩάهࣄ(id=1)ͷίϝϯτͷҰཡ GET /articles/1/comments // ϒϩάهࣄ(id=1)ΛίϝϯτҰཡͱචऀ෇͖Ͱ ͏ʔΜ…… GET /articles/1?embeds[]=comments&embeds[]=author // ͋ɺ΍ͬͺίϝϯτ͸಄ͷ3͚݅ͩͰ GET /articles/1?embeds[]=author GET /comments/?article_id=1&count=3

Slide 11

Slide 11 text

ςʔϒϧ͕ಁ͚ͯݟ͑Δ ශऑͳSQL͕΄͍͠Θ͚͡Όͳ͍

Slide 12

Slide 12 text

ސ٬͕ٻΊ͍ͯͨ΋ͷ article.title article.comments[0...3] article.author.name

Slide 13

Slide 13 text

// VM(id=1)Λγϟοτμ΢ϯ ͏ʔΜɺిݯ͸αϒϦιʔε͔ͳ…… DELETE /machines/1/power // VM(id=1)Λڧ੍γϟοτμ΢ϯ ΫΤϦύϥϝʔλ͔ͳ…… DELETE /machines/1/power?force=true // ిݯͷঢ়ଶΛऔಘ GET /machines/1/power ϨεϙϯεϘσΟͷ಺༰ͬͯͳΜͳΜͩΖ͏…… ΍ͬͺΓαϒϦιʔε͡Όͳͯ͘ଐੑͳͷ͔ͳ…… ଐੑͩͱͨ͠Βɺىಈɾऴྃ͸PATCH͔ͳ……

Slide 14

Slide 14 text

௚ײతͱ͸ఔԕ͍ ઃܭͷ߹ҙ͕औΓ΍͍͢ͱ͸ͳΜͩͬͨͷ͔

Slide 15

Slide 15 text

ސ٬͕ٻΊ͍ͯͨ΋ͷ power_off(server) force_power_off(server)

Slide 16

Slide 16 text

ͱ͜ΖͰυΩϡϝϯτ͸? Swaggerͱ͔࢖͏……?

Slide 17

Slide 17 text

2.ϑϩϯτΤϯυͱ͸ ಠࣗݚڀΛؚΉͧ

Slide 18

Slide 18 text

Q. ͱ͜ΖͰͳΜͰSPAͳ ϑϩϯτΤϯυ͸ͭΒ͍ͷα

Slide 19

Slide 19 text

A. ͨͩͷView͡Όͳ͍͔Β

Slide 20

Slide 20 text

4FSWFS #BDLFOE 'SPOUFOE M C V $MJFOU Ruby ͱ͔ Haml ϒϥ΢β

Slide 21

Slide 21 text

4FSWFS #BDLFOE 'SPOUFOE M C V $MJFOU Scala ͱ͔ JSX

Slide 22

Slide 22 text

4FSWFS #BDLFOE 'SPOUFOE M C V $MJFOU Scala ͱ͔ JSX ͍΍ɺ·͔͞

Slide 23

Slide 23 text

4FSWFS #BDLFOE M C V $MJFOU ͓޷͖ͳݴޠͰ 'SPOUFOE M C V JS΍ΒJSX΍Β ServerͷM͕SQLୟ͍ͨΓ͢ΔΑ͏ʹɺ  ClientͷM΋APIΛୟ͘

Slide 24

Slide 24 text

4FSWFS #BDLFOE M C V $MJFOU ͓޷͖ͳݴޠͰ 'SPOUFOE Action JS΍ΒJSX΍Β ΋ͪΖΜMVC͡Όͳͯ͘΋Αͯ͘ɺ ͦΕͧΕద੾ʹઃܭ͠·͠ΐ͏ͱ͍͏͜ͱͰ͢ ActionCreator Dispatcher Store

Slide 25

Slide 25 text

#BDLFOE 4FSWFS .JDSPTFSWJDF $MJFOU 'SPOUFOE MicroserviceͳΒɺMicroserviceͷM͕  ଞͷMicroserviceͷAPIΛୟ͘ Action JS΍ΒJSX΍Β ActionCreator Dispatcher Store .JDSPTFSWJDF .JDSPTFSWJDF M C V M C V M C V

Slide 26

Slide 26 text

ϑϩϯτΤϯυ: ҰݸͷMicroservice ͨͩͷViewͰ͸ͳ͍

Slide 27

Slide 27 text

Microservice࡞ͬͯΔͱ  ࢥ͑͹ͭΒ͍ͷ͸౰વ(?)

Slide 28

Slide 28 text

Microserviceؒͷର࿩ʹ͸  ద੾ͳAPI͕ඞཁͰ͢Ͷ SQLͷߦΛద౰ʹγϦΞϥΠζ͠·ͨ͠ɺ  Έ͍ͨͳ΍ͭͰ͸ڐ͞Εͳ͍

Slide 29

Slide 29 text

3.ϑϩϯτΤϯυʹ  خ͍͠API

Slide 30

Slide 30 text

ϑϩϯτΤϯυʮ͕ͭ͜͜Β͍ʯ • ଞͷMicroserviceͱԕ͍(DC಺ vs. ϞόΠϧ) • ϓϨθϯεͷ૬ख͕ਓؒͳͷͰɺඇ߹ཧతͳ ग़ྗܗࣜΛཁٻ͞Ε͕ͪ • ϓϨθϯεͷ૬ख͕ਓؒͳͷͰɺࡉ͔͍मਖ਼ ͕Α͘ೖΓ͕ͪ

Slide 31

Slide 31 text

ଞͷMicroserviceͱԕ͍ • RTT͕େ͖͍ • هࣄͱίϝϯτΛऔಘ͢ΔͷʹͦΕͧΕAPI ίʔϧͨ͠Γͱ͔࿦֎ • 1ϦΫΤετͰ׬͍ྃͤͨ͞ʂ

Slide 32

Slide 32 text

ඇ߹ཧతͳग़ྗܗࣜΛ  ཁٻ͞Ε͕ͪ • ίϝϯτ͸ઌ಄3͚݅ͩͰɺ  Έ͍ͨͳ͜ͱ͕͋Δ • ࡉ͔͍ࢦఆΛͯ͠ϦΫΤετ͍ͨ͠ʂ

Slide 33

Slide 33 text

ࡉ͔͍मਖ਼͕Α͘ೖΓ͕ͪ • ΍ͬͺίϝϯτ͸10݅͘Β͍ग़͍͍ͯ΍ɺ  Έ͍ͨͳ͜ͱ͕͋Δ • αʔόʔͷ࣮૷ʹखΛՃ͑ͣมߋ͍ͨ͠ʂ • APIͷυΩϡϝϯτ͕੔උ͞ΕͯΔͱศརʂ

Slide 34

Slide 34 text

·ͱΊΔͱ • 1ϦΫΤετͰ׬͍ྃͤͨ͞ʂ • ࡉ͔͍ࢦఆΛͯ͠ϦΫΤετ͍ͨ͠ʂ • αʔόʔͷ࣮૷ʹखΛՃ͑ͣมߋ͍ͨ͠ʂ • APIͷυΩϡϝϯτ͕੔උ͞ΕͯΔͱศརʂ

Slide 35

Slide 35 text

4FSWFS ΦʔέετϨʔγϣϯ૚ 'SPOUFOE #BDLFOE $MJFOU .JDSPTFSWJDF 0SDIFTUSBUJPO -BZFS .JDSPTFSWJDF .JDSPTFSWJDF .JDSPTFSWJDF .JDSPTFSWJDF .JDSPTFSWJDF JS΍Β

Slide 36

Slide 36 text

ΦʔέετϨʔγϣϯ૚ ⭕ 1ϦΫΤετͰ׬͍ྃͤͨ͞ʂ • Ͱ͖Δ ⭕ ࡉ͔͍ࢦఆΛͯ͠ϦΫΤετ͍ͨ͠ʂ • ΦʔέετϨʔγϣϯ૚ͷίʔυͰͰ͖Δ

Slide 37

Slide 37 text

ΦʔέετϨʔγϣϯ૚ ❌ αʔόʔͷ࣮૷ʹखΛՃ͑ͣมߋ͍ͨ͠ʂ • Φʔέ(ry૚ʹखΛೖΕͳ͍ͱμϝ ❌ APIͷυΩϡϝϯτ͕੔උ͞ΕͯΔͱศརʂ • ͜Ε͸ผͷͱ͜ΖͰ౒ྗ͠ͳ͍ͱμϝ

Slide 38

Slide 38 text

GraphQL

Slide 39

Slide 39 text

GraphQL ⭕ 1ϦΫΤετͰ׬͍ྃͤͨ͞ʂ ⭕ ࡉ͔͍ࢦఆΛͯ͠ϦΫΤετ͍ͨ͠ʂ ⭕ αʔόʔͷ࣮૷ʹखΛՃ͑ͣมߋ͍ͨ͠ʂ ⭕ APIͷυΩϡϝϯτ͕੔උ͞ΕͯΔͱศརʂ

Slide 40

Slide 40 text

എܠʹ͋Δൃ૝ ʮཉ͍͠ͷ͸දͰ͸ͳ͘άϥϑͰ͸ʯ

Slide 41

Slide 41 text

৮ͬͨ΄͏͕ૣ͍

Slide 42

Slide 42 text

GraphQL͔͍ͭͲ͜Ζ • άϥϑͩ͠SNSܥ? ͱࢥ͍͖΍ • ࣮͸ۀ຿ΞϓϦέʔγϣϯͱ͔ͷ΄͏͕  ׆͖Δ͔΋ • JOIN͠·͘ΔλΠϓͷΞϓϦέʔγϣϯʹ  ޲͍ͯΔ

Slide 43

Slide 43 text

N+1໰୊ • ϓϩύςΟ͝ͱʹฒྻͰfetch͕ى͖Δ ➡ ΫΤϦΛ·ͱΊΔλΠϛϯά͕ͳ͍ • DataLoaderͰগ͠ϚγʹͳΔ ➡ 1-tick಺Ͱى͖ͨΫΤϦ͕·ͱΊΒΕΔ ➡ ͱ͸͍͑JOINͰ͖ΔΘ͚͡Όͳ͍ ➡ WHERE foo_id IN (1, 2, 3, …… 100)

Slide 44

Slide 44 text

N+1໰୊ • ͍͍ײ͡ʹJOIN(αϒΫΤϦ͕ͩ)ͯ͘͠ΕΔ ΍ͭΛ࡞ͬͨ ➡ PostgreSQLͷJSONؔ਺Λ࢖͍·ͬͨ͘ ➡ ຊ౰͸ࠓ೔ެ։͔͕ͨͬͨؒ͠ʹ߹Θͣ ➡ SQL͕ຊ౰ʹͭΒ͍

Slide 45

Slide 45 text

SELECT row_to_json("accounts") FROM ( SELECT * , ( SELECT array_agg(row_to_json("delegates")) FROM ( SELECT * , ( SELECT row_to_json("groups") FROM (SELECT * FROM "groups") AS "groups" WHERE ( "groups".id = "delegates"."group_id" )) AS "group" FROM "delegates") AS "delegates" WHERE ( "delegates"."account_id" = "accounts".id )) AS "delegates" FROM "accounts") AS "accounts" N+1໰୊

Slide 46

Slide 46 text

͘͠Έ • ΧϥϜ΁ͷΞΫηεΛ͢΂ͯඇಉظʹͯ͠Hook • 1-tick ಺Ͱ৮ͬͨΧϥϜɾؔ࿈ʹؔͯ͠͸  1ΫΤϦͰऔΓʹߦ͘ • 1:Nͳؔ࿈ʹؔͯ͠͸ཁૉ͕1͚ͭͩͷHook༻ ίϨΫγϣϯΛ࢖ͬͯHook

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

PostGraphQLͱͷҧ͍ • PostGraphQL͸୯ҰͷPostgreSQLʹೖͬͯΔσʔλʹ͠ ͔ΞΫηεͰ͖ͳ͍ • Microservice࣌୅ʹͦΕͰͲ͏͢Μͷ • Զͷ΍ͭ͸్தͰผͷAPIୟ͍ͨΓͯ͠΋OK • ͦͷͱ͖͸1-tickʹ৐Βͳ͍ͷͰɺΫΤϦ͸෼ׂ͞ΕΔ  (DBͷ֎ͷσʔλͱJOINͰ͖ΔΘ͚ͳ͍͠౰વ)

Slide 51

Slide 51 text

·ͱΊ͍͖·͢

Slide 52

Slide 52 text

RESTful͕શͯͰ͸ͳ͍ RESTfulҎ֎ʹ΋APIͷઃܭ͸͍Ζ͍Ζ͋Γ·͢ eg. GraphQL, Falcor, gRPC

Slide 53

Slide 53 text

GraphQL͕શͯͰ͸ͳ͍ ʮԶͷߟ͑ͨ࠷ڧͷData Fetching APIʯ  Λ࣋ͪدͬͯٞ࿦͍͖͍ͯͨ͠

Slide 54

Slide 54 text

ϑϩϯτΤϯυͷͨΊͷAPI  ʹ͍ͭͯ΋ͬͱޠΓ·͠ΐ͏ FormͷόϦσʔγϣϯΤϥʔͲ͏͢Μͷɺͱ͔