Firebase の Cloud Firestore で保存していたデータを取得する際に、Web ページでよくあるページネーションを実装する方法についてまとめ。
今回初めて知ったのですが、Cloud Firestore でデータを取得する際、limit はあっても offset がないんですね…！
どうやってやればいいのか、ちょっと悩みました。
なお、使用したライブラリは React Native Firebase です。
参考にさせていただいた記事はこちら。
Cloud Firestore でのページネーションの実装 | mokajima.com
https://mokajima.com/how-to-paginate-data-in-cloud-firestore/
やり方ですが、limit() と startAfter() を合わせて使います。
まず、1回目の 1ページ目を取得する際は、limit() だけを使います。
その後、2回目の 11件から 20件を取得等の処理を行う際には、startAfter() を使って、指定したデータより後ろのデータを 10件分取得するという感じで指定します。
サンプルコードは下記のとおりです。
// 1ページ目のデータ取得
const result = await firestore().collection('コレクション名')
.orderBy('createdAt', 'desc')
.limit(10)
.get();
まず、1ページ目の、先頭データから 10件分のデータを取得する処理です。
この時、一番最後のデータを保存しておきます。
次に、2ページ目以降のデータ取得方法です。
上のサンプルコードで保存しておいた、リスト最後の投稿日時を startAt() に追加します。
// 2ページ目以降のデータ取得
const createdAtEnd = 'リスト最後のデータの投稿日時';
const result = await firestore().collection('コレクション名')
.orderBy('createdAt', 'desc')
.startAt(createdAtEnd)
.limit(10)
.get();
上記のように記述することで、最後に取得したデータから 10件分というデータのとり方ができます。
なお、データ取得後は、変数 createdAtEnd に保存しているデータを、新しく取得したデータの最後の投稿日時に置き換える必要がありますので、こちらの処理をお忘れなく。
また、startAt() で指定する項目で orderBy() を必ず指定するようにしてください。
処理としては以上です！
最初、offset の指定ができないと聞いた時、どうする…！？と思ったのですが、意外とあっさり対応できてよかったです。
以上、React Native Firebase の Cloud Firestoreでページネーションを実装する方法についてでした。
ご参考になれば幸いです。
