GraphQL×TypeScriptでエモかった5つのこと.pdf

Gunmaweb #34のLTスライドです。
GraphQL、及びGraphQL×TypeScriptを組み合わせてみてエモいなぁと感じることが多かったのでそれらをまとめてみました。

Transcript

1. GraphQL×TypeScriptͰ ΤϞ͔ͬͨ5ͭͷ͜ͱ 2019/02/02 Gunma.web #34 ؔޱ ࢘
2. ໊લ: ؔޱ࢘ SNS: GitHub: TsukasaGR Twitter: TsukasaGr NewsPicks: ؔޱ࢘ ࠲ӈͷ໏ ࣗ෼ͷͨΊʹɺଞਓʹਚ͘͢ ࢓ࣄ: αϥϦʔϚϯ: SIerͰ৽نࣄۀ(toC޲͚ͷWebαʔϏε)։ൃ ϑϦʔϥϯε: ελʔτΞοϓͷWebΤϯδχΞ ࠷ۙ৮ͬͯΔ΋ͷ: PHP(Laravel)ɺJavascript/Typescript(Vue.js/Nuxt.js)ɺGraphQLɺDockerɺAWSɺFirebase ࣗݾ঺հ
3. ࠓ೔࿩͢͜ͱ • GraphQLͱ͸ • GraphQLͷPros/Cons • TypeScriptͱ͸ • GraphQLΛ৮ͬͯΤϞ͔ͬͨ͜ͱ • GraphQL×TypeScriptΛ૊Έ߹Θͤͯ ΤϞ͔ͬͨ͜ͱ
4. GraphQL(backend) Laravel: 5.7.24 nuwave/lighthouse: 2.6.4 mll-lab/laravel-graphql-playground: 0.3.3 GraphQL(frontend), TypeScript Nuxt.js: 2.3.4 typescript: 3.2.2 @nuxtjs/apollo: 4.0.0-rc2.3 etc… લఏ
5. ΤϞ͔ͬͨ5ͭͷ͜ͱ
6. 1. ΫϥΠΞϯτ࣮ߦ؀ڥ͕ ΤϞ͍
7. mll-lab/laravel-graphql-playground (prisma/graphql-playground)
8. prisma/vscode-graphql
9. 2. GraphQLͷΫΤϦ͕ ΤϞ͍
10. ෳ਺ͷΫΤϦΛ·ͱΊͯൃߦ
11. 3. Document as Code͕ ΤϞ͍
12. nuwave/lighthouse
13. 4. Code Generator͕ ΤϞ͍
14. dotansimha/graphql-code-generator
15. 5. ·ͩओྲྀʹͳͬͯͳ͍ͷ͕ ΤϞ͍
16. • TypeScript͸AltJSͷσϑΝΫτʹͳΓͭͭ͋Δ͕ɺAPI͸ ·ͩ·ͩRestAPI͕ओྲྀ • ΋ͪΖΜGraphQL͸RestAPIͷ୅ସͱͯ͠Ͱͳ͘࢖͍෼͚ Δ΋ͷͩͱࢥ͏͕ɺSSKDsͳAPIͰ͋Ε͹ΤϯυϙΠϯτ ͕ҰՕॴʹ·ͱ·͍ͬͯΔͱϑϩϯτΤϯυ͕εοΩϦ͢ Δ • ͢ͰʹΤϞ͍GraphQL͕ͩɺࠓޙ͞ΒʹΤϞ͘ͳ͍ͬͯ͘ Մೳੑ͕͋Δʂ ͞ΒʹΤϞ͘ͳΔ͔΋ʁʂ
17. ͓·͚. ΤϞ͘ͳ͍ͱ͜Ζ
18. • GraphQLͷΤϞ͘ͳ͍ͱ͜Ζ • TypeScriptͷΤϞ͘ͳ͍ͱ͜Ζ • Laravel×GraphQLͷΤϞ͘ͳ͍ͱ͜Ζ • Nuxt×TypeScriptͷΤϞ͘ͳ͍ͱ͜Ζ
19. LaravelͷGraphQL ϥΠϒϥϦ͕ൃల్্ LaravelͰGraphQLΛ࢖͍౗ͯ͠Έͨ https://qiita.com/TsukasaGR/items/1a8b0020e5e83e7a46c7
20. NuxtͷTSαϙʔτ͕·ͩऑ͍ ͕ɺઌ೔ϦϦʔε͞Εͨv2.4ͰTSαϙʔτͨ͠ͱͷ͜ͱ https://dev.to/nuxt/nuxtjs-v240-is-out-typescript-smart- prefetching-and-more-18d
21. ͍͞͝ʹ
22. • ࣮ࡍʹΞϓϦέʔγϣϯΛ࣮૷ͯ͠ΈΔͱҧͬͨݟ͑ํ͸͋Γͦ͏ • ٧·ͬͨ࣌ʹάάͬͯ΋ղܾࡦ͕օແ • ΫΤϦͷ8ׂ͕Resolver • CustomDirectiveɺCustomScalarͱϑϨʔϜϫʔΫͷओػೳ (DIɺORM౳)ͷ࿈ܞ͕ग़དྷͳ͍ • PrismaɺApollo͕ଟػೳɺϥΠϒϥϦ͕ଟ͗ͯ͢Α͘Θ͔Βͳ͍ • ΍ͬͺΓRestAPIҰຊʹ໭ͦ͏ • etc… ͦΕͰ΋஍ཕΛ౿Ήʹ஋͢ΔΤϞ͕͋͞Δʂ