Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
apollo-link-stateで Local Stateを 管理する世界 Takanori Oki Roppongi.js 2018/11/19
Slide 2
Slide 2 text
自己紹介 • Takanori Oki ( @takanorip ) • 株式会社FOLIO フロントエンドエンジニア • React / Vue.js / Polymer ( Web Components ) • フォントが好き
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Apollo Client • GraphQLをクライアントサイドで扱うための ライブラリ • vue-apolloやreact-apolloのように フレームワークやライブラリごとに ライブラリが用意されている
Slide 5
Slide 5 text
Apollo Link • Apollo Clientでサーバーとやり取りをする ためのインターフェース • Link をつなぎ合わせて処理を定義する • Link とは middleware のようなもので、 エラーハンドリングやポーリングなども ここで行う
Slide 6
Slide 6 text
Link1 Link2 Link3 Client Server
Slide 7
Slide 7 text
apollo-cache-inmemory • Apollo Clientはサーバーから取得したデータ をメモリ上にキャッシュすることができる • このキャッシュに対してクエリを投げる こともできる • キャッシュできるのはサーバー上にデータが あるもののみ
Slide 8
Slide 8 text
今までは サーバーとの通信しか Apollo Clientで操作 できなかった
Slide 9
Slide 9 text
Redux Apollo Client Server Local State
Slide 10
Slide 10 text
apollo-link-state
Slide 11
Slide 11 text
apollo-link-state • Apollo ClientでLocal Stateを扱うための ライブラリ • サーバーと通信する場合と同じ様に、 クエリとミューテーションを使用する
Slide 12
Slide 12 text
Apollo Client Server Local State
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Schema...? • まだよくわからない • ここにちょっと書いてある • https://www.apollographql.com/docs/link/ links/state.html#type-checking
Slide 17
Slide 17 text
おわり (フォント:源柔ゴシック)