Tweet
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

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