**記事タイトル:**
ページネーション
**記事本文(HTMLコンテンツ):**
GraphQLを使用すると、必要なフィールドのみを取得できます。これにより、ネットワークレスポンスを小さく高速に保つことができます。ただし、GraphQLは自動的に小さなレスポンスを保証するわけではありません。結果リストに多数の要素が含まれている場合、巨大なレスポンスを引き起こす可能性があります。このような状況では、ページネーションを行う必要があります。
当社のGraphQL APIは、カーソルベースのページネーションを実装しています。要素を横断するために使用される4つのパラメータがあります。
- after: 不透明なカーソルの後にページネート
- before: 不透明なカーソルの前にページネート
- first: 最初のx個の要素をページネート
- last: 最後のx個の要素をページネート
クエリでは、pageInfoとpageDataオブジェクトをリクエストでき、ページネーションに必要なすべてのデータが提供されます。以下は、デバイスレスポンスでページネーションを行う例です。指定されたカーソルの後の最初の要素をリクエストしています。
query{
devices (query : {},first:1,after:"YXJyYXljb25uZWN0aW9uOjQ=") {
page{
edges{
cursor,
node{
_id,
deviceName,
UUID,
pairingCode,
currentType,
currentAssetId,
currentPlaylistId,
localAppVersion,
},
},
pageInfo{
hasNextPage,
startCursor,
endCursor
}
},
pageData{
limit,
offset
}
}
}
前の記事 - チュートリアル:GraphQLを使用したスケジュールの作成とスケジュールアイテムの追加
次の記事 - エラー処理