Gatsby JS分类与标签页分页功能异常问题求助

核心问题分析 #

报错提示未提供$limit和$skip变量，本质是通过createPage创建的分类/标签页，没有在页面上下文（context）中传入分页所需的变量，同时模板的GraphQL查询也没有正确关联这些变量。而Gatsby Route API创建的页面会自动处理路由参数与查询变量的映射，所以能正常工作。

分步解决方案 #

1. 修正gatsby-node.js中的分页配置 #

确保在调用createPage时，通过gatsby-awesome-pagination的createPaginatedPages方法，正确为分类/标签页生成分页页面，并将分页变量传入页面上下文。

示例代码（假设你已获取分类列表和对应文章数）：

const { createPaginatedPages } = require('gatsby-awesome-pagination');

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  // 获取所有分类数据
  const categoryResult = await graphql(`
    query {
      allMarkRemark {
        group(field: frontmatter___category) {
          fieldValue
          totalCount
        }
      }
    }
  `);

  // 遍历每个分类，创建分页页面
  categoryResult.data.allMarkRemark.group.forEach(category => {
    const categoryName = category.fieldValue;
    const totalPosts = category.totalCount;
    const postsPerPage = 10; // 每页展示数量

    // 使用createPaginatedPages生成分页页面
    createPaginatedPages({
      edges: [], // 无需预取文章时传空数组，关键是传递context
      createPage,
      pageTemplate: '/src/templates/category.js', // 你的分类模板路径
      pageLength: postsPerPage,
      pathPrefix: `/category/${categoryName}`, // 分页路径前缀，比如/category/tech/2
      context: {
        category: categoryName,
        limit: postsPerPage,
      },
    });
  });
};

注：createPaginatedPages会自动为每个分页页面添加skip和currentPage到context中，配合你传入的limit，即可满足查询变量需求。

2. 修正分类模板的GraphQL查询 #

在分类模板中，必须声明$limit、$skip和$category变量，并在查询中使用这些变量过滤文章、实现分页。

示例模板代码（category.js）：

import React from 'react';
import { graphql } from 'gatsby';
import Pagination from '../components/Pagination';

export const query = graphql`
  query CategoryPosts($category: String!, $limit: Int!, $skip: Int!) {
    allMarkRemark(
      filter: { frontmatter: { category: { eq: $category } } }
      sort: { frontmatter: { date: DESC } }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          frontmatter {
            title
            date
          }
          slug
        }
      }
      totalCount
    }
  }
`;

const CategoryPage = ({ data, pageContext }) => {
  const posts = data.allMarkRemark.edges;
  const totalPosts = data.allMarkRemark.totalCount;
  const { currentPage, limit, category } = pageContext;

  return (
    <div>
      <h1>分类：{category}</h1>
      {posts.map(({ node }) => (
        <div key={node.slug}>
          <h2>{node.frontmatter.title}</h2>
          <p>{node.frontmatter.date}</p>
        </div>
      ))}
      <Pagination
        currentPage={currentPage}
        totalPages={Math.ceil(totalPosts / limit)}
        pathPrefix={`/category/${category}`}
      />
    </div>
  );
};

export default CategoryPage;

3. 确保分页组件正确传递参数 #

分页组件需要基于pathPrefix和currentPage生成正确的分页链接，确保点击后能跳转到对应的分页页面，传递正确的页码参数（gatsby-awesome-pagination会自动处理页码到skip的转换）。

示例分页组件代码：

import React from 'react';
import { Link } from 'gatsby';

const Pagination = ({ currentPage, totalPages, pathPrefix }) => {
  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);

  return (
    <div className="pagination">
      {currentPage > 1 && (
        <Link to={currentPage === 2 ? pathPrefix : `${pathPrefix}/${currentPage - 1}`}>
          上一页
        </Link>
      )}
      {pages.map(page => (
        <Link
          key={page}
          to={page === 1 ? pathPrefix : `${pathPrefix}/${page}`}
          className={page === currentPage ? 'active' : ''}
        >
          {page}
        </Link>
      ))}
      {currentPage < totalPages && (
        <Link to={`${pathPrefix}/${currentPage + 1}`}>
          下一页
        </Link>
      )}
    </div>
  );
};

export default Pagination;

4. 常见排查点 #

• 检查gatsby-node.js中createPaginatedPages的pathPrefix是否与分类页基础路径一致，避免路由冲突
• 确认模板的GraphQL查询中，变量名$limit、$skip与context中的变量名完全匹配（大小写敏感）
• 运行gatsby clean后重新构建，清除缓存的页面数据

内容的提问来源于stack exchange，提问作者Лео