no i dont want limit my rest api per 100 post on one page | Astro Lounge | Page 1

vivid goblet Apr 3, 2025, 3:56 PM

#

if i have 1000 posts how it display them all
i have totalposts=1000 and want create [page].astro for all pages=totalposts/6
export async function getStaticPaths({ paginate }) {
return paginate(totalPosts, { pageSize: postPerPage });
}

lunar cometBOT Apr 3, 2025, 3:56 PM

#

Hi @vivid goblet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

I understand you want to display all your posts across multiple pages using Astro's pagination feature. Let me help you with the correct approach.

When using Astro's pagination, you need to provide an array of actual data items to the paginate() function, not just a count. The function will then automatically create the appropriate number of pages based on your pageSize.

Here's how you can properly implement pagination for your 1000 posts with 6 posts per page:

---
export async function getStaticPaths({ paginate }) {
  // Fetch all your posts data
  const allPosts = await fetchAllYourPosts(); // Replace with your actual data fetching method
  
  // Return paginated routes
  return paginate(allPosts, { pageSize: 6 });
}

// The page data is available as a prop
const { page } = Astro.props;
---

<!-- Display your posts -->
<h1>Page {page.currentPage} of {page.lastPage}</h1>
<ul>
  {page.data.map((post) => (
    <li><a href={post.url}>{post.title}</a></li>
  ))}
</ul>

<!-- Navigation -->
{page.url.prev ? <a href={page.url.prev}>Previous</a> : null}
{page.url.next ? <a href={page.url.next}>Next</a> : null}

This will automatically generate approximately 167 pages (1000÷6, rounded up) with 6 posts per page. The paginate() function handles all the math and page creation for you, so you don't need to manually calculate the number of pages.

If you're fetching posts from an API that has its own pagination, you might need to make multiple requests to get all 1000 posts before passing them to paginate().

For more details on pagination in Astro, you can refer to the Pagination documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vivid goblet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vivid goblet Apr 3, 2025, 4:15 PM

#

@ no i want request to my api inside getStaticPaths, like const response = await fetch(${apiUrl}/blog/?per_page=${postPerPage}&page=${page}&acf_format=standard&_fields=slug,title,date,acf); and want send new request when click next in pugination button

#

@lunar comet no i want request to my api inside getStaticPaths, like const response = await fetch(${apiUrl}/blog/?per_page=${postPerPage}&page=${page}&acf_format=standard&_fields=slug,title,date,acf); and want send new request when click next in pugination button

lunar cometBOT Apr 3, 2025, 4:16 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

I understand you want to fetch data from your API inside getStaticPaths and handle pagination with new API requests when users click "next". However, there's an important distinction to make about how Astro's pagination works.

In Astro's static site generation (the default mode), all pages are generated at build time. This means that getStaticPaths runs once during build, not when a user clicks a pagination button. Let me explain the correct approach:

For Static Site Generation

When using getStaticPaths with paginate(), you need to fetch all your data upfront:

---
export async function getStaticPaths({ paginate }) {
  // Fetch all posts at build time
  const allPosts = [];
  let page = 1;
  let hasMorePosts = true;
  
  // Fetch all pages of data
  while (hasMorePosts) {
    const response = await fetch(`${apiUrl}/blog/?per_page=${postPerPage}&page=${page}&acf_format=standard&_fields=slug,title,date,acf`);
    const posts = await response.json();
    
    if (posts.length === 0) {
      hasMorePosts = false;
    } else {
      allPosts.push(...posts);
      page++;
    }
  }
  
  // Return paginated routes
  return paginate(allPosts, { pageSize: postPerPage });
}

const { page } = Astro.props;
---

This approach fetches all posts during build and creates static pages. The pagination links will navigate between these pre-built pages.

For Server-Side Rendering (SSR)

If you want to fetch new data when a user clicks pagination buttons, you need to use On-Demand Rendering:

---
// In SSR mode
export const prerender = false;

// Get the current page from the URL
const { page } = Astro.params;
const currentPage = page ? parseInt(page) : 1;

#

// Fetch only the data for this page
const response = await fetch(${apiUrl}/blog/?per_page=${postPerPage}&page=${currentPage}&acf_format=standard&_fields=slug,title,date,acf);
const posts = await response.json();

// You'll need to also fetch total count for pagination
const totalPosts = parseInt(response.headers.get('X-WP-Total') || '0');
const totalPages = Math.ceil(totalPosts / postPerPage);

// Calculate pagination URLs
const nextPage = currentPage < totalPages ? `/blog/${currentPage + 1}` : undefined;
const prevPage = currentPage > 1 ? `/blog/${currentPage - 1}` : undefined;


This approach makes a new API request each time the page loads, which is what happens when users click pagination links.

For more information on these approaches, check out:
- [Pagination in Astro](<https://docs.astro.build/en/guides/routing/#pagination>)
- [Dynamic Routes](<https://docs.astro.build/en/guides/routing/#dynamic-routes>)
- [On-Demand Rendering](<https://docs.astro.build/en/guides/on-demand-rendering/>)

Would you like me to elaborate on either of these approaches?
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#

@vivid goblet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vivid goblet Apr 3, 2025, 4:21 PM

#

@lunar comet allPosts.push(...posts); Found non-callable @@iterator

lunar cometBOT Apr 3, 2025, 4:21 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

I see you're encountering an error message "Found non-callable @@iterator" when trying to use allPosts.push(...posts) in your Astro project. This error typically occurs when you're trying to use the spread operator (...) on an object that isn't iterable.

This likely means that the response from your API isn't returning an array as expected. Instead, it might be returning an object with your posts nested inside it.

Here's how you can fix this issue:

First, check the structure of your API response by logging it:

const response = await fetch(`${apiUrl}/blog/?per_page=${postPerPage}&page=${page}&acf_format=standard&_fields=slug,title,date,acf`);
const data = await response.json();
console.log(data); // Check the structure

Then modify your code based on the actual structure. If your posts are in a property of the response (common in REST APIs), you might need to do something like:

// If posts are in a 'data' property
const posts = data.data; // or data.posts, data.items, etc.
allPosts.push(...posts);

// Or if the API doesn't return an array at all, you might need to do:
if (Array.isArray(posts)) {
  allPosts.push(...posts);
} else if (posts) {
  // Handle the case where posts is an object with values you want
  allPosts.push(posts);
}

Alternatively, if you're using pagination with Astro's getStaticPaths, you might want to restructure your approach:

#

export async function getStaticPaths({ paginate }) {
  // Fetch first page to get total
  const response = await fetch(`${apiUrl}/blog/?per_page=${postPerPage}&page=1&acf_format=standard&_fields=slug,title,date,acf`);
  const firstPageData = await response.json();
  
  // Get total pages from headers or response data
  const totalPages = /* extract from response */;
  
  // Create an array of page numbers
  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
  
  // Return paginated paths with page numbers as props
  return pages.map(pageNum => ({
    params: { page: String(pageNum) },
    props: { pageNum }
  }));
}

// Then in your page component:
const { pageNum } = Astro.props;
const response = await fetch(`${apiUrl}/blog/?per_page=${postPerPage}&page=${pageNum}&acf_format=standard&_fields=slug,title,date,acf`);
const data = await response.json();
const posts = /* extract posts array from data */;

This approach fetches data for each page individually rather than trying to collect all posts at once, which might be more efficient for large datasets.

For more information on working with pagination in Astro, you can refer to the Pagination documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vivid goblet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vivid goblet Apr 3, 2025, 4:48 PM

#

@lunar comet create pagination where current page have class active

const { slug, allPosts, count } = Astro.props;
const num = Math.floor(allPosts / count);

{
num >= 2 && (
<div
class="pagination animate__animated animate__fadeIn"
style={animation-delay: ${1}s}
>
<span class="active">1</span>

        <a href={`/${slug}/2`}>2</a>

        {num >= 3 && <a href={`/${slug}/3`}>3</a>}

        <a href={`/${slug}/2`}>Next</a>

        <a href={`/${slug}/${num}`}>Last</a>
    </div>
)

}

lunar cometBOT Apr 3, 2025, 4:48 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

I see you're working on creating pagination in Astro where the current page has an "active" class. Let me help you improve your pagination component to handle the current page correctly.

Here's how you can modify your code to add the "active" class to the current page:

---
const { slug, allPosts, count, currentPage = 1 } = Astro.props;
const totalPages = Math.ceil(allPosts / count);
const currentPageNum = Number(currentPage);
---

{
    totalPages >= 2 && (
        <div
            class="pagination animate__animated animate__fadeIn"
            style={`animation-delay: ${1}s`}
        >
            <a href={`/${slug}`} class={currentPageNum === 1 ? "active" : ""}>
                1
            </a>

            <a 
                href={`/${slug}/2`} 
                class={currentPageNum === 2 ? "active" : ""}
            >
                2
            </a>

            {totalPages >= 3 && 
                <a 
                    href={`/${slug}/3`} 
                    class={currentPageNum === 3 ? "active" : ""}
                >
                    3
                </a>
            }

            {currentPageNum < totalPages && 
                <a href={`/${slug}/${currentPageNum + 1}`}>Next</a>
            }

            {currentPageNum < totalPages && 
                <a href={`/${slug}/${totalPages}`}>Last</a>
            }
        </div>
    )
}

Key improvements:

Added a currentPage prop with a default value of 1
Changed num to totalPages and used Math.ceil() instead of Math.floor() to ensure all posts are covered
Added conditional class assignment using the ternary operator to apply the "active" class
Made the "Next" and "Last" buttons only appear when not on the last page

#

For a more comprehensive pagination component that can handle a larger number of pages, you might want to look at Astro's built-in pagination features as described in the Pagination documentation. The page object provided by Astro's pagination includes useful properties like currentPage, lastPage, and URLs for navigation.

You can also check out community integrations like @philnash/astro-pagination for more advanced pagination components.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vivid goblet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vivid goblet Apr 3, 2025, 6:48 PM

#

@lunar comet 21:47:08 [200] /blog/blog-12 67ms
21:47:21 [WARN] [router] A getStaticPaths() route pattern was matched, but no matching static path was found for requested path /blog/blog-10.

lunar cometBOT Apr 3, 2025, 6:48 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

I see you're encountering a warning message about a missing static path for /blog/blog-10 in your Astro project. This warning occurs when you have a dynamic route with getStaticPaths(), but the specific path being requested wasn't included in the paths generated at build time.

Why this happens

When using getStaticPaths() in a dynamic route file (like [slug].astro), Astro generates only the specific paths you return from that function at build time. If a user tries to access a path that wasn't included in your getStaticPaths() return value, you'll see this warning.

How to fix it

Here are a few ways to resolve this issue:

Make sure all needed paths are included in your getStaticPaths():

export async function getStaticPaths() {
  // Make sure 'blog-10' is included in your returned paths
  return [
    { params: { slug: 'blog-1' } },
    { params: { slug: 'blog-10' } }, // Add this if it was missing
    { params: { slug: 'blog-12' } },
    // ...other paths
  ];
}

If fetching from an API, check your data source:
- Ensure your API is returning all expected posts
- Check if there are pagination limits in your API calls
For server-side rendering (SSR):
If you want to handle dynamic paths without pre-generating them all, you can switch to SSR mode:

// In your [slug].astro file
export const prerender = false; // Opt out of static pre-rendering

// Instead of getStaticPaths, directly get the slug from params
const { slug } = Astro.params;
// Fetch data for this specific slug

Add a fallback for missing paths:
If using SSR, you can add logic to handle missing paths:

const { slug } = Astro.params;
const post = await fetchPost(slug);

#

// Redirect to 404 if post not found
if (!post) {
return Astro.redirect('/404');
}


Since your log shows that `/blog/blog-12` works but `/blog/blog-10` doesn't, it suggests that your `getStaticPaths()` function includes `blog-12` but is missing `blog-10`. Double-check the paths you're generating to make sure all expected blog posts are included.

For more information on dynamic routes in Astro, check out the [Dynamic Routes documentation](<https://docs.astro.build/en/guides/routing/#dynamic-routes>).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#

@vivid goblet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vivid goblet Apr 3, 2025, 6:58 PM

#

@lunar comet no [slug].astro
import { getAllPosts, getCategory, totalPages } from './constant.js';

export async function getStaticPaths() {
const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
return pages.map((pageNum) => ({
params: { page: pageNum },
props: { pageNum }
}));
}

const { pageNum } = Astro.props;
const data = await getAllPosts(pageNum);
there i need slug for current page

lunar cometBOT Apr 3, 2025, 6:58 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

I see you're working with dynamic routes in Astro and need to access the slug for the current page. Based on your code, you're using getStaticPaths() to generate multiple pages from a single component.

In your current implementation, you're generating pages with numeric parameters (like /1, /2, etc.), but it seems you also need to access a slug value. Let me help you modify your code to include and access the slug:

---
import { getAllPosts, getCategory, totalPages } from './constant.js';

export async function getStaticPaths() {
    const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
    
    // Assuming you have a slug value you want to use for all pages
    // If this comes from somewhere else, adjust accordingly
    const slug = "blog"; // Replace with your actual slug value
    
    return pages.map((pageNum) => ({
        params: { page: pageNum },
        props: { pageNum, slug }
    }));
}

// Now you can access both pageNum and slug from props
const { pageNum, slug } = Astro.props;
const data = await getAllPosts(pageNum);
---

<!-- Now you can use the slug in your template -->
<h1>Page {pageNum} of {slug}</h1>

If your slug needs to be dynamic and different for each page, you would need to determine it when creating your paths:

---
import { getAllPosts, getCategory, totalPages } from './constant.js';

export async function getStaticPaths() {
    const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
    
    return pages.map((pageNum) => {
        // Get the appropriate slug for this page number
        // This is just an example - replace with your actual logic
        const slug = `blog-section-${pageNum}`;
        
        return {
            params: { page: pageNum },
            props: { pageNum, slug }
        };
    });
}

#

const { pageNum, slug } = Astro.props;
const data = await getAllPosts(pageNum);


If you need to access the slug from the URL path itself (like in `/blog/2` where "blog" is the slug), you would need to use a different file structure with nested dynamic routes, such as `[slug]/[page].astro`:

```astro
---
import { getAllPosts, getCategory, totalPages } from './constant.js';

export async function getStaticPaths() {
    // Example: generate pages for multiple slugs
    const categories = ["blog", "news", "events"];
    
    return categories.flatMap(slug => {
        // For each category, generate its pages
        const categoryTotalPages = totalPages; // This might be different per category
        
        return Array.from({ length: categoryTotalPages }, (_, i) => i + 1).map(pageNum => ({
            params: { slug, page: pageNum },
            props: { pageNum, slug }
        }));
    });
}

// Now you can access both from params and props
const { slug } = Astro.params;
const { pageNum } = Astro.props;
const data = await getAllPosts(pageNum, slug); // Adjust your function if needed
---

For more information on dynamic routes in Astro, you can refer to the Dynamic Routes documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vivid goblet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vivid goblet Apr 3, 2025, 7:01 PM

#

@lunar comet if i want use

export const getPostsById = async (id) => {
try {
const response = await fetch(${apiUrl}/blog/${id}?&acf_format=standard&_fields=slug,title,date,acf);

    const newPosts = await response.json();
    return newPosts;
}
catch (error) {
    console.error('Failed to fetch blogs:', error);
    throw error;
}

}

lunar cometBOT Apr 3, 2025, 7:01 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

I see you're working with Astro and want to use a function to fetch a specific blog post by ID from an API. This is a common pattern when working with dynamic routes in Astro.

Your getPostsById function looks good for fetching a single post. Here's how you can use this function in an Astro dynamic route:

For Static Site Generation (default)

If you're building a static site, you would use this in combination with getStaticPaths:

---
import { getPostsById } from '../path/to/your/functions';

export async function getStaticPaths() {
  // Get all post IDs (you'll need a function for this)
  const allPostIds = await getAllPostIds();
  
  return allPostIds.map(id => ({
    params: { id },
    props: { id }
  }));
}

const { id } = Astro.props;
const post = await getPostsById(id);
---

<html>
  <head>
    <title>{post.title}</title>
  </head>
  <body>
    <h1>{post.title}</h1>
    <div set:html={post.acf.content}></div>
  </body>
</html>

For Server-Side Rendering

If you're using On-Demand Rendering, you can directly use the ID from the URL parameters:

---
import { getPostsById } from '../path/to/your/functions';

// For SSR mode
export const prerender = false;

const { id } = Astro.params;

let post;
try {
  post = await getPostsById(id);
} catch (error) {
  return Astro.redirect('/404');
}
---

<html>
  <head>
    <title>{post.title}</title>
  </head>
  <body>
    <h1>{post.title}</h1>
    <div set:html={post.acf.content}></div>
  </body>
</html>

Your function is well-structured with proper error handling, which is great. Just make sure that the apiUrl variable is defined somewhere in your code (either as an import or as an environment variable).

#

For more information on working with dynamic routes in Astro, check out the Dynamic Routes documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vivid goblet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vivid goblet Apr 3, 2025, 7:05 PM

#

@lunar comet and how looks like function getAllPostIds() if my wp rest api liit 10 posts per page and totalposts export const totalPosts = response.headers.get('X-WP-Total');

lunar cometBOT Apr 3, 2025, 7:05 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

I'll help you create a function to get all post IDs from a WordPress REST API that has pagination limitations. Here's how you can implement the getAllPostIds() function when your API limits results to 10 posts per page:

export const getAllPostIds = async () => {
  try {
    // First, make a request to get the total number of posts
    const initialResponse = await fetch(`${apiUrl}/blog?per_page=10&page=1`);
    const totalPosts = parseInt(initialResponse.headers.get('X-WP-Total'));
    const totalPages = Math.ceil(totalPosts / 10); // 10 is the per_page limit
    
    // Create an array to hold all post IDs
    let allPostIds = [];
    
    // Fetch posts from all pages
    for (let page = 1; page <= totalPages; page++) {
      const response = await fetch(`${apiUrl}/blog?per_page=10&page=${page}&_fields=id`);
      const posts = await response.json();
      
      // Extract just the IDs and add them to our array
      const pagePostIds = posts.map(post => post.id.toString());
      allPostIds = [...allPostIds, ...pagePostIds];
    }
    
    return allPostIds;
  } catch (error) {
    console.error('Failed to fetch post IDs:', error);
    throw error;
  }
};

This function:

Makes an initial request to get the total number of posts from the X-WP-Total header
Calculates how many pages of results there will be
Loops through each page, fetching just the IDs (using _fields=id to minimize data transfer)
Combines all the IDs into a single array and returns it

You can then use this function with your getStaticPaths as shown in our previous conversation:

export async function getStaticPaths() {
  const allPostIds = await getAllPostIds();
  
  return allPostIds.map(id => ({
    params: { id },
    props: { id }
  }));
}

#

This approach efficiently handles WordPress's pagination limits while still allowing you to generate static routes for all your posts.

For more information on working with WordPress as a headless CMS in Astro, check out the Headless WordPress & Astro guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vivid goblet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vivid goblet Apr 3, 2025, 7:28 PM

#

@lunar comet
export async function getStaticPaths() {
const allPostIds = await getAllPostIds();

return allPostIds.map(async (id) => {
    const data = await getPostsById(id);
    return {
        params: { slug: data.slug },
        props: { data }
    };
});

}

const { slug } = Astro.props;

lunar cometBOT Apr 3, 2025, 7:28 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

I notice there's an issue with your getStaticPaths() implementation. The function is returning an array of Promises rather than an array of objects, which will cause problems. Also, you're trying to access slug from Astro.props when it should be in Astro.params.

Here's the corrected version:

---
export async function getStaticPaths() {
    const allPostIds = await getAllPostIds();
    
    // Use Promise.all to wait for all async operations
    const paths = await Promise.all(
        allPostIds.map(async (id) => {
            const data = await getPostsById(id);
            return {
                params: { slug: data.slug },
                props: { data }
            };
        })
    );
    
    return paths;
}

// Access slug from params, not props
const { slug } = Astro.params;
// Access the post data from props
const { data } = Astro.props;
---

Key corrections:

Used Promise.all() to properly resolve all the promises from the async mapping operation
Fixed the access to slug - it should come from Astro.params since it's part of the URL parameters
Added access to data from Astro.props which contains your post data

This approach follows Astro's pattern for generating routes from content where you fetch data in getStaticPaths(), use it to define URL paths via params, and pass the full data object via props.

If you're working with WordPress, this approach is similar to what's shown in the Headless WordPress & Astro guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vivid goblet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

vivid goblet Apr 4, 2025, 7:34 AM

#

@lunar comet Missing or empty required params property on getStaticPaths route.

export async function getStaticPaths({ paginate }) {
const pages = Array.from({ length: totalPages }, (_, i) => i + 1);

return pages.map(async (pageNum) => {
    const filteredPosts = await getAllPosts(pageNum);

    return allTags.flatMap((cat) => {
        const allCatPosts = filteredPosts.filter((post) => {
            return post.acf.category === cat.id;
        });
        return {
            params: { category: cat.slug },
            props: { posts: allCatPosts }
        };
    });
});

}

lunar cometBOT Apr 4, 2025, 7:34 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

I can see the issue with your getStaticPaths implementation. The error "Missing or empty required params property on getStaticPaths route" occurs because your function is returning an array of promises that resolve to arrays, rather than a flat array of objects with params.

Here's how to fix your code:

export async function getStaticPaths({ paginate }) {
    const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
    
    // Use Promise.all to wait for all async operations
    const allPathsNested = await Promise.all(
        pages.map(async (pageNum) => {
            const filteredPosts = await getAllPosts(pageNum);
            
            // Return an array of path objects for each category
            return allTags.map((cat) => {
                const allCatPosts = filteredPosts.filter((post) => {
                    return post.acf.category === cat.id;
                });
                
                return {
                    params: { category: cat.slug },
                    props: { posts: allCatPosts, pageNum }
                };
            });
        })
    );
    
    // Flatten the nested arrays into a single array of path objects
    return allPathsNested.flat();
}

The key issues I fixed:

Async mapping: You were returning promises from your map function without resolving them with Promise.all()
Nested arrays: The flatMap was inside another map, creating nested arrays
Flattening: In Astro v3+, the return value is no longer automatically flattened, so you need to explicitly use .flat() as mentioned in the v3 upgrade guide

#

This approach will properly generate routes for each category across all your pages. Each route will have the category slug as a parameter and the filtered posts as props.

If you're trying to implement pagination for each category, you might want to use Astro's paginate() function instead:

export async function getStaticPaths({ paginate }) {
    // Get all posts first
    const allPosts = await getAllPostsForAllPages();
    
    // For each category, return a paginate() result
    return allTags.flatMap((cat) => {
        const filteredPosts = allPosts.filter((post) => post.acf.category === cat.id);
        return paginate(filteredPosts, {
            params: { category: cat.slug },
            pageSize: 10 // Adjust as needed
        });
    });
}

#no i dont want limit my rest api per 100 post on one page

For more details on pagination in Astro, you can refer to the Pagination documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For Static Site Generation

For Server-Side Rendering (SSR)

// Calculate pagination URLs
const nextPage = currentPage < totalPages ? `/blog/${currentPage + 1}` : undefined;
const prevPage = currentPage > 1 ? `/blog/${currentPage - 1}` : undefined;

For more information on working with pagination in Astro, you can refer to the Pagination documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@lunar comet create pagination where current page have class active

const { slug, allPosts, count } = Astro.props;
const num = Math.floor(allPosts / count);

You can also check out community integrations like @philnash/astro-pagination for more advanced pagination components.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Why this happens

How to fix it

const { pageNum, slug } = Astro.props;
const data = await getAllPosts(pageNum);

For more information on dynamic routes in Astro, you can refer to the Dynamic Routes documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For Static Site Generation (default)

For Server-Side Rendering

For more information on working with dynamic routes in Astro, check out the Dynamic Routes documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information on working with WordPress as a headless CMS in Astro, check out the Headless WordPress & Astro guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you're working with WordPress, this approach is similar to what's shown in the Headless WordPress & Astro guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information on nested pagination, check out the Nested Pagination documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#no i dont want limit my rest api per 100 post on one page

For more details on pagination in Astro, you can refer to the Pagination documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For Static Site Generation

For Server-Side Rendering (SSR)

// Calculate pagination URLs const nextPage = currentPage < totalPages ? /blog/${currentPage + 1} : undefined; const prevPage = currentPage > 1 ? /blog/${currentPage - 1} : undefined;

For more information on working with pagination in Astro, you can refer to the Pagination documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@lunar comet create pagination where current page have class active

const { slug, allPosts, count } = Astro.props; const num = Math.floor(allPosts / count);

You can also check out community integrations like @philnash/astro-pagination for more advanced pagination components.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Why this happens

How to fix it

const { pageNum, slug } = Astro.props; const data = await getAllPosts(pageNum);

For more information on dynamic routes in Astro, you can refer to the Dynamic Routes documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For Static Site Generation (default)

For Server-Side Rendering

For more information on working with dynamic routes in Astro, check out the Dynamic Routes documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information on working with WordPress as a headless CMS in Astro, check out the Headless WordPress & Astro guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you're working with WordPress, this approach is similar to what's shown in the Headless WordPress & Astro guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information on nested pagination, check out the Nested Pagination documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

// Calculate pagination URLs
const nextPage = currentPage < totalPages ? `/blog/${currentPage + 1}` : undefined;
const prevPage = currentPage > 1 ? `/blog/${currentPage - 1}` : undefined;

const { slug, allPosts, count } = Astro.props;
const num = Math.floor(allPosts / count);

const { pageNum, slug } = Astro.props;
const data = await getAllPosts(pageNum);