Pagination

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を使用したスケジュールの作成とスケジュールアイテムの追加

次の記事 - エラー処理