GraphQL 入門 - Speaker Deck

Slide 1

Slide 1 text

GraphQL入門舘佳紀

Slide 2

Slide 2 text

自己紹介名前 : 舘佳紀大学 : 会津大学学部4年好きな言語　swift twitter @tikin0716 gitHub tiking76

Slide 3

Slide 3 text

そもそもGraphQLってなに？？

Slide 4

Slide 4 text

GraphQL ● クエリ言語 ● 既存のデータに対するクエリを実行するランタイム ● データの構造がグラフ構造になっている ● Facebook製

Slide 5

Slide 5 text

導入プロダクト例

Slide 6

Slide 6 text

GraphQLのメリット・デメリット

Slide 7

Slide 7 text

メリット ● スキーマと仕様が１対１になっている ● GraphQL はイントロスペクションが可能でクライアントは、利用できるデータ型のリストをリクエストできる。 →スキーマからのコードの自動生成もできる。

Slide 8

Slide 8 text

デメリット ● REST経験者だと学習コストが高い ● キャッシュが REST よりも複雑になる

Slide 9

Slide 9 text

GraphQLのスキーマ

Slide 10

Slide 10 text

GraphQl SDL(Schema Deﬁnition Language) ● スキーマ設計の記述言語として、　　SDLとして汎用的に決めている  ● 型の定義として明示的でわかりやすい　　　　　　　　　　　　　　　　　　　　 

Slide 11

Slide 11 text

Interface ● 標準で持つ型(Scala、Type)には String , Intなどがある ● !はnon-nullableのこと ● オブジェクトのインターフェースとして定義したいときに用います。

Slide 12

Slide 12 text

Type ● implementsで定義したinterface型を実装できる ● オブジェクトとして定義したいときに用います。

Slide 13

Slide 13 text

Query ● idやﬁrstを変数として扱いたい時は、 $idとかにしてあげる ● 1Viewに対して、1queryだといい ● REST時のGETの挙動を担当してる

Slide 14

Slide 14 text

Mutation ● idやﬁrstを変数として扱いたい時は、$id とかにしてあげる ● 1Viewに対して、1Mutationだといい ● REST時のGETの以外の全ての挙動を担当してる。→値を書き換えること

Slide 15

Slide 15 text

Fragment ● ある程度の粒度でまとめたいときに使う。 ● 大体は1コンポーネント1 フラグメントだったりします、またコンポーネントへの引数をフラグメントのみにすると可読性も上がります。

Slide 16

Slide 16 text

RESTとの比較

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

リクエストタイプの比較 REST ● GET ● POST ● PUT ● DELET GraphQL ● Query ● Mutation

Slide 19

Slide 19 text

Clientサイドでは…

Slide 20

Slide 20 text

Apollo ● GraphQLベースのデータスタックです。 ● GraphQLのAPIClientととして、よく使います ● サーバーサイドにも同様なものがあるため、プロジェクトでの統一ができます。 https://www.apollographql.com/docs/ios/

Slide 21

Slide 21 text

GUIのツール GraphQL Playground

Slide 22

Slide 22 text

GUIのツール xcode-graphql

Slide 23

Slide 23 text

実際に動かしてみた…

Slide 24

Slide 24 text

仕様技術 ● サンプルAPI(https://apollo-fullstack-tutorial.herokuapp.com/graphql) ● SwiftUI2.0 ● APIClientにはApollo

Slide 25

Slide 25 text

デモ

Slide 26

Slide 26 text

スキーマから自動生成もできるみたい… Installation - Client (iOS)

Slide 27

Slide 27 text

最後に…

Slide 28

Slide 28 text

まとめ ● スキーマと仕様が１対１になっている点が最高 ● 考え方を改める点でREST経験者だと学習コストが高い ● Client側だとクエリからコードが自動生成されるライブラリーもあり、開発環境は整い出している感はある ● 宣言的UIと相性がいいと言われているのは、レスポンスの情報を一画面の情報を受け取れるから

Slide 29

Slide 29 text