如何在pageInfo gatsby graphql上使currentPage动态化？答案

【问题标题】：how to make currentPage dynamic on pageInfo gatsby graphql?如何在pageInfo gatsby graphql上使currentPage动态化？
【发布时间】：2021-09-09 13:00:12
【问题描述】：

美好的一天。我在前端使用 gatsby，在后端使用 strapi。我正在尝试制作一个带有简单分页的媒体库，以便为自定义组件选择图像。

我获取图像并使用此查询

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": {}
}

如果我删除 currentPage var 它可以工作，但我无法转到 currentPage:2 ，...+，这意味着我只能看到前 20 个。

我错过了什么？

感谢您的宝贵时间

【问题讨论】：

使用 playground 来检查 args ...使用 start: (currentPage - 1) * perPage ?
感谢您的回复，我应该在这里使用它吗：allStrapiMedia(limit: 20,currentPage:$currentPage): 我没有“开始”，只是限制、跳过和排序），
.......尝试跳过？

标签： reactjs pagination graphql gatsby

【解决方案1】：

您似乎没有在从页面创建到模板的特定循环中传递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 查询中提取的所有情况的 currentPage 值，包括边缘情况。

【讨论】：

嘿，谢谢你的回答，看看如何应用这个，我结束了前端分页。

【解决方案2】：

确保您从 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

过滤时请使用偏移量，即记录索引的起始索引

文章(start:$start, limit:$limit, sort:"published_at:desc")

参考：https://www.codinghub.net/article/pagination-integration-with-strapi-angular-and-graphql

【讨论】：

感谢您的回复，我只看到“开始”、限制、跳过和排序）