Tweet
Tweet

Slide 1

Slide 1 text

GraphQLͷෛ࠴ͱ޲͖߹͏ͨΊʹ΍͍ͬͯΔ͜ͱ 2013/7/19 @hokaccha Findy / ٕज़తෛ࠴ɺͲ͏΍ͬͯղফͨ͠ʁϦΞʔΩςΫνϟɾϦϑΝΫλࣄྫ͔ΒֶͿLunch LT

Slide 2

Slide 2 text

2 About Me Kazuhito Hokamura software engineer @hokaccha @hokaccha

Slide 3

Slide 3 text

3 ϢϏʔͷϓϩμΫτ ੜ׆ऀ޲͚ ड਍૬ஊΞϓϦ (toC) ҩྍػؔ޲͚ AI໰਍γεςϜ (toB) ঱ঢ়͔Βड਍ͷख͕͔Γ͕Θ͔Δ ར༻ऀ਺ ݄ؒ ສਓ௒ 700 ਍࡯ࣄ຿Λ1/3ʹޮ཰Խ ಋೖࢪઃ 47౎ಓ෎ݝ 1000௒

Slide 4

Slide 4 text

4 GraphQLͷෛ࠴ 😰 ● άϥϑߏ଄ʹͳ͍ͬͯͳ͍ ● Ұ؏ੑ͕ͳ͍ ● ֦ுੑ͕ͳ͍

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 Ұ؏ੑ͕ͳ͍ id͕IntͩͬͨΓ StringͩͬͨΓ CamelCaseͩͬͨΓ UPPER_CASEͩͬͨΓ fetchͱ͍͏prefix͕͍ͭͯͨΓ ͍ͭͯͳ͔ͬͨΓ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 ֦ுੑΛ΋ͨͤΔ mutation͝ͱʹpayloadܕΛఆٛ͠ɺpayloadܕʹ userͳͲͷϦιʔεܕΛ΋ͨͤΔ มߋલͷ໊લΛฦ͢ͳͲͷ֦ு͕༰қʹͳΔ

Slide 10

Slide 10 text

10 ෛ࠴Λղফ͢ΔͨΊͷ औΓ૊Έ 💪 ● ՄೳͳݶΓ҆શʹεΩʔϚΛҠߦ͢Δ ● ৽ͨʹෛ࠴Λੵ·ͳ͍ͨΊͷ࢓૊ΈԽɺࣗಈԽ

Slide 11

Slide 11 text

11 εΩʔϚͷҠߦ ● εΩʔϚఆٛͷ͋Δ΂͖࢟Λఆٛͯ͠ঃʑʹҠߦ͢Δ ● ͔༷͠͠ʑͳ໰୊͕...ʂ ○ ಉҰεΩʔϚ಺ͰͷҠߦ͸໊લͷॏෳ໰୊ͳͲ͕͋ͬͯେม ○ εΩʔϚͷن໿΍ࣗಈςετ͕ෆे෼ ○ ΫϥΠΞϯτଆͰͷܕ෇͚͕ෆे෼Ͱ҆શʹҠߦͰ͖ͳ͍

Slide 12

Slide 12 text

12 ಉҰεΩʔϚͰͷҠߦͷ೉͍͠ͱ͜Ζ ● id Λ Int ͔Β ID ܕʹม͑ΔέʔεΛߟ͑Δ ● ΫϥΠΞϯτ͸ id: number Ͱ͘ΔલఏͰίʔυ͕ॻ͔Ε͍ͯΔ ● ͜ͷ··Կ΋ߟ͑ͣʹAPIͷ࣮૷͚ͩม͑ΔͱյΕΔ ● ϑϩϯτΤϯυͱόοΫΤϯυΛಉ࣌ʹมߋͰ͖Δͱ͍͍͕ 
 ϦϦʔεͷ࢓૊ΈతʹෆՄೳʢଟগͷΤϥʔΛڐ༰Ͱ͖Ε͹Մೳʣ idͷܕΛม͑Δ

Slide 13

Slide 13 text

13 PrefixΛ͚ͭͳ͕Βগͣͭ͠Ҡߦ͢Δ ● v2 ͷΑ͏ͳ prefix Λ͚ͭɺ໊લͷॏෳΛආ͚ͯ৽ن࡞੒ ● ಉ࣌ʹσϓϩΠ͕ඞཁͳ͍ͷͰ҆શʹҠߦͰ͖Δ ● ͕... ͻͱͭมߋ͢ΔͷʹϑϩϯτΤϯυؚΊΔͱ 
 5ճ͘Β͍σϓϩΠ͢Δඞཁ͕͋ͬͯେม

Slide 14

Slide 14 text

14 ୅ସҊ ● εΩʔϚͱΤϯυϙΠϯτΛ෼͚ͯ৽͘͠࡞Γ௚͢Ҋ: ○ /v2/graphql ͷΑ͏ͳΤϯυϙΠϯτʹͯ͠εΩʔϚΛ׬શʹ෼͚Δ ○ ໊લͷॏෳ໰୊͕ͳ͍ͷͰଟগҠߦָ͕ʹͳΔ ○ ར༻͍ͯ͠ΔDGS framework͕ରԠ͍ͯ͠ͳͯ͘அ೦...ʂ ● Kotlin ͔Β Node.js Ͱॻ͖௚͢Ҋ: ○ ϢϏʔ͸ٕज़ελοΫΛ Kotlin ͔Β Node.js ʹҠߦ͢ΔҙࢥܾఆΛͨ͠ ○ εΩʔϚͷҠߦͷ͍ͭͰʹ Node.js Ͱॻ͖௚͢ͱ͍͏Ҋ΋ ○ ಉ࣌ʹେ͖͍มߋΛ2ͭ΍Δͷ͸ةݥͳͷͰࠓճ͸ݟૹΓ Kotlin ͷ··΍Δ ● … ͱ͍͏Θ͚Ͱ໘౗͚ͩͲ prefix ઓུͰҠߦத

Slide 15

Slide 15 text

15 ن໿ͷࡦఆ ● ઃܭͷࢦ਑Λ໌ࣔͯ͠ೝࣝΛἧ͑Δ ● ͜Ε·ͰͷֶͼΛੜ͔ͯ͠ΨΠυϥΠϯΛࡦఆ ● ͜ΕʹԊͬͯεΩʔϚΛҠߦ͍ͯ͘͠

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

20 ·ͱΊ ● GraphQLͷෛ࠴Λฦ٫͢ΔͨΊʹεΩʔϚͷҠߦΛ͓͜ͳ͍ͬͯΔ ● ͦΕʹ൐ͬͯϑϩϯτΤϯυʹݫີͳܕఆٛΛಋೖ͍ͯ͠Δ ● ಛʹେࣄʹ͍ͯ͠Δͷ͸ҎԼ ○ ۃྗ҆શʹҠߦ͢Δ ○ ৽ͨʹෛ࠴Λੵ·ͳ͍ ○ ՄೳͳݶΓ࢓૊ΈԽɺࣗಈԽΛ͓͜ͳ͏