GraphQLの話 (API for Front-end)

tng23 でやったやつ

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