Cannot create pagination with latest Gatsby and Strapi. #38873
Unanswered
PetroTafilaj
asked this question in
Help
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
This is my njoftime.js file, located in src/pages/njoftime.js in my Gatsby Website
`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 (
Njoftime
{articles.map((article, index) => (
<Link to={
/lajme/${article.attributes.slug}
} className={styles.lajmeArticleLink}><img src={
http://52.91.185.238:1337${article.attributes.Cover.data.attributes.url}
} alt={article.attributes.title} className={styles.lajmeArticleImage} />{article.attributes.title}
{article.attributes.Description}
Published on: {article.attributes.PublishDate}
))}
{!isFirst && (
← Previous Page
)}
{Array.from({ length: numPages }, (_, i) => (
<Link key={
pagination-number${i + 1}
} to={/njoftime/${i === 0 ? "" : i + 1}
}>{i + 1}
))}
{!isLast && (
Next Page →
)}
);
};
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;`
This is my 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,
},
});
});
};`
I want to create a pagination logic for my njoftime.js and i keep going through the strapi documentation, but i still keep getting this error: Error when running my gatsby website
I expect a pagination logic, but instead i get these errors that i do not know what to do with since the strapi documentation and chatgpt v4 are suggesting the same solution to the problem which i have tried and it doesn't work.
Beta Was this translation helpful? Give feedback.
All reactions