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

Transcript

1. GraphQLの
 オフライン対応した話 Takanori Oki @PWA Beginners 勉強会 #4

2. 自己紹介 • 大木尊紀(オオキタカノリ / @takanorip) • 株式会社スマートドライブ
 フロントエンドエンジニア • Nuxt.js、Polymer、React、など

   • Polymer Japan 翻訳チーム

3. 「イヌでもわかる〜」シリーズ Boothで好評発売中！

4. None

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

14. None

15. 補足：localForage • 非同期ストレージ（IndexedDBやWebSQL） をlocalStorageライクなAPIで使えるように してくれる • IndexedDBやWebSQLがサポートされてな いブラウザだとlocalStorageを使う • （localStorageは同期的）

16. None

17. apollo-link-retry • ネットワーク接続がオフラインのとき、リクエスト を保持し、オンラインに戻るまで再試行する • オフラインのときにすぐこけない • 間隔や遅延などをコントロールできる

18. None

19. Optionの設定 • apollo-clientの設定でキャッシュを優先的に 参照するようにする

20. None

21. まとめ

22. • GraphQLはServiceWorker
 だけじゃオフライン対応できない • localForageが有能 • キャッシュに対してクエリを投げる

23. おわり （フォント：BIZ UDフォント）