apollo-link-stateで Local State を管理する世界/apollo-link-state

Transcript

1. apollo-link-stateで Local Stateを 管理する世界 Takanori Oki Roppongi.js 2018/11/19

2. 自己紹介 • Takanori Oki ( @takanorip ) • 株式会社FOLIO
 フロントエンドエンジニア

   • React / Vue.js / Polymer ( Web Components ) • フォントが好き
3. None

4. Apollo Client • GraphQLをクライアントサイドで扱うための ライブラリ • vue-apolloやreact-apolloのように
 フレームワークやライブラリごとに
 ライブラリが用意されている

5. Apollo Link • Apollo Clientでサーバーとやり取りをする
 ためのインターフェース • Link をつなぎ合わせて処理を定義する •

   Link とは middleware のようなもので、
 エラーハンドリングやポーリングなども
 ここで行う

6. Link1 Link2 Link3 Client Server

7. apollo-cache-inmemory • Apollo Clientはサーバーから取得したデータ をメモリ上にキャッシュすることができる • このキャッシュに対してクエリを投げる
 こともできる • キャッシュできるのはサーバー上にデータが

   あるもののみ

8. 今までは サーバーとの通信しか Apollo Clientで操作 できなかった

9. Redux Apollo Client Server Local State

10. apollo-link-state

11. apollo-link-state • Apollo ClientでLocal Stateを扱うための
 ライブラリ • サーバーと通信する場合と同じ様に、
 クエリとミューテーションを使用する

12. Apollo Client Server Local State

13. None
14. None
15. None

16. Schema...? • まだよくわからない • ここにちょっと書いてある • https://www.apollographql.com/docs/link/ links/state.html#type-checking

17. おわり （フォント：源柔ゴシック）