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
780
効果的な管理画面を デザインをするために 避けるべき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
日経のデータベース事業とElasticsearch
hinatades
PRO
0
240
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
160
MIMEと文字コードの闇
hirachan
2
1.4k
Windows の新しい管理者保護モード
murachiakira
0
200
What's new in Go 1.24?
ciarana
1
110
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
380
AIエージェント入門
minorun365
PRO
31
18k
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
180
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
100
手を動かしてレベルアップしよう!
maruto
0
220
偏光画像処理ライブラリを作った話
elerac
1
170
AIエージェント元年@日本生成AIユーザ会
shukob
1
220
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
GraphQLとの向き合い方2022年版
quramy
44
14k
Scaling GitHub
holman
459
140k
Code Review Best Practice
trishagee
67
18k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
How to Ace a Technical Interview
jacobian
276
23k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
For a Future-Friendly Web
brad_frost
176
9.6k
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フォント)