как сделать текущую страницу динамичной на pageInfo gatsby graphql?

ProgramBox

как сделать текущую страницу динамичной на pageInfo gatsby graphql?

Post author:admin
Запись опубликована:17 января, 2022
Post category:Вопросы по программированию

#reactjs #pagination #graphql #gatsby

Вопрос:

хороший день. Я использую Гэтсби спереди и страпи в качестве бэкенда. Я пытаюсь создать медиа-галерею с простой разбиением на страницы для выбора изображений для пользовательского компонента.

Я получаю изображения и использую этот запрос

 query MyQuery($currentPage: Int!) {
  allStrapiMedia(limit: 20,currentPage:$currentPage ) {
    edges {
      node {
        name
      }
    }
    pageInfo {
      itemCount
      hasNextPage
      pageCount
      currentPage
      perPage
      totalCount
      hasPreviousPage
    }
  }
}

но я получаю эту ошибку:

 {
  "errors": [
    {
      "message": "Unknown argument "currentPage" on field "Query.allStrapiMedia".",
      "locations": [
        {
          "line": 2,
          "column": 28
        }
      ],
      "stack": [
        "GraphQLError: Unknown argument "currentPage" on field "Query.allStrapiMedia".",
        "    at Object.Argument (/Users/alexeigarban/Documents/projects/platformable/platformablecodegenerator copy/node_modules/graphql/validation/rules/KnownArgumentNamesRule.js:46:29)",
        "    at Object.enter (/Users/alexeigarban/Documents/projects/platformable/platformablecodegenerator copy/node_modules/graphql/language/visitor.js:323:29)",
        "    at Object.enter (/Users/alexeigarban/Documents/projects/platformable/platformablecodegenerator copy/node_modules/graphql/utilities/TypeInfo.js:370:25)",
        "    at visit (/Users/alexeigarban/Documents/projects/platformable/platformablecodegenerator copy/node_modules/graphql/language/visitor.js:243:26)",
        "    at validate (/Users/alexeigarban/Documents/projects/platformable/platformablecodegenerator copy/node_modules/graphql/validation/validate.js:69:24)",
        "    at /Users/alexeigarban/Documents/projects/platformable/platformablecodegenerator copy/node_modules/express-graphql/index.js:121:32",
        "    at processTicksAndRejections (internal/process/task_queues.js:95:5)"
      ]
    }
  ],
  "extensions": {}
}

если я удалю параметр текущей страницы, он будет работать, но я не смогу перейти на текущую страницу:2,… , это означает, что я могу видеть только первые 20.

Что я упускаю?

спасибо, что уделили мне время

1. используйте игровую площадку для проверки аргументов … использовать start: (currentPage - 1) * perPage ?

2. спасибо за ваш ответ, должен ли я использовать это здесь :allStrapiMedia(ограничение: 20,текущая страница:$Текущая страница ): у меня нет «начать», просто ограничьте, пропустите и отсортируйте),

3. ……. попробуй пропустить ?

Ответ №1:

Убедитесь, что вы передаете необходимые аргументы от клиента apollo

экс.

 this.queryArticles = this.apollo
      .watchQuery({
        query: ARTICLES_QUERY,
        variables: {
          start: start,
          limit: this.limit
        }
      })
      .valueChanges.subscribe(result => {
        this.data = result.data;
        this.articles = this.data.articles;
        this.loading = result.loading;
        this.errors = result.errors;
      });
  }

Ссылка: https://www.codinghub.net/article/pagination-integration-with-strapi-angular-and-graphql

При фильтрации, пожалуйста, используйте смещение, т. е. начальный индекс для индекса записи

статьи(начало:$начало, ограничение:$ограничение, сортировка:»опубликовано_ат:описание»)

Ссылка: https://www.codinghub.net/article/pagination-integration-with-strapi-angular-and-graphql

Ответ №2:

Похоже, что вы не передаете currentPage значение в определенном цикле (возможно, в крайних случаях, первом или последнем) от создания страницы к шаблонам. Кроме того, вы не используете это значение для фильтрации запроса allStrapiMedia .

В вашем gatsby-node.js файле вы должны получить currentPage , но эта информация отсутствует в вопросе.

Предполагая подход с уценкой:

 const path = require("path")
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const queryResults = await graphql(`
    query allPages{
      allPages {
        nodes {
          id
          currentPage
        }
      }
    }
  `)
  const productTemplate = path.resolve(`src/templates/product.js`)
  queryResults.data.allPages.nodes.forEach(node => {
    createPage({
      path: `/page/${node.id}`,
      component: pageTemplate,
      context: {
        currentPage: currentPage
      },
    })
  })
}

Примечание: настройте его, чтобы адаптировать к вашей среде Strapi, но поймите идею.

Идея состоит в том, чтобы передать через контекст значение текущей страницы, извлеченное из запроса GraphQL, для всех случаев, включая крайние случаи.