Astro.js - Pass dynamic variables to pagination

Question

So my problem is, i created page in Astro.js, i collect data from directus SDK, to propagate them on the site. I using buildin pagination in Astro.js. The problem showin up when i trying add some filtration. How can I rebuild pagination, i understand that pagination is rendered when sit is loading, but refresh dousn't rebuild it.

My pagination implementation:

export async function getStaticPaths({ paginate }) 
{
  const items = await fetchItems(filterValue);
  return paginate(items, { pageSize: 9 });
}

function fetchItems() fetching data from directus sdk. Function don't see declared veriable outside getStaticPath function. I want to make filterValue dynamic. Can i do this or have to builb pagination by my own?

Answer 1

What you need is nested pagination.

//[page].astro
import type { GetStaticPaths } from "astro";
export const getStaticPaths = (async ({paginate}) => {
    const items = await fetchItems(filterVal);
    return paginate( items, {params: { filterVal }, pageSize: 9});
}) satisfies GetStaticPaths;

Example of project structure:

pages
  |--page
      |--[filterVal]
            |--[page]

here is the official doc: https://docs.astro.build/en/guides/routing/#nested-pagination