Gridsomeでページャーを設置する方法

ページャーのクエリも自動生成されている

Gridsomeでは、データを取り込むと「all・・・」から始まる全検検索用のクエリが自動生成されますが、その中に検索に関するデータも一緒になってレスポンスする形になっています。

具体的には、

• totalCount
• pageInfo

が入っていて、抽出する条件に従って、動的に値を変更してくれます。

ページャー込みのクエリの書き方

Gridsomeでページャーを使う際のpage-queryは、

1. リクエストクエリの最後に「@paginate」を入れる
2. レスポンスクエリの中にedgesと並列でtotalCountやpageInfoを書く

という2点だけです。

タグの記事一覧ページの場合のサンプルは下記の感じです。

query Tags($id: ID!, $page: Int) {
  postList: allArticles(filter: {tags: {contains: [$id]}}, perPage: 60, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        title
        path
        category {
          id
          title
          path
        }
        summary
        images{
          src
        }
      }
    }
  }

}

基本的には、ページング処理はGridsomeが自動で生成するpageInfoに任せておけば、こちらでやることはほぼありません。

ページャーコンポーネントを使う

Gridsomeにはデフォルトでページャーコンポーネントが用意されているので、そちらを使うのがベストです。

<script>
import { Pager } from 'gridsome'

export default {
  name: 'allBlog',
  components: {
    Pager
  }
}
</script>

読み込んだPagerコンポーネントには、infoというpropsでデータを渡します。

<Pager :info="$page.postList.pageInfo" :linkClass="'pager__btn'" />

propsのオプションは、下記の公式ドキュメントにまとまっています。

Pager component | Gridsome

Gridsomeでページャーを設置する方法でした。

知ってしまえばかなり簡単に使えるようになっているので、一度試してみるのが良いかと思います。