Пагинация запросов 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
      }
...

Что мне не хватает?

Спасибо.


gridsome
person ERIC    schedule 05.02.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам следует открыть выпуск 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>
person Ezra Siton    schedule 08.02.2020
comment
Спасибо, вы правы. Как вы сказали, он работает с компонентом страницы, но на площадке openGraph отображается только 1 страница. - person ERIC; 12.02.2020
comment
Я сделал для этого билет, так как тоже сталкиваюсь с этой проблемой github.com/gridsome/gridsome/issues / 1198 - person Eddie; 29.05.2020