#えむけーろぐ

テキトーなことしか書いてません

Cursor-basedなページネーションをやめてpage-basedなページネーションに

先日作り直したPodcastのWebサイト。

blog.m6a.jp

GraphQL APIのepisodes一覧のfield(言い回しが正しいのか自信なし)を、Cursor-basedなページネーションで実装してしまったせいでPrev / Nextなページネーションしか出来ず使いにくくなっていた。

f:id:mktakuyax:20210506133429g:plain

Cursor-basedなページネーションで使いにくい様子(前・次の移動しかできない)

これを、Page-based(前のブログではOffset-basedと言っていたが、同じ意味)に作り変えた。

こんな感じ。

f:id:mktakuyax:20210516231829g:plain

Page-basedなページネーションができるようになった。(前・次だけでなく、ページ番号指定で移動できる)

これで少しは使いやすくなったはず。……なのだけど、本番のデータでやってみると、横幅がオーバーしてしまっていたり、スマホだともう崩壊していたり。

f:id:mktakuyax:20210516232136p:plain

f:id:mktakuyax:20210516232238p:plain

開発環境だけでなく、本番同様のデータでテストする重要性を噛み締めた出来事であった。

 

ちなみにgraphql-rubyでいい感じにpage-basedなページネーションをやるのに、graphql-paginationというgemがあったのでそれを使った。メンテされているかどうか判断するのに微妙なラインだったけど、最悪自分で実装できそうだったので一旦採用してみることにした。

github.com