反映 - Prismaを使い配信者一覧のページネーションを実現する

[OKAUEND]

Issue / Ticket

Trello - 配信者一覧ページでのスプレッドシートより取得している処理をPrismaに置換し、ページネーションを実装する Trello - ページネーションでは、２ページ目以降は別ページへ遷移 Trello - トータル件数から、ページネーション先の要素作成数を絞る

Why

ページネーションの機能を準備段階として作ってあったので、Prismaの機能を使い本格的に実装する TOPページや2ページ以降の配信者一覧は、条件抽出をしていないので表示速度を優先するためSSRで実現したいため アーカイブ一覧の方は無限スクロールで実装したため、こちらはページネーションを技術的に試してみたかった

What

PrismaのSkipとTakeを使い、次に取得する件数と開始インデックスをずらしていく。 2ページ以降はページ数をマイナス1し、一回に取得する件数を乗算することで、Skip数を算出する。 ページ数をマイナス1しないと、算出されたSkip数が多めに出てしまい、開始インデックスが飛んでしまうため。 (例:2(page) * 20(一回に取得する件数) = 40) トータル件数を渡すことで、何ページ目までのボタンを表示するかの判別も行う

Next Point

• ボタンの色味が暗いかもしれないので、白基調に変える検討もあり

変更画面のサンプル

参考資料

• Prisma - Pagination
• 参考にしたページネーションのボタンを表示する部分をロジック