GRIDSOME query pagination - gridsome

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>