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

by starling888888

Slide 1

Slide 1 text

5分で分かった気になれる GraphQLの話 2019-11-23 on Devfest in 信州2019

Slide 2

Slide 2 text

whoami? Ryo Uehara(@starling8+) ▪ 県内某社のWebエンジニア（新米） ▪ DockerとNodeJSがメインスタック ▪ プライベートではUbuntuとHaskellいじってる ▪ アカウントの8の数は使ってるサービスで変わります 2

Slide 3

Slide 3 text

1 What is GraphQL? 3

Slide 4

Slide 4 text

What is GraphQL? 4 ▪ ポストRESTAPIとして注目されているWebAPIの規格 ▪ ネストしたリソースやRESTであれば複数のエンドポイントへのリクエストを一回のリクエストで取得できる ▪ 複雑なエンドポイントやクエリパラメータを定義することなく、必要なフィールドのみをクライアントで取得することが可能

Slide 5

Slide 5 text

What is GraphQL? 従来のRESTモデル 5 出典：https://www.sitepoint.com/rest-2-0-graphql/

Slide 6

Slide 6 text

What is GraphQL? GraphQLモデル 6 出典：https://www.sitepoint.com/rest-2-0-graphql/

Slide 7

Slide 7 text

2 Basics of GraphQL 7

Slide 8

Slide 8 text

Basics of GraphQL ~server side~ TypeDefs ▪ 返すオブジェクトやインプットの型を定義 8

Slide 9

Slide 9 text

Basics of GraphQL ~server side~ TypeDefs ▪ Queryにデータ取得のエンドポイントを定義 ▪ Mutationにデータ操作のエンドポイントを定義 9

Slide 10

Slide 10 text

Basics of GraphQL ~server side~ Resolvers ▪ Query, Mutationのリクエストハンドラーを実装 10

Slide 11

Slide 11 text

Basics of GraphQL ~client side~ Query usage ▪ 必要なフィールドを指定して queryを作成 ▪ `/graphql`エンドポイントに POSTメソッドでqueryを送信 11

Slide 12

Slide 12 text

Basics of GraphQL ~client side~ FrameWork ▪ Client FrameWork(Apollo, Relay...)がうまいこと loading, errorのハンドリングやキャッシュをやってくれる 12

Slide 13

Slide 13 text

3 Good DX 13

Slide 14

Slide 14 text

Good DX ~graphiql~ ドキュメントビューとクエリを試せるGUIが組み込み済み 14

Slide 15

Slide 15 text

Good DX ~versioning~ ▪ バージョン管理をしないで済む ▫ 新しく型定義を追加すれば良い ▫ 破壊的変更は非推奨 ▫ 削除する場合は非推奨項目であることを示すメタデータを付与して、使われなくなったら削除 15

Slide 16

Slide 16 text

4 Conclusion 16

Slide 17

Slide 17 text

Conclusion GraphQLは ▪ かんたん！ ▪ はやい！ ▪ たのしい！ 17

Slide 18

Slide 18 text

Thanks! Happy coding with GraphQL! You can find me at: @starling888888 on Twitter 18

Slide 19

Slide 19 text

出典画像出典：https://www.sitepoint.com/rest-2-0-graphql/ コード出典：https://github.com/apollographql/fullstack-tutorial 19

Slide 20

Slide 20 text

CREDITS Special thanks to all the people who made and released these awesome resources for free: ▪ Presentation template by SlidesCarnival ▪ Photographs by Unsplash 20