gridsome - 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 个帖子，但它显示 totalPages 为 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 个帖子）

看起来输出仅通过以下方式“正确” static query：

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

回报：

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

page-query我也测试了这个想法——在openGraph 操场下，价值总是1

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

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

代码

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