我想在 gatsby 和 Strapi 中创建一个分页，但我失败得很惨

Question

这是我的 njoftime.js 文件，位于我的 Gatsby 网站的 src/pages/njoftime.js 中

import React from "react";
import { graphql, Link } from "gatsby";
import Header from "../components/header";
import Footer from "../components/footer";
import * as styles from "../styles/lajme.module.css";

const Njoftime = ({ data, pageContext }) => {
  const { currentPage, numPages } = pageContext;
  const isFirst = currentPage === 1;
  const isLast = currentPage === numPages;
  const prevPage = currentPage - 1 === 1 ? "/njoftime" : `/njoftime/${currentPage - 1}`;
  const nextPage = `/njoftime/${currentPage + 1}`;

  const articles = data.strapi.newsArticles.data;

  return (
    <div>
      <Header />
      <div className={styles.lajmeContainer}>
        <h2 className={styles.lajmeTitle}>Njoftime</h2>
        <div className={styles.lajmeArticles}>
          {articles.map((article, index) => (
            <div key={index} className={styles.lajmeArticle}>
              <Link to={`/lajme/${article.attributes.slug}`} className={styles.lajmeArticleLink}>
                <div className={styles.lajmeArticleImageWrapper}>
                  <img src={`http://52.91.185.238:1337${article.attributes.Cover.data.attributes.url}`} alt={article.attributes.title} className={styles.lajmeArticleImage} />
                </div>
                <div className={styles.lajmeArticleContent}>
                  <h3 className={styles.lajmeArticleTitle}>{article.attributes.title}</h3>
                  <p className={styles.lajmeArticleDescription}>{article.attributes.Description}</p>
                  <p className={styles.lajmeArticleDate}>
                    Published on: <time>{article.attributes.PublishDate}</time>
                  </p>
                </div>
              </Link>
            </div>
          ))}
        </div>
        <div className={styles.pagination}>
          {!isFirst && (
            <Link to={prevPage} rel="prev">
              ← Previous Page
            </Link>
          )}
          {Array.from({ length: numPages }, (_, i) => (
            <Link key={`pagination-number${i + 1}`} to={`/njoftime/${i === 0 ? "" : i + 1}`}>
              {i + 1}
            </Link>
          ))}
          {!isLast && (
            <Link to={nextPage} rel="next">
              Next Page →
            </Link>
          )}
        </div>
      </div>
      <Footer />
    </div>
  );
};

export const query = graphql`
  query($skip: Int!, $limit: Int!) {
    strapi {
      newsArticles(sort: "PublishDate:desc", _start: $skip, _limit: $limit) {
        data {
          attributes {
            title
            Description
            PublishDate
            slug
            Cover {
              data {
                attributes {
                  url
                }
              }
            }
          }
        }
      }
    }
  }
`;


export default Njoftime;

这是我的 gatsby-node.js

const path = require("path");

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

  // Fetch all news articles
  const newsArticlesResult = await graphql(`
    {
      strapi {
        newsArticles {
          data {
            attributes {
              slug
            }
          }
        }
      }
    }
  `);

  if (newsArticlesResult.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`);
    return;
  }

  // Create individual news article pages
  newsArticlesResult.data.strapi.newsArticles.data.forEach(({ attributes }) => {
    createPage({
      path: `/lajme/${attributes.slug}`,
      component: path.resolve(`src/templates/article.js`),
      context: {
        slug: attributes.slug,
      },
    });
  });

  // Pagination for njoftime
  const articles = newsArticlesResult.data.strapi.newsArticles.data;
  const articlesPerPage = 10; // Adjust based on your preference
  const numPages = Math.ceil(articles.length / articlesPerPage);

  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/njoftime` : `/njoftime/${i + 1}`,
      component: path.resolve("src/pages/njoftime.js"), // Ensure this path points to your njoftime template
      context: {
        limit: articlesPerPage,
        skip: i * articlesPerPage,
        numPages,
        currentPage: i + 1,
      },
    });
  });
};

我想为我的 njoftime.js 创建一个分页逻辑，并且我继续浏览 Strapi 文档，但我仍然不断收到此错误：

我期望有一个分页逻辑，但是我得到了这些错误，我不知道该怎么办，因为 Strapi 文档和 chatgpt v4 建议对我尝试过的问题使用相同的解决方案，但它不起作用。

Answer 1

您正在查询 gatsby 的 graphql 实例，而不是 Strapi 的 API。盖茨比的基本流程是

1. 从某处获取数据并创建 graphql 节点 - Strapi 在您的情况下
2. 查询graphql
3. 在页面模板中使用查询到的数据

因此，所有 graphql 查询都针对本地 graphql 实例，而不是针对 Strapi API。请参阅 gatbys documentation 了解 gatsby 中的分页实现。