本文へスキップ

ページネーション

概要​

ページネーションは、データセットから一度にすべてのデータを取得するのではなく、バラバラに分けて取得する方法です。 DeliveryTrackerではGraphQL Relay-style Connection Pagination方式を使用しています。

Relay-style Connection Paginationとは？​

Relay-style Paginationは、データを連結されたリストの形で提供します。 各アイテムは"node"で、接続されたリスト全体は"edges"と"pageInfo"の2つの部分で構成されています。

コンポーネント​

  • edges: 実際のデータ一覧です。 各アイテムは node と cursor で構成されます。
  • node: 実際のデータオブジェクトです。
  • cursor: 各 node の位置を表す一意の識別子です。
  • pageInfo：ページネーション情報を表し、 startCursor, endCursor, hasPreviousPage, hasNextPage などの情報を含みます。

例​

{
  carriers(first: 10) {
    edges {
      node {
        id
        name
      }
      cursor
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

上の例で carriers(first: 10) は最初の10個のアイテムを取得します。 各アイテムの id と name を取得し、 cursor でそのアイテムの位置を知ることができます。 pageInfoは次のページのデータがあるかどうか、最後の項目のcursor` を提供します。

クエリ因子​

Relay-style Paginationは次の引数を使用してページネーションを行います：

  • first: インポートするアイテムの数です。
  • after: 해당 cursor 以降のアイテムから取得します。
  • last：最後から取り込むアイテムの数です。
  • before: 해당 cursor 以前のアイテムまで取得します。

例えば、first: 10 と after: "someCursor" を組み合わせると、"someCursor"以下の10個のアイテムを取得します。

結論​

Relay-style Connection PaginationはGraphQLで効果的なページネーションのための標準です。 edges, node, cursor, pageInfo` の概念を理解すれば、簡単にデータを分割して取り込むことができます。