GraphQLの話 (API for Front-end)

tng23 でやったやつ

Transcript

1. API for Front-end KOBA789
2. KOBA789 େੲʹ
 ʮαʔόʔαΠυJavaScript Node.js ೖ໳ʯ
 ͱ͍͏ຊͷࣥචͷ͓ख఻͍Λ͠·ͨ͠ ࠓ͸ஜ೾େֶͰB2 ࠷ۙ͸ΞΠΧπͷਓͱͯ͠ੜ͖͍ͯ·͢
3. ໨ඪ: GraphQLͷඞཁੑΛཧղ͢Δ
4. ྲྀΕ 1.RESTful API࠶ߟ 2.ϑϩϯτΤϯυͱ͸ 3.ϑϩϯτΤϯυʹخ͍͠API
5. ॱΛ௥ͬͯ΍͍͖ͬͯ·͢ ·ͣ͸໰୊ҙࣝͷڞ༗͔Β
6. ໰਍ ✓ϑϩϯτΤϯυ͸ͭΒ͍ ✓RESTful API͸ͭΒ͍ ✓APIͷ࢓༷ʹΩϨͨ͜ͱ͕͋Δ
7. 1. RESTful API࠶ߟ
8. RESTful API Έͳ͞Μ͝ଘ஌ Ͱ΋ຊ౰ʹ?
9. ΍ͬͯΈ·͠ΐ͏
10. // ϒϩάهࣄ(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
11. ςʔϒϧ͕ಁ͚ͯݟ͑Δ ශऑͳSQL͕΄͍͠Θ͚͡Όͳ͍
12. ސ٬͕ٻΊ͍ͯͨ΋ͷ article.title article.comments[0...3] article.author.name
13. // VM(id=1)Λγϟοτμ΢ϯ ͏ʔΜɺిݯ͸αϒϦιʔε͔ͳ…… DELETE /machines/1/power // VM(id=1)Λڧ੍γϟοτμ΢ϯ ΫΤϦύϥϝʔλ͔ͳ…… DELETE /machines/1/power?force=true // ిݯͷঢ়ଶΛऔಘ GET /machines/1/power ϨεϙϯεϘσΟͷ಺༰ͬͯͳΜͳΜͩΖ͏…… ΍ͬͺΓαϒϦιʔε͡Όͳͯ͘ଐੑͳͷ͔ͳ…… ଐੑͩͱͨ͠Βɺىಈɾऴྃ͸PATCH͔ͳ……
14. ௚ײతͱ͸ఔԕ͍ ઃܭͷ߹ҙ͕औΓ΍͍͢ͱ͸ͳΜͩͬͨͷ͔
15. ސ٬͕ٻΊ͍ͯͨ΋ͷ power_off(server) force_power_off(server)
16. ͱ͜ΖͰυΩϡϝϯτ͸? Swaggerͱ͔࢖͏……?
17. 2.ϑϩϯτΤϯυͱ͸ ಠࣗݚڀΛؚΉͧ
18. Q. ͱ͜ΖͰͳΜͰSPAͳ ϑϩϯτΤϯυ͸ͭΒ͍ͷα
19. A. ͨͩͷView͡Όͳ͍͔Β
20. 4FSWFS #BDLFOE 'SPOUFOE M C V $MJFOU Ruby ͱ͔ Haml ϒϥ΢β
21. 4FSWFS #BDLFOE 'SPOUFOE M C V $MJFOU Scala ͱ͔ JSX
22. 4FSWFS #BDLFOE 'SPOUFOE M C V $MJFOU Scala ͱ͔ JSX ͍΍ɺ·͔͞
23. 4FSWFS #BDLFOE M C V $MJFOU ͓޷͖ͳݴޠͰ 'SPOUFOE M C V JS΍ΒJSX΍Β ServerͷM͕SQLୟ͍ͨΓ͢ΔΑ͏ʹɺ
 ClientͷM΋APIΛୟ͘
24. 4FSWFS #BDLFOE M C V $MJFOU ͓޷͖ͳݴޠͰ 'SPOUFOE Action JS΍ΒJSX΍Β ΋ͪΖΜMVC͡Όͳͯ͘΋Αͯ͘ɺ ͦΕͧΕద੾ʹઃܭ͠·͠ΐ͏ͱ͍͏͜ͱͰ͢ ActionCreator Dispatcher Store
25. #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
26. ϑϩϯτΤϯυ: ҰݸͷMicroservice ͨͩͷViewͰ͸ͳ͍
27. Microservice࡞ͬͯΔͱ
 ࢥ͑͹ͭΒ͍ͷ͸౰વ(?)
28. Microserviceؒͷର࿩ʹ͸
 ద੾ͳAPI͕ඞཁͰ͢Ͷ SQLͷߦΛద౰ʹγϦΞϥΠζ͠·ͨ͠ɺ
 Έ͍ͨͳ΍ͭͰ͸ڐ͞Εͳ͍
29. 3.ϑϩϯτΤϯυʹ
 خ͍͠API
30. ϑϩϯτΤϯυʮ͕ͭ͜͜Β͍ʯ • ଞͷMicroserviceͱԕ͍(DC಺ vs. ϞόΠϧ) • ϓϨθϯεͷ૬ख͕ਓؒͳͷͰɺඇ߹ཧతͳ ग़ྗܗࣜΛཁٻ͞Ε͕ͪ • ϓϨθϯεͷ૬ख͕ਓؒͳͷͰɺࡉ͔͍मਖ਼ ͕Α͘ೖΓ͕ͪ
31. ଞͷMicroserviceͱԕ͍ • RTT͕େ͖͍ • هࣄͱίϝϯτΛऔಘ͢ΔͷʹͦΕͧΕAPI ίʔϧͨ͠Γͱ͔࿦֎ • 1ϦΫΤετͰ׬͍ྃͤͨ͞ʂ
32. ඇ߹ཧతͳग़ྗܗࣜΛ
 ཁٻ͞Ε͕ͪ • ίϝϯτ͸ઌ಄3͚݅ͩͰɺ
 Έ͍ͨͳ͜ͱ͕͋Δ • ࡉ͔͍ࢦఆΛͯ͠ϦΫΤετ͍ͨ͠ʂ
33. ࡉ͔͍मਖ਼͕Α͘ೖΓ͕ͪ • ΍ͬͺίϝϯτ͸10݅͘Β͍ग़͍͍ͯ΍ɺ
 Έ͍ͨͳ͜ͱ͕͋Δ • αʔόʔͷ࣮૷ʹखΛՃ͑ͣมߋ͍ͨ͠ʂ • APIͷυΩϡϝϯτ͕੔උ͞ΕͯΔͱศརʂ
34. ·ͱΊΔͱ • 1ϦΫΤετͰ׬͍ྃͤͨ͞ʂ • ࡉ͔͍ࢦఆΛͯ͠ϦΫΤετ͍ͨ͠ʂ • αʔόʔͷ࣮૷ʹखΛՃ͑ͣมߋ͍ͨ͠ʂ • APIͷυΩϡϝϯτ͕੔උ͞ΕͯΔͱศརʂ
35. 4FSWFS ΦʔέετϨʔγϣϯ૚ 'SPOUFOE #BDLFOE $MJFOU .JDSPTFSWJDF 0SDIFTUSBUJPO
    -BZFS .JDSPTFSWJDF .JDSPTFSWJDF .JDSPTFSWJDF .JDSPTFSWJDF .JDSPTFSWJDF JS΍Β
36. ΦʔέετϨʔγϣϯ૚ ⭕ 1ϦΫΤετͰ׬͍ྃͤͨ͞ʂ • Ͱ͖Δ ⭕ ࡉ͔͍ࢦఆΛͯ͠ϦΫΤετ͍ͨ͠ʂ • ΦʔέετϨʔγϣϯ૚ͷίʔυͰͰ͖Δ
37. ΦʔέετϨʔγϣϯ૚ ❌ αʔόʔͷ࣮૷ʹखΛՃ͑ͣมߋ͍ͨ͠ʂ • Φʔέ(ry૚ʹखΛೖΕͳ͍ͱμϝ ❌ APIͷυΩϡϝϯτ͕੔උ͞ΕͯΔͱศརʂ • ͜Ε͸ผͷͱ͜ΖͰ౒ྗ͠ͳ͍ͱμϝ
38. GraphQL
39. GraphQL ⭕ 1ϦΫΤετͰ׬͍ྃͤͨ͞ʂ ⭕ ࡉ͔͍ࢦఆΛͯ͠ϦΫΤετ͍ͨ͠ʂ ⭕ αʔόʔͷ࣮૷ʹखΛՃ͑ͣมߋ͍ͨ͠ʂ ⭕ APIͷυΩϡϝϯτ͕੔උ͞ΕͯΔͱศརʂ
40. എܠʹ͋Δൃ૝ ʮཉ͍͠ͷ͸දͰ͸ͳ͘άϥϑͰ͸ʯ
41. ৮ͬͨ΄͏͕ૣ͍
42. GraphQL͔͍ͭͲ͜Ζ • άϥϑͩ͠SNSܥ? ͱࢥ͍͖΍ • ࣮͸ۀ຿ΞϓϦέʔγϣϯͱ͔ͷ΄͏͕
 ׆͖Δ͔΋ • JOIN͠·͘ΔλΠϓͷΞϓϦέʔγϣϯʹ
 ޲͍ͯΔ
43. N+1໰୊ • ϓϩύςΟ͝ͱʹฒྻͰfetch͕ى͖Δ ➡ ΫΤϦΛ·ͱΊΔλΠϛϯά͕ͳ͍ • DataLoaderͰগ͠ϚγʹͳΔ ➡ 1-tick಺Ͱى͖ͨΫΤϦ͕·ͱΊΒΕΔ ➡ ͱ͸͍͑JOINͰ͖ΔΘ͚͡Όͳ͍ ➡ WHERE foo_id IN (1, 2, 3, …… 100)
44. N+1໰୊ • ͍͍ײ͡ʹJOIN(αϒΫΤϦ͕ͩ)ͯ͘͠ΕΔ ΍ͭΛ࡞ͬͨ ➡ PostgreSQLͷJSONؔ਺Λ࢖͍·ͬͨ͘ ➡ ຊ౰͸ࠓ೔ެ։͔͕ͨͬͨؒ͠ʹ߹Θͣ ➡ SQL͕ຊ౰ʹͭΒ͍
45. 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໰୊
46. ͘͠Έ • ΧϥϜ΁ͷΞΫηεΛ͢΂ͯඇಉظʹͯ͠Hook • 1-tick ಺Ͱ৮ͬͨΧϥϜɾؔ࿈ʹؔͯ͠͸
 1ΫΤϦͰऔΓʹߦ͘ • 1:Nͳؔ࿈ʹؔͯ͠͸ཁૉ͕1͚ͭͩͷHook༻ ίϨΫγϣϯΛ࢖ͬͯHook
50. PostGraphQLͱͷҧ͍ • PostGraphQL͸୯ҰͷPostgreSQLʹೖͬͯΔσʔλʹ͠ ͔ΞΫηεͰ͖ͳ͍ • Microservice࣌୅ʹͦΕͰͲ͏͢Μͷ • Զͷ΍ͭ͸్தͰผͷAPIୟ͍ͨΓͯ͠΋OK • ͦͷͱ͖͸1-tickʹ৐Βͳ͍ͷͰɺΫΤϦ͸෼ׂ͞ΕΔ
 (DBͷ֎ͷσʔλͱJOINͰ͖ΔΘ͚ͳ͍͠౰વ)
51. ·ͱΊ͍͖·͢
52. RESTful͕શͯͰ͸ͳ͍ RESTfulҎ֎ʹ΋APIͷઃܭ͸͍Ζ͍Ζ͋Γ·͢ eg. GraphQL, Falcor, gRPC
53. GraphQL͕શͯͰ͸ͳ͍ ʮԶͷߟ͑ͨ࠷ڧͷData Fetching APIʯ
 Λ࣋ͪدͬͯٞ࿦͍͖͍ͯͨ͠
54. ϑϩϯτΤϯυͷͨΊͷAPI
 ʹ͍ͭͯ΋ͬͱޠΓ·͠ΐ͏ FormͷόϦσʔγϣϯΤϥʔͲ͏͢Μͷɺͱ͔