TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024

Transcript

1. 2024/5/11 TSKaigi @hokaccha TypeScriptͱGraphQLͰ࣮ݱ͢Δ ܕ҆શͳAPI࣮૷
2. Ubie, Inc @hokaccha @hokaccha Kazuhito Hokamura
3. ࠓ೔ͷ಺༰͸ͪ͜ΒͰ΋ಡΊ·͢ Ubie ςοΫϒϩά
4. ͳͥAPIʹܕΛ͚͍ͭͨͷ͔
5. Α͋͘Δ API ϦΫΤετͷίʔυ
6. any ͔ΒͷܕΩϟετͱ͸ɺفΓ 🙇
   ҆શفئ
   🙏
7. فΓ͕௨͡ͳ͍ͱ਌ͷإΑΓݟͨ΍ͭ
8. ֎෦I/Oʹର͢Δܕ෇͚͕ෆे෼ͩͱ ੩తܕ෇͚ͷԸܙΛे෼׆͔ͤͳ͍
9. API ʹܕΛ͚ͭΔ #ͱ͸ 1. API ͷ࢓༷ΛεΩʔϚͰఆٛ͢Δ 2. εΩʔϚ͔Β࣮૷ݴޠͷܕΛੜ੒͢Δ 3. ੜ੒͞ΕͨܕΛ࢖࣮ͬͯ૷͢Δ • ΫϥΠΞϯτͷ࣮૷ • αʔόʔͷ࣮૷
10. API ʹܕΛ͚ͭΔٕज़ • OpenAPI • gRPC • GraphQL ࠓ೔͸͜Ε
11. GraphQLͷεΩʔϚఆٛ schema.graphq
12. εΩʔϚ͔ΒܕΛੜ੒ schema.graphq generated.ts
13. ੜ੒ͨ͠ܕΛ࢖࣮ͬͯ૷͢Δ client.ts server.ts ˞ίʔυ͸Πϝʔδ
14. GraphQL Codegen
15. ΫϥΠΞϯταΠυ
16. GraphQL Codegen Client Preset
17. codegen.ts
18. 🙅 εΩʔϚ͔Βੜ੒ͨ͠ܕΛ࢖͏ 🙆 ΫΤϦ͔Βੜ੒ͨ͠ܕΛ࢖͏
19. εΩʔϚ͔Βੜ੒ͨ͠ܕΛ࢖͏ εΩʔϚ ੜ੒͞Εͨܕ ΫϥΠΞϯτ࣮૷
20. εΩʔϚ͔Βੜ੒ͨ͠ܕΛ࢖͏ εΩʔϚ ੜ੒͞Εͨܕ ΫϥΠΞϯτ࣮૷ JNBHF6SM͕ܕʹ͸͋Δ͚ͲϨεϙϯεʹ͸ͳ͍
21. εΩʔϚ͔Βੜ੒ͨ͠ܕΛ࢖͏ εΩʔϚ ੜ੒͞Εͨܕ ΫϥΠΞϯτ࣮૷ JNBHF6SM͕ܕʹ͸͋Δ͚ͲϨεϙϯεʹ͸ͳ͍
22. ΫΤϦ͔Βੜ੒ͨ͠ܕΛ࢖͏
23. ΫΤϦจࣈྻ͔Β
    (SBQI2-
    $PEFHFO͕ܕΛੜ੒͢Δ
24. ͜ͷ஋Λ(SBQI2-ͷΫϥΠΞϯτʹ౉͢ͱ
    ΫΤϦͷ݁Ռʹਖ਼͘͠ܕ͕ͭ͘
25. ೖྗ஋΋ΫΤϦ͔Β࡞ΒΕͨ
    ܕͰܕݕ͕ࠪޮ͘
26. TypedDocumentNode • GraphQL Codegen͕ੜ੒͢ΔΫΤϦͷܕ෇͖AST • ରԠ͢ΔΫϥΠΞϯτʹ৯ΘͤΔͱܕ͕෇͘ • ϝδϟʔͲ͜ΖͷΫϥΠΞϯτ͸ରԠ͍ͯ͠Δ • Apollo Client • urql • graphql-request ͜Ε
27. Fragment Masking
28. ͷલʹFragment Colocation
30. ը૾Λදࣔ͠ͳ͍Α͏ʹมߋ
31. ফ͠๨Εͯ΋
    ؾ෇͚ͳ͍
32. ଞͷΫΤϦͰ΋ࢀর͞ΕͯΔ͔΋
33. ͢΂ͯͷࢠ͕ඞཁͱ͢ΔσʔλΛτοϓϨϕϧͷ ΫΤϦ͕஌͍ͬͯΔඞཁ͕͋Δͱ͍͏ઃܭͷ࿪
36. ͜ͷ'SBHNFOUఆ͔ٛΒܕΛੜ੒
37. ੜ੒͞Εͨܕ
38. Fragment Colocation • FragmentΛίϯϙʔωϯτͱಉ͡৔ॴʹஔ͘ • ίϯϙʔωϯτ͸ࣗ਎͕ؔ৺ͷ͋ΔϑΟʔϧυ͚ͩ؅ཧ͢Ε͹Α͍ • ਌͸௚઀ͷࢠͷFragment͚ͩΛ஌͍ͬͯΕ͹Α͍
39. Fragment Masking
41. ͜͜Ͱ͔͠OBNFΛࢦఆͯ͠ͳ͍
42. ͜͜ͰࢀরͰ͖ͯ͠·͏
43. ࣮͸͜Ε͸ܕΤϥʔʹͳΔ
44. ͜Μͳײ͡ʹܕΛมߋ
45. ͜ͷؔ਺Λ௨͞ͳ͍ͱ'SBHNFOUͷ
    σʔλΛࢀরͰ͖ͳ͍
46. Fragment Masking • FragmentΛఆٛͨ͠ίϯϙʔωϯτҎ֎͔ΒFragmentͷσʔλʹ
 ΞΫηεͰ͖ͳ͍Α͏ʹ͢Δ • ͜ΕʹΑͬͯFragment Colocation͕ڧ੍ͤ͞Δ • ܕ͕ෳࡶʹͳΔͱ͍͏σϝϦοτ΋͋Δ
47. αʔόʔαΠυ
48. GraphQL Codegen TypeScript Resolvers
49. GraphQL Codegen TypeScript Resolvers 4FSWFS
    1SFTFU͸บ͕ڧΊ
50. ϝδϟʔͳϥΠϒϥϦʹରԠ • graphql-js • ͜Ε͕શͯͷϕʔε • Apollo Server • GraphQL Yoga
51. NestJS͚ͩগ͠ಛघ Ubie ςοΫϒϩά
52. schema.graphql
53. resolvers.ts model.ts
54. resolvers.ts model.ts %#͔ΒҾ͍ͯNPEFMͷܕΛฦ͢
55. codegen.ts
57. ܕ͕͍ͭͯΑ͔ͬͨʂ׬ʂ ͱ͸͍͔ͳ͍
59. DPNQBOZΛؚ·ͳ͍
60. DPNQBOZͷऔಘ͕ແବ
62. DPNQBOZ͕ΫΤϦʹؚ·ΕΔͱ͖͚࣮ͩߦ͞ΕΔ
65. codegen.ts 3FTPMWFSͰѻ͏ܕΛมߋͰ͖Δ
67. ·ͱΊ
68. ·ͱΊ • APIͷ࣮૷ʹܕΛ͚ͭͯفΓ͔Β։์͞ΕΑ͏ʂ • GraphQL CodegenͰΫϥΠΞϯτɾαʔόʔͷ࣮૷ʹܕΛ͚ͭΒΕΔʂ • ಋೖίετ͸ͦΕͳΓʹ͔͔Δ͚ͲϝϦοτ͸ѹ౗తʹେ͖͍ͧʂ
69. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ