GraphQLのページネーション

はじめに

• GraphQLのページネーションは利用方法は1つ目はオフセットスタイル、2つ目はカーソルスタイルがある。

Offset Pagination

• 下記の例は11番目から10件のデータを取得する例になります

query {
  posts(limit: 10, offset: 10) {
    title,
    content
  }
}

Cursor pagination

• データテーブルの特定のレコードへのポインターを設定する。
• カーソルが一意で順次的である必要がある。

query {
  posts(limit: 10, publisherId: 1, cursor: 1) {
    title,
    content
  }
}

Relay-style cursor pagination

• githubでも利用されている
• facebookが考案したもの

relay.dev

用語

Connection Types

• GraphQL仕様の「タイプシステム」セクションで定義されている「オブジェクト」である必要がある

Fileds

• edgesおよびpageInfoという名前のフィールドがある。スキーマ設計者が適切と考えるように、接続に関連する追加のフィールドがある場合がある。

Edge Types

• 「Connection Types」には、エッジと呼ばれるフィールドが含まれている。このフィールドは、エッジタイプをラップするリストタイプを返す必要がある。エッジタイプの要件は、以下の「エッジタイプ」セクションで定義されています。

Node

-「Edge Types」には、ノードと呼ばれるフィールドが含まれている必要がある。このフィールドは、スカラー、列挙型、オブジェクト、インターフェイス、ユニオン、またはこれらの型のいずれかの非nullラッパーを返す必要がある。

Cursor

「Edge Types」には、カーソルと呼ばれるフィールドが含まれている必要がある。データの位置情報である

その他の属性 - startCursor：　connectionの最初のedgeの情報 - endCursor：　connectionの最後のedgeの情報 - hasPreviousPage: 前のページがあるかないか - hasNextPage: 次のページがあるかないか

サンプルクエリ

query searchRepositories($first: Int, $after: String, $last: Int, $before: String, $query: String!) {
  search(first: $first, after: $after, last: $last, before: $before, query: $query, type: REPOSITORY) {
    repositoryCount
    edges{
      cursor
      node{
        ... on Repository{
          id
          name
          url
        }
      }
    }
    pageInfo {
      endCursor
      hasNextPage
      hasPreviousPage
      startCursor
    } 
  }
}

実行結果

{
  "first": 5,
  "after": null,
  "last": null,
  "before": null,
  "query":  "Rails"
}

まとめ

下記のページにわかりやすい図があるのでイメージがわかりやすいです。 qiita.com