浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】Cloud Firestoreでキャッシュされたデータを取得する

Firebase の Cloud Firestore で、オフラインの時にデータを取得する方法について調べたのでメモ代わりにまとめ。
ライブラリは React Native Firebase を導入しています。
なお、今回はデータ取得のところのみを扱います。

 

まず、通常のデータ取得の場合、下記のようにデータを取得するかと思います。

import firestore from '@react-native-firebase/firestore';

const result = await firestore().collection('コレクション名').get();

このとき、.get() の引数にオプションを指定することができ、ここでキャッシュからデータを取得するか、サーバーからデータを取得するかを指定することができます。
デフォルトは { source: "default" } で、この場合はまずサーバーからデータを取得できるか試した後、取得できなかったらキャッシュからデータを取得します。
それ以外の設定値は { source: "server" }{ source: "cache" } があります。
名前から分かる通り、{ source: "server" } の場合はサーバーからデータを取得し、{ source: "cache" } の場合はキャッシュからデータを取得します。

通常はデフォルトの設定で問題ないかと思うのですが、もし、キャッシュ優先でデータを取得したい場合は下記のように指定すると良いとのことでした。

import firestore from '@react-native-firebase/firestore';

try {
  // キャッシュからデータを取得
  const result = await firestore().collection('コレクション名').get({ source: "cache" });
} catch(error) {
  // 失敗したらサーバーからデータを取得
  const result = await firestore().collection('コレクション名').get({ source: "server" });
}

以上、一度のみデータを取得したい場合の記述方法でした。

 

次に、リアルタイムでのデータ取得時に、キャッシュからデータを取得する方法ですが、こちらは指定する方法がないみたいでした。
ただ、データ取得後に、サーバーかキャッシュのどちらからデータを取得したかを見分ける方法はあり、下記のように記述します。

import firestore from '@react-native-firebase/firestore';

firestore().collection('Users').onSnapshot((QuerySnapshot) => {
  // 成功時の処理
  // キャッシュから取得したデータかどうかを判定
  console.log(QuerySnapshot.metadata.fromCache);
}, (error) => {
  // エラー時の処理
});

6行目の QuerySnapshot.metadata.fromCache で、キャッシュから取得したかどうかを判定できます。
キャッシュから取得していた場合は true が返却され、サーバーから取得していた場合は false が返却されます。
なお、実際に実行したところ、1、2回キャッシュから取得して、あとはすべてサーバーからデータを取得していました。
おそらく、通信状況が悪ければキャッシュからデータを取得するようになると思います。

 

以上、Firebase の Cloud Firestore でキャッシュからデータを取得する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (1)