先日ページネーションを実装しました。まだまだfirestoreを使ったリクエストのページネーションのリクエスト実装は情報が少なく定まっていない気がしたので、実装方法をシェアをしようと思いました。

追記
「戻る」ページネーションの方法も追加しました。

最終的なリクエストイメージ

本記事の内容を実装すると、下記のようなページネーションリクエストが可能になります。
booksデータを指定した数、指定した作成タイミング(CreateAt)より後のデータを取得します。

1ページ目

GET /books?limit=30

1ページ目は開始点を指定せずで大丈夫です。

レスポンス

2ページ目

GET /books?limit=30&nextStartCreateAt=2022-03-27 21:23

1ページ目の最後のbooksのcreateAtを開始点としてnextStartCreateAtに設定します。

最後のbooksのcreateAtを取得

レスポンス

3ページ目

GET /books?limit=30&nextStartCreateAt=2022-03-28 21:23

2回目と同様に、2ページ目の最後のbooksのcreateAtを開始点としてnextStartCreateAtに設定します。
このリクエストを繰り返すことでページネーションリクエストを実現することができます。

最後のbooksのcreateAtを取得

レスポンス

次のページを取得するならStartAtもしくはStartAfterを使う

firestoreでページネーションを実装するには、クエリカーソルを使います。クエリカーソルとはクエリの開始点と終了点を定義することです。(公式より)

StartAtとStartAfterの違いは開始点を含めるか含めないかです。

StartAt	開始点を含む(>=)
StartAfter	開始点を含まない(>)

どちらでも構いませんが今回はフロントでの処理を減らす想定でStartAfterを使って実装していきます。

パラメーターにはLimit、NextStartCreateAtをオプションで指定できるようにする

実装後のリクエストイメージです。
GET /books?limit=30&nextStartCreateAt=2022-01-11 20:45

各パラメータについて

Limit	ページネーションごとの取得数を指定する
NextStartCreateAt	データの開始点を指定する

handlerやコントローラでリクエストを受け取る

リクエスト情報をhandler、もしくはcontrollerなどで取得します。limitとnextStartCreateAtの情報をそのまま実行関数に渡します。
(エラーハンドリングなどは省略しています)。

クエリの実行とデータの変換を行う

usecaseなどの関数ではNextStartCreateAtをStartAfterに指定してNextStartCreateAt以降に作成されたbooksを取得することができます。ポイントは開始点を指定するフィールドをOrderByしておく必要があることです。

これで、ページネーションの実装の完成です！公式で用意されているだけあって割と簡単に実装することができます。

「戻る」場合のページネートリクエスト

戻る場合には、EndAtかEndBeforeを使いましょう！範囲の考え方はStartAt、StartAfterと同じです！
公式

EndAt	開始点を含む(<=)
EndBefore	開始点を含まない(<)

リクエスト時は現在のページの最初のbooksのcreateAtをprevEndCreateAtにセットしましょう。

最初のbooksのcreateAtを取得

実装後のリクエストイメージ。
GET /books?limit=30&prevEndCreateAt=2022-01-11 20:45

各パラメータについて

LimitToLast	ページネーションごとの取得数を指定する(EndBeoreの場合)
PrevEndCreateAt	データの終了点を指定する

クエリの実行とデータの変換を行う

先ほどのusecase層での処理をPrevEndCreateAt用に書き換えたのがこちらです。

ポイントはEndBeforeを使う場合、LimitToLastを使い取得データの最後からデータを取得する必要があります。またLimitToLastを使う場合はGetAllによるドキュメント取得になります(Iteratorは使えないようです)
これで1ページ前のデータを取得することができます！

LimitToLastを使う利用について詳しくはページネーションで「戻る」場合はLimitToLastを使うをご覧ください。

まとめ

ページネーションの実装をご紹介しました。今回開始点になるフィールドをcreateAtに指定しましたが、更新時刻でページネートしたい場合は、updateAtを指定することで実現できます。今回はバックエンド側での実装でしたが、firestoreを使えばフロントから直接ページネーションリクエストを実装できるのでぜひお試しください！

参考

クエリカーソルを使用したデータのページ設定