https://inside.dmm.com/entry/2021/12/14/pagination-use-swr-infinite
この記事は、DMMグループAdvent Calendar 2021の14日目の記事です。
こんにちは。DMMのプラットフォーム(以下PFと略称)事業本部所属の佐々木勝春と申します。
私が所属するチームでは現在「DMMポイントクラブ」というDMMのポイントを獲得したりチャージしたり、履歴の確認などができるアプリ(iOS/AndroidとWeb)を運営しております。私はこの両システムのサーバーサイドの開発とWeb版のフロントの開発を担当しております。
今回はこちらのWeb版ポイントクラブのポイント管理ページにあるポイント履歴一覧のページネーションを実装する際に工夫した点についてご紹介させていただきます。
前提として、まずWeb版ポイントクラブのシステム構成の概要について簡単に説明いたします。 フロントエンドの実装にUIライブラリであるReactを採用していて、 インフラ環境はAWSのCloudFrontとS3を活用してファイルを配信しています。
ユーザーのポイントの獲得・消費などのポイント使用履歴一覧や保有しているポイントの有効期限の一覧を、下記のポイント利用情報のセクションで表示します。ポイントの履歴を複数表示するためにページネーションを活用しています。
ポイント利用情報のデザイン原案
ここで具体的なシステム構成について見ていきます。 上記ポイント履歴情報を取得するにあたって、ブラウザ側でポイントクラブチームで開発したバックエンドのAPIにリクエストして情報を取得し、その結果を表示に利用しています。 ポイントクラブAPI内部ではDMMのPFをはじめとする各マイクロサービスにリクエストを行なうことでデータのやり取りを行なっています。その一つであるDMMポイントに関する機能を提供するポイントAPIにリクエストを行いポイント情報履歴を取得して、それをポイントクラブAPIでクライアント側に適切な形式に加工してあげて返却する構成になっています。
システム構成概念図(システムのグルーピングや認証ゲートウェイなどは省略)
上述の外部サービスのポイントAPIの利用にあたって一つの課題となったのがポイントの履歴の取得件数が最大で50件までという制限でした。 上述のWeb版のポイント履歴のデザインの原案としてはページネーションのページのあるページ数分(今回は4ページ分)ページを表示して、それ以上のページデータを保有している場合は三点リーダで省略表示した後最後のページの数を表示するようなデザイン案でした。
しかし、最大取得件数の制限より上記デザイン原案の最大ページ数の表示の実現が困難になりました。
