Firebase v9 Paging with StartAfter() + Nextjs 13.x.x

Hey there coder,

I know you must be wondering why the hell on this earth, firebase made is super difficult to page through the records.

Trust me, I share your pain.

So in this tutorial, I will try to explain in plain English how we could do that.

And I am sure you have already gone through this weirdo guy video on Google documentation page:

https://www.youtube.com/watch?v=poqTHxtDXwU

But even after that it does not make sense and I totally get that.

Because it happened to me too.

Reading through this confusing documentation several times:

It just doesn’t make sense.

And so, even though I really do not like to write too much. I had to write this article so that someone out there like me does not waste their time in learning how the hell this pagination actually works in firebase.

It just doesn’t make sense.

And so, even though I really do not like to write too much. I had to write this article so that someone out there like me does not waste their time in learning how the hell this pagination actually works in firebase.

So let's get started…

First thing first, you need to understand that you can only paginate through firebase result set with the same field name which you use for order By filter.

So let’s say you used created_at field into your query, then you can only use created_at value to move your cursor.

const next = db.collection('cities')
  .orderBy('created_at')
  .startAfter('VALUE_OF_CREATED_AT')
  .limit(3);

But you must be thinking how come I will get a value of created at field on the first place.

Well, don't pull your hairs.

This is the query you use after you run your first query, which should look like this:

const next = db.collection('cities')
  .orderBy('created_at', 'desc') 
  .limit(3);

So you see here

We got three results.

[
  {
    name: "London",
    created_at: timestamp
  },
  {
    name: "Paris",
    created_at: timestamp
  },
  {
    name: "Jakarta",
    created_at: timestamp
  }
]

I am not sure why I chose third city as Jakarta. I guess It got into my brain.

Now, if you want to move to next page, what you need to do is store the created_at value of first and last index in a variable.

So let's say I am using Next.js with react and I have a function to pull the records.

const records = fetchCities();

// now I have to save 
const first_index_value = records[0].created_at;
cosnt last_index_value = records[records.length - 1].created_at;

Now you have values of both indexes.

Now you can just pass it to the startAfter part into your query, and it will filter it with the paging.

So simple isn’t it.

const next = db.collection('cities')
  .orderBy('created_at')
  .startAfter(first_index_value)
  .limit(3);

But in a billion-dollar company, Google, nobody was able to explain it in simple English 😂

I have also created a video to explain it in a simple manner here:

You can download the script here.