Firebase Pagination Using StartAfter() and Nextjs

Hey there, hacker!

I know you must be wondering why the hell on this Earth firebase made it 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 the Google documentation page:

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 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 in 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 created at the field in the first place?

Well, don’t pull your hair out.

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 the third city to be Jakarta--I guess It got into my brain.

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

so lets say I am using nextJs 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: