gridsome - GRIDSOME 查询分页
问题描述
我正在尝试对 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
}
...
我错过了什么?
谢谢。
解决方案
你应该打开一个关于这个主题的 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
当你循环抛出这个集合时,输出很好(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>
推荐阅读
- mysql - 将 .IBD 文件导入 MySQL 服务器
- python - django-smart-selects 无法正常工作
- ios - “网络故障”(4/NSURLErrorDomain:-1202);“此服务器的证书无效
- javascript - 如何在 Ajax 中使用 Laravel 路由格式连接 url?
- android - 使用 AndroidStudio(版本 3.6.1)中缺少的 AndroidX 工件复选框,创建新项目时?
- c# - CreateLinkedTokenSource 返回的 CancellationTokenSource 是否需要处理
- dataset - 如何自动查找具有条件的数据集?
- php - Laravel 使用 ajax 请求在同一张桌子上返回父母的孩子?
- docker - 如果它们共享主机端口,如何将 docker 容器公开到互联网?
- docker - 多阶段构建中缺少 docker arg