MSWでページングに対応するレスポンスを返す

mswというmock libraryに対して、ページサイズ、現在のページ（current page）を渡したら、それに対するレスポンスを返すやり方についてです。

今回は、リストが40件あって、ページサイズが10で、１ページ目、２ページ目を取得するようなレスポンスを返す例です。

コード

コードは下記にあります。
https://github.com/ksakae1216/angular2022/blob/bbb5331606fdd8d89dd1c37e4a301e8937a8fc55/apps/myorg/src/mocks/list/list-api.ts

クエリパラメータを取得

  rest.get(`*/api/list`, async (req, res, ctx) => {
    const pageSize = req.url.searchParams.get('pageSize');
    const currentPage = req.url.searchParams.get('currentPage');

/api/list?pageSize=5&currentPage=1のようなリクエストを受け取ったら、上記のコードでクエリパラメータを取得できます。

ページングに対応するレスポンスを返す

    if (pageSize && currentPage) {
      ret.list = response.slice(
        (Number(currentPage) - 1) * Number(pageSize),
        Number(currentPage) * Number(pageSize)
      );
    } else {
      ret.list = response;
    }

こちらのコードです。

pageSizeとcurrentPageがある場合、response.sliceで指定されたデータを返してます。
もし、pageSizeとcurrentPageが無い場合、全てのデータを返します。

イメージ

※この画面のリポジトリは下記です。
https://github.com/ksakae1216/angular2022
nx serveで起動後、test1,Password1でログインできます。