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

活用パターンで学ぶGraphQL

 活用パターンで学ぶGraphQL

クラスメソッド年次技術イベント「Developers.IO 2020 CONNECT」 で登壇した内容です。

Taewoo Kim

June 26, 2020
Tweet

More Decks by Taewoo Kim

Other Decks in Programming

Transcript


  1. 5BFXPP,JN
    ׆༻ύλʔϯͰֶͿ(SBQI2-

    View full-size slide

  2. ࣗݾ঺հ

    5BFXPP,JN ΩϜς΢ʣ
    "84ࣄۀຊ෦ίϯαϧςΟϯά෦ॴଐ
    ೥݄ೖࣾɺ೔ຊޠྺ೥
    "1/"845PQ&OHJOFFSTʹ౰બ
    Ϋϥεϝιουͷ࠷ॳͷؖࠃਓΤϯδχΞ
    ޷͖ͳ"84αʔϏεɿ"QQ4ZODɺ"NQMJGZ

    View full-size slide

  3. ηογϣϯ֓ཁ

    ͜ͷηογϣϯͰ࿩͞ͳ͍͜ͱ
    (SBQI2-ͷจ๏
    (SBQI2-εΩʔϚσβΠϯͷϕετϓϥΫςΟε
    ίʔυϨϕϧͰͷϕετϓϥΫςΟε
    (SBQI2-Λ࢖ͬͨೝূɾηΩϡϦςΟ
    (SBQI2-ϞχλϦϯάɾ࠷దԽ౳

    View full-size slide

  4. ηογϣϯ֓ཁ

    ͜ͷηογϣϯͰ࿩͢͜ͱ
    (SBQI2-ͷొ৔എܠͱجૅ֓೦
    (SBQI2-ΞʔΩςΫνϟʔύλʔϯ
    #BDLFOE'PS'SPOUFOE
    3FBMUJNF"SDIJUFDUVSF
    5ISFF'BDUPS"QQ (SBQI2-ͷ$234ύλʔϯ

    View full-size slide



  5. GraphQLͷ֓೦

    View full-size slide

  6. (SBQI2-ͷ֓೦ɿొ৔എܠ

    REST API Λ։ൃ͢ΔνʔϜͰ͸
    ΄ͱΜͲಉ͡໰୊ͱઓ͏

    View full-size slide

  7. (SBQI2-ͷ֓೦ɿొ৔എܠ

    ྫ͑͹ɺҎԼͷ"1*͕͋ͬͨͱ͢Δ
    (&5BQJVTFST

    View full-size slide

  8. (SBQI2-ͷ֓೦ɿొ৔എܠ

    ϖʔδωʔγϣϯ͸౰ͨΓલ͔ͩΒɺ͜͏ͳΔ
    (&5BQJVTFST QBHF@OVN

    View full-size slide

  9. (SBQI2-ͷ֓೦ɿొ৔എܠ

    ཁ͕݅૿͑ͯɺϞόΠϧͱ΢ΣϒΛಉ࣌ʹαϙʔτ͢Δ
    ͜ͱʹͳΔ
    (&5BQJVTFST QBHF@OVNQMBUGPSNNPCJMF
    (&5BQJVTFST QBHF@OVNQMBUGPSNXFC

    View full-size slide

  10. (SBQI2-ͷ֓೦ɿొ৔എܠ

    ϦΫΤετΛૹΔଆͷը໘ߏ੒ʹΑΓɺϨεϙϯεͷσʔ
    λͷछྨ͕ҟͳΔ
    (&5BQJVTFST
    QBHF@OVNQMBUGPSNNPCJMFUZQFQMBZFS@MJTU
    (&5BQJVTFST
    QBHF@OVNQMBUGPSNNPCJMFUZQFDIBUUJOH@SPPN
    (&5BQJVTFST
    QBHF@OVNQMBUGPSNXFCUZQFVTFS@NBOBHFS

    View full-size slide

  11. (SBQI2-ͷ֓೦ɿొ৔എܠ

    όοΫΤϯυଆͷAPIؔ਺Ұ͚ͭͩͰ
    ίʔυ͕਺ඦϥΠϯʹͳΔ
    ॏෳίʔυ͕ଟ͘ͳͬͯޮ཰͕Α͘ͳ͍

    View full-size slide

  12. (SBQI2-ͷ֓೦ɿొ৔എܠ

    ϝϯςφϯε͕ݫ͘͠ͳΔ͔Βɺ࠷ॳ͔ΒඞཁͳϑΟʔ
    ϧυͷΈϦΫΤετ͢Δ
    (&5BQJVTFST QBHF@OVNpFMETBDDPVOU*E
    OJDLOBNF JNBHF X@ I@
    NPEF
    (&5BQJVTFST QBHF@OVNpFMETBDDPVOU*E
    OJDLOBNF CJSUI JOUFSFTUT JNBHF X@ I@
    NPEF
    JODMVEFGSJFOE@MJTU

    View full-size slide

  13. (SBQI2-ͷ֓೦ɿొ৔എܠ

    όοΫΤϯυଆ͸ͪΐͬͱָʹͳΔ

    View full-size slide

  14. (SBQI2-ͷ֓೦ɿొ৔എܠ

    ͔͠͠ɺΫϥΠΞϯτଆͰඞཁͱ͢Δ
    ෳࡶͳAPIΛઃܭ͢Δ͜ͱ͸ͱͯ΋೉͍͠
    Θ͚͕෼͔Βͳ͍APIʹͳΔ

    View full-size slide

  15. (SBQI2-ͷ֓೦ɿొ৔എܠ

    ͔͠͠ɺϑϩϯτΤϯυଆͰ͸
    APIΛཧղͮ͠Β͘ͳΔ
    ΋͏Θ͚͕Θ͔Βͳ͍APIʹͳΔ
    (&5BQJVTFST QBHF@OVNpFMETBDDPVOU*E
    OJDLOBNF JNBHF X@ I@
    NPEF
    (&5BQJVTFST QBHF@OVNpFMETBDDPVOU*E
    OJDLOBNF CJSUI JOUFSFTUT JNBHF X@ I@
    NPEF
    JODMVEFGSJFOE@MJTU

    View full-size slide

  16. (SBQI2-ͷ֓೦ɿ04'"ʢ0OF4J[F'JUT"MMʣ

    04'" 0OF4J[F'JUT"MM
    ໰୊
    ݩʑ͸ҰͭͷϢʔζέʔεʹ࠷దԽ͞ΕΔΑ͏ʹઃܭ͞Ε͕ͨɺ
    ͲΜͲΜ"1*͕େ͖͘ͳΓɺଟ͘ͷϢʔζέʔεʹ΋౴͑ΔΑ͏
    ʹͳͬͯɺϝϯςφϯε΍௥Ճػೳͷ֦ு͕ݫ͘͠ͳΔ

    View full-size slide

  17. (SBQI2-ͷ֓೦ɿ5"%"

    2015೥9݄ɺFacebook ΑΓ
    GraphQL ͕ެࣜʹެ։͞Ε·ͨ͠ʂ

    View full-size slide

  18. (SBQI2-ͷ֓೦ɿTBNQMFSFRSFTQ

    query {
    users {
    accountId
    name
    imageUrl
    }
    }
    {
    “data”: {
    “accountId”: “twkiiim”,
    “name”: “Taewoo Kim”,
    “imageUrl”: “…..”
    }
    }
    Request Response

    View full-size slide

  19. (SBQI2-ͷ֓೦ɿλΠϓʢ5ZQFʣ

    (SBQI2-͸λΠϓγεςϜ
    type User {
    id: ID!
    accountId: String!
    name: String!
    imageUrl: String
    address: Address
    }
    type Address {
    zipcode: String!
    city: String!
    }
    type Chatroom {
    id: ID!
    users: [User!]!
    createdAt: DateTime!
    }

    View full-size slide

  20. (SBQI2-ͷ֓೦ɿΫΤϦʢ2VFSZ


    σʔλΛऔಘ͢Δ query {
    user(id: 13) {
    accountId
    name
    address {
    city
    }
    }
    }

    View full-size slide

  21. (SBQI2-ͷ֓೦ɿϛϡʔςʔγϣϯʢ.VUBUJPO


    σʔλΛૢ࡞͢Δ
    σʔλͷੜ੒ɾมߋɾ࡟আ
    mutation {
    createUser(input: {
    name: “Taewoo Kim”,
    zipcode: “000-0000”,
    city: “Tokyo”
    }) {
    id
    }
    }

    View full-size slide

  22. (SBQI2-ͷ֓೦ɿαϒεΫϦϓγϣϯʢ4VCTDSJQUJPO


    σʔλΛߪಡ͢Δ subscription {
    onCreateUser {
    id
    name
    address {
    zipcode
    city
    }
    }
    }

    View full-size slide

  23. (SBQI2-ͷ֓೦ɿ·ͱΊ

    (SBQI2-ͷࡾͭͷΦϖϨʔγϣϯ
    ΫΤϦʢ2VFSZʣ
    ϛϡʔςʔγϣϯʢ.VUBUJPOʣ
    αϒεΫϦϓγϣϯʢ4VCTDSJQUJPOʣ
    ͜ͷࡾͭͷΦϖϨʔγϣϯʹΑΓɺ༷ʑͳύλʔϯ͕ߟ
    ͑ΒΕ·͢ʂ

    View full-size slide



  24. GraphQLΞʔΩςΫνϟʔύλʔϯ

    View full-size slide

  25. (SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE


    Backend-For-Frontend ύλʔϯ

    View full-size slide

  26. (SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE


    (SBQI2-લͷ΄ͱΜͲͷ"1*
    αʔό͸ࠨଆͷΑ͏ͳߏ੒
    ϓϥοτϑΥʔϜຖʹ༷ʑͳଟ͘ͷ
    ϢʔζέʔεΛͨͩҰ͚ͭͩͷ"1*
    αʔόͰશͯॲཧͤ͞Δߏ੒
    04'"ʢ0OF4J[F'JUT"MMʣ໰୊͕͋Δ
    ͨΊɺن໛͕େ͖͘ͳΕ͹ͳΔ΄Ͳɺޮ
    ཰͕ٸܹʹԼ͕Δ

    View full-size slide

  27. (SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE


    View full-size slide

  28. (SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE


    ֤ϓϥοτϑΥʔϜʹ߹Θͤͯ"1*αʔόΛ෼͚Δઓུ
    ϓϥοτϑΥʔϜຖʹָʹΧελϚΠζͰ͖ΔͷͰྑ͍ʂ
    ಉ͡ػೳΛߦ͏ίʔυ͕ͦΕͧΕͷ"1*αʔόͷίʔυʹଘࡏ
    ͢ΔͷͰίʔυͷॏෳ͕ଟ͘ͳͬͨΓ͢Δ໰୊ͷͨΊɺ௥Ճͷ
    ޻਺͕͔͔Δ

    View full-size slide

  29. (SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE


    View full-size slide

  30. (SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE


    γϯάϧ(SBQI2-"1*αʔόͰ#''͕Ͱ͖Δʁ
    ΫϥΠΞϯτଆͰඞཁͳϑΟʔϧυΛ௚઀બΜͰϦΫΤετΛ
    ૹΔ͔ΒɺϓϥοτϑΥʔϜຖʹϖΠϩʔυ࠷దԽ͕ࣗવʹຬ
    ͨ͞ΕΔ

    View full-size slide

  31. (SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE


    ͔͠͠ʂʂ
    ·ͨ04'"໰୊͕ൃੜ͢ΔՄೳੑ΋͋Δ
    ϖΠϩʔυɺͭ·Γɺσʔλͷදݱͱ͍͏؍఺Ͱ͸γϯάϧ(SBQI2-
    "1*͚ͩͰશવྑ͍͚ͲɺϓϥοτϑΥʔϜຖͷϢʔβೝূɺΩϟογ
    ϯά౳Λߟ͑ͯΈΔͱɺ΍͸Γ"1*αʔό͸෼͚ͨํ͕ྑ͍
    ҰํɺϖΠϩʔυͷΧελϚΠζͷΈ͕ཁ݅Ͱ͋Ε͹ɺγϯάϧ
    (SBQI2-"1*Ͱ#''͢Δ͜ͱ΋શવ͋Γ

    View full-size slide

  32. (SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF

    Realtime Architecture ύλʔϯ

    View full-size slide

  33. (SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF

    ͳͥ(SBQI2-ͱϦΞϧλΠϜΛ૊Έ߹ΘͤΔͷ͔ʁ
    ϦΞϧλΠϜΞʔΩςΫνϟʔ͸ιέοτͰ΋࣮૷ग़དྷΔ
    (SBQI2-Λ࢖͏ͱλΠϓγεςϜͷ͓ӄͰߋʹޮ཰తͳ࣮૷͕ग़དྷΔ

    View full-size slide

  34. (SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF

    αϒεΫϦϓγϣϯʢ4VCTDSJQUJPOʣ
    (SBQI2-ͷΦϖϨʔγϣϯͰ͋ΔαϒεΫϦϓγϣϯΛ࢖͏
    ͜ͱͰ΄ͱΜͲͷϦΞϧλΠϜαʔϏεͷ࣮૷͕؆୯ʹͳΔ
    σʔλܗࣜʢλΠϓʣΛఆٛ͢Δ͚ͩͰϦΞϧλΠϜػೳ͕࢖͑Δɿ
    "QQ4ZODɺ)BTVSBͷΑ͏ͳαʔϏεͷ͓ӄͰόοΫΤϯυଆͷ࣮૷
    ͷͨΊͷखؒΛ͔͚ͣʹϦΞϧλΠϜཁ݅ͷ࣮૷͕Մೳʹͳͬͨʂ

    View full-size slide

  35. (SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF

    https://youtu.be/kuTyxcjqeUk
    ஫จαʔϏεDEMO

    View full-size slide

  36. (SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF

    ϦΞϧλΠϜػೳͷ
    ͨΊ"QQ4ZODΛ࢖ͬ
    ͨαϯϓϧͷߏ੒
    ஫จαʔϏεͷॲཧΠ
    ϕϯτΛΞυϛϯଆͷ
    ը໘ʹϦΞϧλΠϜͰ
    දࣔͯ͘͠ΕΔγφϦ
    Φ

    View full-size slide

  37. (SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF

    https://youtu.be/ZujdsxSRt48
    ྫʣApollo + Hasura

    View full-size slide

  38. (SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF

    "84"QQ4ZOD
    "84ͷϚωʔδυ(SBQI2-αʔϏεʢαʔόʔϨεʣ
    εΩʔϚΛఆ͓͚ٛͯͩ͘͠ͰউखʹαϒεΫϦϓγϣϯػೳ͕࢖͑Δ

    View full-size slide

  39. (SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF

    AppSync ͷ subscription Λ࢖ͬͨྫ

    View full-size slide

  40. (SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF

    ϒϩάॻ͍ͯ·͢ʂ

    View full-size slide

  41. (SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF

    https://dev.classmethod.jp/articles/serverless-for-order-system-jawsdays2020/

    View full-size slide

  42. (SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF

    https://dev.classmethod.jp/articles/appsync-for-realtime-communication-akiba-aws-15/

    View full-size slide

  43. (SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF

    https://dev.classmethod.jp/articles/relay-re-introduction-2019-appsync/

    View full-size slide

  44. (SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ

    Three Factor App ύλʔϯ

    View full-size slide

  45. (SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ

    )BTVSB͞Μ͕ఏҊͨ͠ϞμʔϯϑϧελοΫΞϓϦέʔ
    γϣϯͷΞʔΩςΫνϟʔ
    ϦΞϧλΠϜ(SBQI2-
    ϦϥΠΞϏϦςΟʔͷͨΊͷΠϕϯτॲཧ
    ඇಉظαʔόʔϨε

    View full-size slide

  46. (SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ

    https://3factor.app/
    1. ϦΞϧλΠϜGraphQL
    2. ϦϥΠΞϏϦςΟͷͨΊͷΠϕϯτॲཧ
    3. ඇಉظαʔόʔϨε

    View full-size slide

  47. (SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ

    ϦΞϧλΠϜ(SBQI2-
    w ͙͢ϑΟʔυόοΫՄೳ
    w (SBQI2-ͷαϒεΫϦϓγϣϯʹ࣮ͯ૷͞ΕΔ

    View full-size slide

  48. (SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ

    ϦϥΠΞϏϦςΟʔͷͨΊͷΠϕϯτॲཧ
    w (SBQI2-ϛϡʔςʔγϣϯͷ௕͍ॲཧΛ଴ͨͣʹɺ؆୯ʹ
    ॲཧͰ͖ΔΦϖϨʔγϣϯʢΠϕϯτΛੜ੒͢Δ͜ͱʣΛ
    ߦ͏
    w Πϕϯτ͸গͳ͘ͱ΋ճ͸ඞͣର৅αʔϏεʹ఻ΘΔ

    View full-size slide

  49. (SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ

    ඇಉظαʔόʔϨε
    w ֤ϚΠΫϩαʔϏε͸αʔόʔϨεͰ࣮૷͞Εͯ͋Δ
    w ֤αʔϏε͸ΠϕϯτετΞ͔ΒΠϕϯτΛड͚෇͚ͯॲཧ
    ͢Δ
    w ಉ༷ͷΠϕϯτ͸Կճॲཧͯ͠΋ಉ͡ঢ়ଶʹͳΔΑ͏ʹ࣮
    ૷͢Δʢ*EFNQPUFOUʣ
    w Πϕϯτͷॱ൪ʹӨڹΛड͚ͳ͍

    View full-size slide

  50. (SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ

    https://3factor.app/
    1. ϦΞϧλΠϜGraphQL
    2. ϦϥΠΞϏϦςΟͷͨΊͷΠϕϯτॲཧ
    3. ඇಉظαʔόʔϨε

    View full-size slide

  51. (SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ

    https://3factor.app/
    1. ϦΞϧλΠϜGraphQL
    2. ϦϥΠΞϏϦςΟͷͨΊͷΠϕϯτॲཧ
    3. ඇಉظαʔόʔϨε
    $234ύλʔϯͱ͸ʁ
    w $PNNBOE2VFSZ3FTQPOTJCJMJUZ4FHSFHBUJPOͷུޠ
    w ΫΤϦͱϛϡʔςʔγϣϯΛ෼཭ͯ͠ߟ͑ΔΞϓϩʔν
    w 5ISFF'BDUPS"QQ͸(SBQI2-Ͱ$234ύλʔϯΛ
    ࣮૷͢ΔͨΊͷํ๏

    View full-size slide

  52. (SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ

    ΫΤϦ͸(SBQI2-ͷॲཧͦͷ··Ͱ0,
    ϛϡʔςʔγϣϯ͸ΠϕϯτΛൃੜ͙ͯ͢͠ϨεϙϯεΛฦ͢

    View full-size slide

  53. (SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ

    ϛϡʔςʔγϣϯΑΓΠϕϯτ͕ੜ੒͞Εͨ৔߹ɺ
    Πϕϯτ͸֘౰͢ΔαʔϏεʹૹΒΕΔʢΠϕϯτϧʔςΟϯάʣ

    View full-size slide

  54. (SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ

    ૹΒΕͨΠϕϯτ͸ΠϕϯτετΞʹอଘ͞ΕΔ
    ˠɹඇಉظͰॲཧ͞ΕΔ

    View full-size slide

  55. (SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ

    ඇಉظͰॲཧ͞ΕͨΠϕϯτʢݩͷϛϡʔςʔγϣϯʣʹΑΓɺ
    αϒεΫϦϓγϣϯ͕τϦΨʔ͞ΕΔ

    View full-size slide

  56. ·ͱΊ

    (SBQI2-ͷొ৔എܠʹ͍ͭͯઆ໌͠·ͨ͠
    (SBQI2-ͷ̏ͭͷΦϖϨʔγϣϯʹ͍ͭͯઆ໌͠·͠
    ͨ
    (SBQI2-ΞʔΩςΫνϟʔΛઃܭ͢ΔࡍʹࢀߟʹͳΕ
    ΔΞʔΩςΫνϟʔͱߟ͑ํΛ঺հ͠·ͨ͠

    View full-size slide