GRIDSOME 查询分页

Question

我正在尝试对 Gridsome 上的查询进行分页。

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

我得到的答案是显示我的前 10 个帖子，但它显示总页数为 1。

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

我错过了什么？

谢谢。

Answer 1

你应该打开一个关于这个主题的 Github 问题。 https://github.com/gridsome/gridsome/issues

示例（7 个帖子）

看起来输出是 "correct" 只有 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 我也测试了这个想法 - 在 openGraph playground 下，值总是 1

如果你应用 Query Variables 输出是正确的：

And 当你循环抛出这个集合时输出很好（7 项目 - 每页 3 = 3 pages) + 一切正常（页码和箭头可点击）：

代码

<!-- 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>

GRIDSOME 查询分页

GRIDSOME query pagination

gridsome

示例（7 个帖子）