Save 37% off PRO during our Black Friday Sale! »

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

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

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

May 23, 2018
Tweet

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フォント)