Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

GraphQL？

Slide 6

Slide 6 text

GraphQL / Apollo Client • GraphQL • APIへリクエストするためのクエリ言語 • apollo-client • フロントエンドからGraphQLへリクエスト
 するためのツール

Slide 7

Slide 7 text

GraphQLのリクエスト結果は ServiceWorkerだけだと キャッシュされない

Slide 8

Slide 8 text

なぜ？

Slide 9

Slide 9 text

GraphQLは すべてのリクエストが POSTメソッド だから！

Slide 10

Slide 10 text

Cache.put と、Cache.add、 Cache.addAll は、 GET リクエストのみ cache に保存できます。 出典：MDN

Slide 11

Slide 11 text

別途、GraphQLの オフライン対応が必要

Slide 12

Slide 12 text

じゃあどうするの？ • リクエスト結果をIndexedDBなどに保存 • オフラインエラーのときはIndexedDBに
 保存したキャッシュに向けて再度リクエストを
 投げる • その結果を使ってViewを表示

Slide 13

Slide 13 text

apollo-cache-persist • GraphQLのキャッシュをオフラインストレージ に入れることで永続化するライブラリ • localStorage、sessionStorage、
 localForageに対応してる • https://github.com/apollographql/ apollo-cache-persist

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

まとめ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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