前回は、バックエンドでPostgresSQLからMongoDBへ乗り換えました。

今回は、バックエンドでページネーションを追加します。

ソースコードは、こちらです。

バックエンド:

例えば200件データがあるとして、最初の10件を表示します。 一番下まで画面を移動するとボタンがあり、クリックすることで次の10件を表示することができます。

まずはバックエンドで、データを送信する内容を調整します。

ページネーションが作動するか確認するため、booksのデータを追加しました。

image2

ページネーションを行うには、prismaのskipとtakeを使います。

skipは、最初のいくつかをスキップします。 例えばskipを『4』に設定すると、4件スキップされ、5件目のデータから取得されます。

takeは、いくつの件数を取得するかを指定できます。

例えば5件データを取得したい場合、takeを『5』に設定します。

また、skipを『3』、takeを『5』にすると、4件目のデータから5件データを取得することができます。

schema.tsを開いて、typeDefsQueryにあるbooksを修正します。

booksskiptakeを追加します。

どちらもInt型にしましょう。

books(isRead: Boolean, skip: Int, take: Int): [Book!]!

次にresolversフォルダのQuery.tsを開きます。

QuerybooksにGraphQLで指定したskiptakeを取得するようにします。

skiptakeはnumber型にします。

books: (
  _: any,
  { isRead, skip, take }: { isRead: boolean; skip: number; take: number },
  { prisma }: Context
) => {
  return prisma.book.findMany({
    where: {
      isRead,
    },
  });
},

findMany内に、skiptakeを指定しましょう。

books: (
  _: any,
  { isRead, skip, take }: { isRead: boolean; skip: number; take: number },
  { prisma }: Context
) => {
  return prisma.book.findMany({
    skip,
    take,
    where: {
      isRead,
    },
  });
},

では、Apollo Studioを開いて、動作確認します。

今現在のデータが6件あります。

image3

skipを『2』、takeを『3』と設定します。

query FilteredBooks{
  books(
    skip: 2 
    take: 3
    ) {
    title
    author
  }
}

image4

FilteredBooksボタンをクリックすると、

image5

3件目から5件目のデータを取得することができました。

ソースコードは、こちらです。

次回は、フロントエンドでページネーションを実装します。

ブログ一覧