GraphQLの話 (API for Front-end)

Bcbc80799bc32840662a366768318a9b?s=47 Kobayashi
October 21, 2016

GraphQLの話 (API for Front-end)

tng23 でやったやつ

Bcbc80799bc32840662a366768318a9b?s=128

Kobayashi

October 21, 2016
Tweet

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

  47. None
  48. None
  49. None
  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ͷόϦσʔγϣϯΤϥʔͲ͏͢Μͷɺͱ͔