Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQLの オフライン対応した話
Search
takanorip
May 23, 2018
Technology
0
640
GraphQLの オフライン対応した話
takanorip
May 23, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
3
720
早わかり W3C Community Group
takanorip
0
260
Ubieとアクセシビリティのこれからを考える
takanorip
0
230
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
2.9k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.8k
デザインシステム運用とOKRの良い関係
takanorip
0
1.7k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
170
メンタルヘルスチューニング
takanorip
0
250
Other Decks in Technology
See All in Technology
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
0
160
OpenShiftはじめの一歩から継続的なチャレンジ
mame500
0
250
SREとその組織類型
tatsuo48
8
1.4k
社内勉強会運営のコツ
senoo
6
1.1k
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
1
4.1k
「共通基盤」を超えよ! 今、Platform Engineeringに取り組むべき理由
jacopen
24
5.6k
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
600
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
1
1.4k
転移学習とドメイン適応の基礎
kmatsui
2
560
Databricks:『生成AI World Cup』のご案内
databricksjapan
1
110
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
940
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.7k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
12
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Optimizing for Happiness
mojombo
369
69k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
118
38k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
How GitHub (no longer) Works
holman
302
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
A Modern Web Designer's Workflow
chriscoyier
689
190k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
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フォント)