GRIDSOME query pagination

Question

I am trying to paginate a query on Gridsome.

query Posts ($page: Int) {
  posts: allPost (perPage: 10, page: $page) @paginate {
    totalCount
    pageInfo {
      totalPages
      currentPage
      totalItems
      isFirst
      isLast
    }
    edges {
      node {
        title
      }
    }
  }
}

The answer I am getting is showing my first 10 posts but it is showing totalPages as 1.

"data": {
    "posts": {
      "totalCount": 1333,
      "pageInfo": {
        "totalPages": 1,
        "currentPage": 1,
        "totalItems": 10,
        "isFirst": true,
        "isLast": true
      }
...

What am I missing?

Thanks.

Answer 1

You should open a Github issue about this topic. https://github.com/gridsome/gridsome/issues

Example (7 posts)

Looks like the output is "correct" only by static query:

{
  allPost (perPage: 2, page: 3){
    pageInfo {
      totalPages
      currentPage
    }
    edges{
      node{
        title
      }
    }
  }
}

Returns:

{
  "data": {
    "allPost": {
      "pageInfo": {
        "totalPages": 4,
        "currentPage": 3
      },
      "edges": [
        {
          "node": {
            "title": "Portal"
          }
        },
        {
          "node": {
            "title": "Dev Landing Page"
          }
        }
      ]
    }
  }
}

page-query I also test this idea - under openGraph playground the value is always 1

If you apply Query Variables the output is correct:

And when you loop throws this collection the output is fine (7 items - 3 per page = 3 pages) + everything works as it should (The pagination numbers and arrows are clickable):

Code

<!-- src/pages/test.vue -->
<template>
  <Layout>
    <ul>
     <li v-for="edge in $page.posts.edges" :key="edge.node.id">
       {{ edge.node.title }}
     </li>
   </ul>
   <Pager :info="$page.posts.pageInfo"/>

  </Layout>
</template>

<script>
import { Pager } from 'gridsome'

export default {
  components: {
    Pager
  }
}
</script>

<page-query>
  query Posts ($page: Int) {
    posts: allPost (perPage: 3, page: $page) @paginate {
      totalCount
        pageInfo {
          totalPages
          currentPage
      }
      edges {
        node {
          title
        }
      }
    }
  }
</page-query>