5分で分かった気になれるGraphQLの話

2019-11-23 に行われたDevfest in 信州2019 のLTで発表したスライド

Transcript

1. 5分で分かった気になれる GraphQLの話 2019-11-23 on Devfest in 信州2019
2. whoami? Ryo Uehara(@starling8+) ▪ 県内某社のWebエンジニア（新米） ▪ DockerとNodeJSがメインスタック ▪ プライベートではUbuntuとHaskellい じってる ▪ アカウントの8の数は使ってるサービス で変わります 2
3. 1 What is GraphQL? 3
4. What is GraphQL? 4 ▪ ポストRESTAPIとして注目されているWebAPIの規格 ▪ ネストしたリソースやRESTであれば複数のエンドポイ ントへのリクエストを一回のリクエストで取得できる ▪ 複雑なエンドポイントやクエリパラメータを定義するこ となく、必要なフィールドのみをクライアントで取得す ることが可能
5. What is GraphQL? 従来のRESTモデル 5 出典：https://www.sitepoint.com/rest-2-0-graphql/
6. What is GraphQL? GraphQLモデル 6 出典：https://www.sitepoint.com/rest-2-0-graphql/
7. 2 Basics of GraphQL 7
8. Basics of GraphQL ~server side~ TypeDefs ▪ 返すオブジェクトやインプット の型を定義 8
9. Basics of GraphQL ~server side~ TypeDefs ▪ Queryにデータ取得のエンドポ イントを定義 ▪ Mutationにデータ操作のエン ドポイントを定義 9
10. Basics of GraphQL ~server side~ Resolvers ▪ Query, Mutationのリクエス トハンドラーを実装 10
11. Basics of GraphQL ~client side~ Query usage ▪ 必要なフィールドを指定して queryを作成 ▪ `/graphql`エンドポイントに POSTメソッドでqueryを送信 11
12. Basics of GraphQL ~client side~ FrameWork ▪ Client FrameWork(Apollo, Relay...)がうまいこと loading, errorのハンドリン グやキャッシュをやってくれる 12
13. 3 Good DX 13
14. Good DX ~graphiql~ ドキュメントビューとクエリを試せるGUIが組み込み済み 14
15. Good DX ~versioning~ ▪ バージョン管理をしないで済む ▫ 新しく型定義を追加すれば良い ▫ 破壊的変更は非推奨 ▫ 削除する場合は非推奨項目であることを示すメタデータ を付与して、使われなくなったら削除 15
16. 4 Conclusion 16
17. Conclusion GraphQLは ▪ かんたん！ ▪ はやい！ ▪ たのしい！ 17
18. Thanks! Happy coding with GraphQL! You can find me at: @starling888888 on Twitter 18
19. 出典 画像出典：https://www.sitepoint.com/rest-2-0-graphql/ コード出典：https://github.com/apollographql/fullstack-tutorial 19
20. CREDITS Special thanks to all the people who made and released these awesome resources for free: ▪ Presentation template by SlidesCarnival ▪ Photographs by Unsplash 20