Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQLの話 (API for Front-end)

KOBA789
October 21, 2016

GraphQLの話 (API for Front-end)

tng23 でやったやつ

KOBA789

October 21, 2016
Tweet

More Decks by KOBA789

Other Decks in Programming

Transcript

  1. API for Front-end
    KOBA789

    View Slide

  2. KOBA789
    େੲʹ

    ʮαʔόʔαΠυJavaScript Node.js ೖ໳ʯ

    ͱ͍͏ຊͷࣥචͷ͓ख఻͍Λ͠·ͨ͠
    ࠓ͸ஜ೾େֶͰB2
    ࠷ۙ͸ΞΠΧπͷਓͱͯ͠ੜ͖͍ͯ·͢

    View Slide

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

    View Slide

  4. ྲྀΕ
    1.RESTful API࠶ߟ
    2.ϑϩϯτΤϯυͱ͸
    3.ϑϩϯτΤϯυʹخ͍͠API

    View Slide

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

    View Slide

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

    View Slide

  7. 1. RESTful API࠶ߟ

    View Slide

  8. RESTful API
    Έͳ͞Μ͝ଘ஌
    Ͱ΋ຊ౰ʹ?

    View Slide

  9. ΍ͬͯΈ·͠ΐ͏

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. 4FSWFS
    #BDLFOE
    M C V
    $MJFOU
    ͓޷͖ͳݴޠͰ
    'SPOUFOE
    M C V
    JS΍ΒJSX΍Β
    ServerͷM͕SQLୟ͍ͨΓ͢ΔΑ͏ʹɺ

    ClientͷM΋APIΛୟ͘

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  27. Microservice࡞ͬͯΔͱ

    ࢥ͑͹ͭΒ͍ͷ͸౰વ(?)

    View Slide

  28. Microserviceؒͷର࿩ʹ͸

    ద੾ͳAPI͕ඞཁͰ͢Ͷ
    SQLͷߦΛద౰ʹγϦΞϥΠζ͠·ͨ͠ɺ

    Έ͍ͨͳ΍ͭͰ͸ڐ͞Εͳ͍

    View Slide

  29. 3.ϑϩϯτΤϯυʹ

    خ͍͠API

    View Slide

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

    View Slide

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

    View Slide

  32. ඇ߹ཧతͳग़ྗܗࣜΛ

    ཁٻ͞Ε͕ͪ
    • ίϝϯτ͸ઌ಄3͚݅ͩͰɺ

    Έ͍ͨͳ͜ͱ͕͋Δ
    • ࡉ͔͍ࢦఆΛͯ͠ϦΫΤετ͍ͨ͠ʂ

    View Slide

  33. ࡉ͔͍मਖ਼͕Α͘ೖΓ͕ͪ
    • ΍ͬͺίϝϯτ͸10݅͘Β͍ग़͍͍ͯ΍ɺ

    Έ͍ͨͳ͜ͱ͕͋Δ
    • αʔόʔͷ࣮૷ʹखΛՃ͑ͣมߋ͍ͨ͠ʂ
    • APIͷυΩϡϝϯτ͕੔උ͞ΕͯΔͱศརʂ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. GraphQL

    View Slide

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

    View Slide

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

    View Slide

  41. ৮ͬͨ΄͏͕ૣ͍

    View Slide

  42. GraphQL͔͍ͭͲ͜Ζ
    • άϥϑͩ͠SNSܥ? ͱࢥ͍͖΍
    • ࣮͸ۀ຿ΞϓϦέʔγϣϯͱ͔ͷ΄͏͕

    ׆͖Δ͔΋
    • JOIN͠·͘ΔλΠϓͷΞϓϦέʔγϣϯʹ

    ޲͍ͯΔ

    View Slide

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

    View Slide

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

    View Slide

  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໰୊

    View Slide

  46. ͘͠Έ
    • ΧϥϜ΁ͷΞΫηεΛ͢΂ͯඇಉظʹͯ͠Hook
    • 1-tick ಺Ͱ৮ͬͨΧϥϜɾؔ࿈ʹؔͯ͠͸

    1ΫΤϦͰऔΓʹߦ͘
    • 1:Nͳؔ࿈ʹؔͯ͠͸ཁૉ͕1͚ͭͩͷHook༻
    ίϨΫγϣϯΛ࢖ͬͯHook

    View Slide

  47. View Slide

  48. View Slide

  49. View Slide

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

    (DBͷ֎ͷσʔλͱJOINͰ͖ΔΘ͚ͳ͍͠౰વ)

    View Slide

  51. ·ͱΊ͍͖·͢

    View Slide

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

    View Slide

  53. GraphQL͕શͯͰ͸ͳ͍
    ʮԶͷߟ͑ͨ࠷ڧͷData Fetching APIʯ

    Λ࣋ͪدͬͯٞ࿦͍͖͍ͯͨ͠

    View Slide

  54. ϑϩϯτΤϯυͷͨΊͷAPI

    ʹ͍ͭͯ΋ͬͱޠΓ·͠ΐ͏
    FormͷόϦσʔγϣϯΤϥʔͲ͏͢Μͷɺͱ͔

    View Slide