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
750
GraphQLの オフライン対応した話
takanorip
May 23, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
100
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
790
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Technology
See All in Technology
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
100
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
実は強い 非ViTな画像認識モデル
tattaka
3
1.4k
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
360
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
170
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
350
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
240
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
AIエージェント開発のノウハウと課題
pharma_x_tech
8
4.6k
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
1
920
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
180
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
260
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
Documentation Writing (for coders)
carmenintech
68
4.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Building Adaptive Systems
keathley
40
2.4k
Designing for Performance
lara
605
68k
Bash Introduction
62gerente
611
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
A better future with KSS
kneath
238
17k
Visualization
eitanlees
146
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Facilitating Awesome Meetings
lara
53
6.3k
Building Applications with DynamoDB
mza
93
6.2k
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フォント)