FireStoreでページングを試してみたメモ

概要

FireBaseのバージョンは6.3.5。
FireStoreを使ったページングについて試したメモ。
最初に件数を取得する以外に何か方法がないか探している。

ソース

保存の頻度は高くなく、createdAtにnanosecondsまで同じデータはなく、ユニークな値となっている想定。
nextPageTokenが空白のときは次のページはないという仕様にしている。
以下のソースだと、limitと、保存されているデータの総数が同じときに、
次のデータがないのに「次へ」というボタンが表示されるバグがある。

import * as firebase from 'firebase';
const { Timestamp } = firebase.firestore;

export async function readEnemies(storeUserId, limit, pageToken) {
  const db = firebase.firestore();
  let query = db.collection("users").doc(storeUserId).collection('enemies').orderBy('createdAt', 'desc').limit(limit);
  const splitter = ':';

  if (pageToken !== "") {
    const [seconds, nanoseconds] = pageToken.split(splitter);
    const timestamp = new Timestamp(seconds, nanoseconds);
    query = query.startAfter(timestamp);
  }

  const querySnapshot = await query.get();
  const enemies: any[] = [];
  await querySnapshot.forEach((doc) => {
    const enemy = doc.data();
    enemies.push(enemy);
  });

  if (querySnapshot.docs.length < limit) {
    // limitより少なければ、次のデータはないとする ... limitと同値の時は次へが表示されてしまう
    return { enemies, nextPageToken: "" };
  }

  const last = querySnapshot.docs[querySnapshot.docs.length - 1];
  const lastData = last.data();
  const time = lastData.createdAt;
  let nextToken = `${time.seconds}${splitter}${time.nanoseconds}`;

  return { enemies, "nextPageToken": nextToken };
}

参考ソース

ts
index

参考

Firestore で いいね順（Score順）Sort + Paging するポイント
クエリカーソルを使用したデータのページ設定
firebase. firestore. Timestamp
Firestoreを試してみた
Firebase Cloud Firestoreの使い方
TypeScriptからFirestoreを使いやすくするfirestore-simple v4をリリースしました
Firestoreお役立ちリンク