$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQLの オフライン対応した話
Search
takanorip
May 23, 2018
Technology
0
830
GraphQLの オフライン対応した話
takanorip
May 23, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Design System Documentation Tooling 2025
takanorip
2
1.1k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
810
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
590
Bulletproof Design System with TypeScript
takanorip
7
4.5k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
220
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
980
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.6k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
540
Other Decks in Technology
See All in Technology
Databricks向けJupyter Kernelでデータサイエンティストの開発環境をAI-Readyにする / Data+AI World Tour Tokyo After Party
genda
1
120
AI駆動開発における設計思想 認知負荷を下げるフロントエンドアーキテクチャ/ 20251211 Teppei Hanai
shift_evolve
PRO
2
380
Debugging Edge AI on Zephyr and Lessons Learned
iotengineer22
0
180
ブロックテーマとこれからの WordPress サイト制作 / Toyama WordPress Meetup Vol.81
torounit
0
570
RAG/Agent開発のアップデートまとめ
taka0709
0
180
Fashion×AI「似合う」を届けるためのWEARのAI戦略
zozotech
PRO
2
360
[デモです] NotebookLM で作ったスライドの例
kongmingstrap
0
140
ガバメントクラウド利用システムのライフサイクルについて
techniczna
0
190
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
1ftseabass
PRO
0
360
第4回 「メタデータ通り」 リアル開催
datayokocho
0
130
グレートファイアウォールを自宅に建てよう
ctes091x
0
150
評価駆動開発で不確実性を制御する - MLflow 3が支えるエージェント開発
databricksjapan
1
170
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
710
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
How to Ace a Technical Interview
jacobian
280
24k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Why Our Code Smells
bkeepers
PRO
340
57k
Building an army of robots
kneath
306
46k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
3k
We Have a Design System, Now What?
morganepeng
54
7.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.7k
Site-Speed That Sticks
csswizardry
13
1k
Transcript
GraphQLの オフライン対応した話 Takanori Oki @PWA Beginners 勉強会 #4
自己紹介 • 大木尊紀(オオキタカノリ / @takanorip) • 株式会社スマートドライブ フロントエンドエンジニア • Nuxt.js、Polymer、React、など
• Polymer Japan 翻訳チーム
「イヌでもわかる〜」シリーズ Boothで好評発売中!
None
GraphQL?
GraphQL / Apollo Client • GraphQL • APIへリクエストするためのクエリ言語 • apollo-client
• フロントエンドからGraphQLへリクエスト するためのツール
GraphQLのリクエスト結果は ServiceWorkerだけだと キャッシュされない
なぜ?
GraphQLは すべてのリクエストが POSTメソッド だから!
Cache.put と、Cache.add、 Cache.addAll は、 GET リクエストのみ cache に保存できます。 出典:MDN
別途、GraphQLの オフライン対応が必要
じゃあどうするの? • リクエスト結果をIndexedDBなどに保存 • オフラインエラーのときはIndexedDBに 保存したキャッシュに向けて再度リクエストを 投げる • その結果を使ってViewを表示
apollo-cache-persist • GraphQLのキャッシュをオフラインストレージ に入れることで永続化するライブラリ • localStorage、sessionStorage、 localForageに対応してる • https://github.com/apollographql/ apollo-cache-persist
None
補足:localForage • 非同期ストレージ(IndexedDBやWebSQL) をlocalStorageライクなAPIで使えるように してくれる • IndexedDBやWebSQLがサポートされてな いブラウザだとlocalStorageを使う • (localStorageは同期的)
None
apollo-link-retry • ネットワーク接続がオフラインのとき、リクエスト を保持し、オンラインに戻るまで再試行する • オフラインのときにすぐこけない • 間隔や遅延などをコントロールできる
None
Optionの設定 • apollo-clientの設定でキャッシュを優先的に 参照するようにする
None
まとめ
• GraphQLはServiceWorker だけじゃオフライン対応できない • localForageが有能 • キャッシュに対してクエリを投げる
おわり (フォント:BIZ UDフォント)