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

GraphQLの負債と向き合うためにやっていること

 GraphQLの負債と向き合うためにやっていること

Kazuhito Hokamura

July 18, 2023
Tweet

More Decks by Kazuhito Hokamura

Other Decks in Programming

Transcript

  1. GraphQLͷෛ࠴ͱ޲͖߹͏ͨΊʹ΍͍ͬͯΔ͜ͱ


    2013/7/19 @hokaccha


    Findy / ٕज़తෛ࠴ɺͲ͏΍ͬͯղফͨ͠ʁϦΞʔΩςΫνϟɾϦϑΝΫλࣄྫ͔ΒֶͿLunch LT

    View full-size slide

  2. 2
    About Me
    Kazuhito Hokamura


    software engineer
    @hokaccha
    @hokaccha

    View full-size slide

  3. 3
    ϢϏʔͷϓϩμΫτ
    ੜ׆ऀ޲͚ ड਍૬ஊΞϓϦ (toC)
    ҩྍػؔ޲͚ AI໰਍γεςϜ (toB)
    ঱ঢ়͔Βड਍ͷख͕͔Γ͕Θ͔Δ
    ར༻ऀ਺


    ݄ؒ ສਓ௒


    700
    ਍࡯ࣄ຿Λ1/3ʹޮ཰Խ
    ಋೖࢪઃ


    47౎ಓ෎ݝ
    1000௒

    View full-size slide

  4. 4
    GraphQLͷෛ࠴ 😰
    ● άϥϑߏ଄ʹͳ͍ͬͯͳ͍


    ● Ұ؏ੑ͕ͳ͍


    ● ֦ுੑ͕ͳ͍

    View full-size slide

  5. 5
    άϥϑߏ଄ʹͳ͍ͬͯͳ͍
    2ճϦΫΤετΛૹΒͳ͍ͱձ໊ࣾ
    ʹͨͲΓண͚ͳ͍
    ΄ͱΜͲ͸άϥϑߏ଄ʹͳͬͯΔ͕ɺҰ෦͜ͷΑ͏ͳεΩʔϚఆ͕ٛ͋Δ

    View full-size slide

  6. 6
    άϥϑߏ଄ʹ͍ͨ͠
    1ճͰձ໊ࣾΛऔΕΔʂ

    View full-size slide

  7. 7
    Ұ؏ੑ͕ͳ͍
    id͕IntͩͬͨΓ


    StringͩͬͨΓ
    CamelCaseͩͬͨΓ
    UPPER_CASEͩͬͨΓ
    fetchͱ͍͏prefix͕͍ͭͯͨΓ


    ͍ͭͯͳ͔ͬͨΓ

    View full-size slide

  8. 8
    ֦ுੑ͕ͳ͍
    updateUserName ͕User Λฦ͢ͱɺޙ͔ΒUserҎ֎
    ͷ৘ใΛฦͨ͘͠ͳͬͨͱ͖ʹ֦ுͰ͖ͳ͍

    View full-size slide

  9. 9
    ֦ுੑΛ΋ͨͤΔ
    mutation͝ͱʹpayloadܕΛఆٛ͠ɺpayloadܕʹ


    userͳͲͷϦιʔεܕΛ΋ͨͤΔ
    มߋલͷ໊લΛฦ͢ͳͲͷ֦ு͕༰қʹͳΔ

    View full-size slide

  10. 10
    ෛ࠴Λղফ͢ΔͨΊͷ


    औΓ૊Έ 💪
    ● ՄೳͳݶΓ҆શʹεΩʔϚΛҠߦ͢Δ


    ● ৽ͨʹෛ࠴Λੵ·ͳ͍ͨΊͷ࢓૊ΈԽɺࣗಈԽ

    View full-size slide

  11. 11
    εΩʔϚͷҠߦ


    ● εΩʔϚఆٛͷ͋Δ΂͖࢟Λఆٛͯ͠ঃʑʹҠߦ͢Δ


    ● ͔༷͠͠ʑͳ໰୊͕...ʂ


    ○ ಉҰεΩʔϚ಺ͰͷҠߦ͸໊લͷॏෳ໰୊ͳͲ͕͋ͬͯେม


    ○ εΩʔϚͷن໿΍ࣗಈςετ͕ෆे෼


    ○ ΫϥΠΞϯτଆͰͷܕ෇͚͕ෆे෼Ͱ҆શʹҠߦͰ͖ͳ͍

    View full-size slide

  12. 12
    ಉҰεΩʔϚͰͷҠߦͷ೉͍͠ͱ͜Ζ
    ● id Λ Int ͔Β ID ܕʹม͑ΔέʔεΛߟ͑Δ


    ● ΫϥΠΞϯτ͸ id: number Ͱ͘ΔલఏͰίʔυ͕ॻ͔Ε͍ͯΔ


    ● ͜ͷ··Կ΋ߟ͑ͣʹAPIͷ࣮૷͚ͩม͑ΔͱյΕΔ


    ● ϑϩϯτΤϯυͱόοΫΤϯυΛಉ࣌ʹมߋͰ͖Δͱ͍͍͕

    ϦϦʔεͷ࢓૊ΈతʹෆՄೳʢଟগͷΤϥʔΛڐ༰Ͱ͖Ε͹Մೳʣ
    idͷܕΛม͑Δ

    View full-size slide

  13. 13
    PrefixΛ͚ͭͳ͕Βগͣͭ͠Ҡߦ͢Δ
    ● v2 ͷΑ͏ͳ prefix Λ͚ͭɺ໊લͷॏෳΛආ͚ͯ৽ن࡞੒


    ● ಉ࣌ʹσϓϩΠ͕ඞཁͳ͍ͷͰ҆શʹҠߦͰ͖Δ


    ● ͕... ͻͱͭมߋ͢ΔͷʹϑϩϯτΤϯυؚΊΔͱ

    5ճ͘Β͍σϓϩΠ͢Δඞཁ͕͋ͬͯେม

    View full-size slide

  14. 14
    ୅ସҊ
    ● εΩʔϚͱΤϯυϙΠϯτΛ෼͚ͯ৽͘͠࡞Γ௚͢Ҋ:


    ○ /v2/graphql ͷΑ͏ͳΤϯυϙΠϯτʹͯ͠εΩʔϚΛ׬શʹ෼͚Δ


    ○ ໊લͷॏෳ໰୊͕ͳ͍ͷͰଟগҠߦָ͕ʹͳΔ


    ○ ར༻͍ͯ͠ΔDGS framework͕ରԠ͍ͯ͠ͳͯ͘அ೦...ʂ


    ● Kotlin ͔Β Node.js Ͱॻ͖௚͢Ҋ:


    ○ ϢϏʔ͸ٕज़ελοΫΛ Kotlin ͔Β Node.js ʹҠߦ͢ΔҙࢥܾఆΛͨ͠


    ○ εΩʔϚͷҠߦͷ͍ͭͰʹ Node.js Ͱॻ͖௚͢ͱ͍͏Ҋ΋


    ○ ಉ࣌ʹେ͖͍มߋΛ2ͭ΍Δͷ͸ةݥͳͷͰࠓճ͸ݟૹΓ Kotlin ͷ··΍Δ


    ● … ͱ͍͏Θ͚Ͱ໘౗͚ͩͲ prefix ઓུͰҠߦத

    View full-size slide

  15. 15
    ن໿ͷࡦఆ


    ● ઃܭͷࢦ਑Λ໌ࣔͯ͠ೝࣝΛἧ͑Δ


    ● ͜Ε·ͰͷֶͼΛੜ͔ͯ͠ΨΠυϥΠϯΛࡦఆ


    ● ͜ΕʹԊͬͯεΩʔϚΛҠߦ͍ͯ͘͠

    View full-size slide

  16. 16
    εΩʔϚͷࣗಈςετ


    ● graphql-schema-linter Λ CI Ͱ࣮ߦ


    ○ https://github.com/cjoudrey/graphql-schema-linter


    ● ૊ΈࠐΈͷϧʔϧͩͱෆे෼ͩͬͨͷͰ͍͔ͭ͘ΧελϜϧʔϧΛࣗલͰॻ͍ͨ


    ○ updateUser ͸ UpdateUserInput Λ͏͚ͬͱͬͯ UpdateUserPayload Λฦ͢ɺͳͲ


    ● VSCode Plugin ͕ͳ͔ͬͨͷͰࣗ࡞


    ○ https://github.com/hokaccha/vscode-graphql-schema-linter

    View full-size slide

  17. 17
    ϑϩϯτΤϯυͷܕ෇͚


    ϑϩϯτΤϯυͰ͸graphql-codegenͰεΩʔϚ͔Βࣗಈੜ੒ͨ͠ܕ৘ใΛ࢖͍ͬͯͨ
    age͸fetchͯ͠ͳ͍ͷͰϨεϙϯεʹ͸ؚ·Εͳ͍
    ͕ɺܕͱͯ͠͸ଘࡏ͍ͯ͠ΔͷͰΤϥʔʹͳΒͳ͍
    ͔͜͜ΒܕΛੜ੒

    View full-size slide

  18. 18
    ΫΤϦ͔ΒܕΛੜ੒͢Δ
    ੜ੒ʹ͸ @graphql-codegen/typescript-operations Λར༻
    ͔͜͜ΒܕΛੜ੒
    ageΛfetch͍ͯ͠ͳͯ͘ܕʹ΋ؚ·Εͳ͍ͷͰܕ
    νΣοΫͰΤϥʔʹͳΔ

    View full-size slide

  19. 19
    Fragment Colocationͷಋೖ
    ͔͜͜ΒܕΛੜ੒
    ਌ͷίϯϙʔωϯτͰࢠͷFragmentΛ
    embed͍ͯ͘͠

    View full-size slide

  20. 20
    ·ͱΊ
    ● GraphQLͷෛ࠴Λฦ٫͢ΔͨΊʹεΩʔϚͷҠߦΛ͓͜ͳ͍ͬͯΔ


    ● ͦΕʹ൐ͬͯϑϩϯτΤϯυʹݫີͳܕఆٛΛಋೖ͍ͯ͠Δ


    ● ಛʹେࣄʹ͍ͯ͠Δͷ͸ҎԼ


    ○ ۃྗ҆શʹҠߦ͢Δ


    ○ ৽ͨʹෛ࠴Λੵ·ͳ͍


    ○ ՄೳͳݶΓ࢓૊ΈԽɺࣗಈԽΛ͓͜ͳ͏

    View full-size slide