Blog

GraphQLのページネーション機能を実装する方法: Apollo client + express-graphql

Offset-basedのページネーションに対応したGraphQL APIの実装方法と、Apollo clientによるPagenation処理の実装方法を紹介します。

 

ページネーションとは

ページネーションは、APIでデータベースから大量のデータを取得する際に、一度に取得する範囲を設定して段階的にデータを取得することで、サーバーへの負荷を軽減できる手法のことです。

GraphQLでのページネーション

GraphQLでの代表的なページネーションは以下の2つがあります。
1. Offset-basedページネーション
2. Cursor-basedページネーション
Offset-basedのページネーションは、「何件目から何件目まで」というように指定してデータを取得しようとします。直感的にわかりやすく実装しやすいメリットがあります。
Cursor-basedは、取得済みのデータにIDを付けておき、そのIDをもとにして、まだ取得できていないデータを取得しようとします。
データの件数が定まっていない場合に有用ですが、実装が複雑になるデメリットがあります。
ここでは、GraphQLでOffset-basedページネーションを実装する方法を紹介します。
実装は、バックエンドについては、Express.js(Typescript)で、フロント側は、任意のJavsScriptフレームとします。

バックエンド側でGraphQL対応のAPIを用意する

webアプリケーションの作成

nodejsのwebアプリケーションフレームワークとして、expressを使い、graphqlのリクエストを処理するためのミドルウェアとしてexpress-graphqlを使います。
必要なライブラリのインストールには、npm install graphql express express-graphql --saveとします。
以下の通り、APIサーバーとして、Expres.jsでwebアプリを作成します。

graphQLのschema作成

以下のようなschemaを作成します。
listUsersに対応したクエリでusersのデータを取得します。
offset-basedのページネイションに対応させるために、引数にoffsetとlimitをつけています。
これで一度に取得するデータを制限します。

 

resolverの作成

上記のschemaに対応したresolverを作成します。
モックデータを返すだけの単純なAPIです。
limitとoffsetがデータを切り出すために使われているのが一目瞭然なのが、offset-basedのメリットです。

モックデータには以下のようなものを用意します。

 

これだけで、バックエンド側の仕組みは完成です。
以下のようなクエリで、範囲を制限してデータを取得できます。

 

結果は次のようになり、たしかに、範囲が制限されているのを確認できます。

 

 Apollo clientによるPagenation処理の実装

 

ここからフロント側の実装を紹介します。
Apolloの公式ドキュメントや各種の既存の記事では、主にReactでの実装が紹介されています。
この記事では、apollo/client/coreライブラリを使うことで、フロントのフレームワークを問わないページネイション処理の方法を示します。
ApolloClientの設定に関するコードは以下のとおりです。

 

このobservableQueryをフロント側で繰り返し使用して、制限した範囲のデータをキャッシュすることができます。

この例では、1~3件目のデータのみを取得しています。フロント側では、この3件のデータしか持っていません。

さらに、3件のデータをリクエストしました。すると、observableQuery.getCurrentResult()によって、合計の6件のデータを得たことになります。
これらをフロント側で保存しておけるので必要に応じて画面に表示できます。
以上のように、段階的に繰り返してデータを取得し、取得済みのデータをフロントで保持することが可能になります。

まとめ

Offset-basedのページネーションの実装方法を紹介しました。
サーバー側での実装と、フロント側での実装を両方紹介しましたので、すぐにでも試してみることができると思います。
特定のフレームワークに依拠しないpagination実装は、公式ドキュメントでわかりやすく書かれていないので、この記事が苦労しているエンジニアの助けになれば幸いです。

Author Profile

越境ECの最新情報

越境EC関連の記事

月から探す

ページTOPへ