Handle dynamic routing when the paths are coming from supabase

Question

I'm building a blog and I'm wondering how should I handle the getStaticPaths if the blogs are stored at Supabase...

The blog will have thousands of entries someday. How can I handle the supabase limits?

Now, my code goes like this.

export const getStaticPaths: GetStaticPaths = async () => {
  const { data: posts, error } = await supabase
    .from("post")
    .select("slug")
    .eq("published", true);

  if (error || !posts) {
    return { paths: [], fallback: "blocking" };
  }

  const paths = [];
  for (const post of posts) {
    paths.push(
      { params: { slug: post.slug }, locale: "en" },
      { params: { slug: post.slug }, locale: "es" }
    );
  }

  return { paths, fallback: false };
};

But I'm afraid that if I overpass the limit, my app will not fetch all the existing blogposts

Thanks

score 0 · Answer 1 · answered Aug 28 '23 at 06:28

You should loop through until you get all posts using count and range() like this:

// repeat the query each time retrieving the next range
const { data: posts, error, count } = await supabase
    .from("post")
    .select("slug", {count: 'exact'})
    .eq("published", true)
    .range(0, 1000);

With count option, you have the total number of rows with the current filter, so you should know how many times you have to loop though in order to get all of the data.

Handle dynamic routing when the paths are coming from supabase

1 Answers1