GraphQLの オフライン対応した話

Transcript

1. GraphQLの
 オフライン対応した話 Takanori Oki @PWA Beginners 勉強会 #4
2. 自己紹介 • 大木尊紀(オオキタカノリ / @takanorip) • 株式会社スマートドライブ
 フロントエンドエンジニア • Nuxt.js、Polymer、React、など • Polymer Japan 翻訳チーム
3. 「イヌでもわかる〜」シリーズ Boothで好評発売中！
5. GraphQL？
6. GraphQL / Apollo Client • GraphQL • APIへリクエストするためのクエリ言語 • apollo-client • フロントエンドからGraphQLへリクエスト
 するためのツール
7. GraphQLのリクエスト結果は ServiceWorkerだけだと キャッシュされない
8. なぜ？
9. GraphQLは すべてのリクエストが POSTメソッド だから！
10. Cache.put と、Cache.add、 Cache.addAll は、 GET リクエストのみ cache に保存できます。 出典：MDN
11. 別途、GraphQLの オフライン対応が必要
12. じゃあどうするの？ • リクエスト結果をIndexedDBなどに保存 • オフラインエラーのときはIndexedDBに
 保存したキャッシュに向けて再度リクエストを
 投げる • その結果を使ってViewを表示
13. apollo-cache-persist • GraphQLのキャッシュをオフラインストレージ に入れることで永続化するライブラリ • localStorage、sessionStorage、
 localForageに対応してる • https://github.com/apollographql/ apollo-cache-persist
15. 補足：localForage • 非同期ストレージ（IndexedDBやWebSQL） をlocalStorageライクなAPIで使えるように してくれる • IndexedDBやWebSQLがサポートされてな いブラウザだとlocalStorageを使う • （localStorageは同期的）
17. apollo-link-retry • ネットワーク接続がオフラインのとき、リクエスト を保持し、オンラインに戻るまで再試行する • オフラインのときにすぐこけない • 間隔や遅延などをコントロールできる
19. Optionの設定 • apollo-clientの設定でキャッシュを優先的に 参照するようにする
21. まとめ
22. • GraphQLはServiceWorker
 だけじゃオフライン対応できない • localForageが有能 • キャッシュに対してクエリを投げる
23. おわり （フォント：BIZ UDフォント）