Learn how to run pagination queries in Firestore 🔥📃📃 forward and backward. Then build an full working app with Svelte https://fireship.io/lessons/firestore-pagination-guide/

💸 Black Friday Discount Code: KaLg2d04
👉 Use it here: https://fireship.io/pro
🙏 Thank you for making this channel possible!

- SvelteFire https://github.com/codediodeio/sveltefire
- Limit To Last: https://firebase.google.com/docs/reference/node/firebase.firestore.Query.html#limittolast

#firebase #firestore

Don't forget to take the quiz 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp
2024-02-04T06:29:17.468Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
0a637edd-19f7-4a8f-8679-c54ce1ad2bf7
24a793769ef941048cbe4a74e561db070e5bf4c62473a23aac56bf23f58ac73f
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Firebase recently released a new query method called limitToLast.
It's available in version 7.3 or greater of the JavaScript SDK.
And in today's video, I'll show you exactly why it's so useful by implementing a pagination feature with Firestore.
If you're new here, like and subscribe, and check out a discount code in the description below for Black Friday.
It's active now, so feel free to use that if you want to become a Pro member.
You'll get access to the Firestore Data Modeling course along with a bunch of other advanced Firebase content.
For today's video, let's start by talking about the problem that we're trying to solve.
You may have a large collection of data that you want you to show to the user in batches.
Or in other words, you want to split your data into a discrete set of pages and allow the user to click through those pages.
If you've ever tried to implement pagination in Firestore in the past, you might know that it's pretty easy to go in a forward direction, but going backwards to a previous page was not so easy.
You'd have to follow these 4 steps, which just isn't very intuitive for something that you would think would be relatively easy.
Well, I have some good news for you.
The Limit to Last method makes this process much easier.
It's similar to the existing limit method, but instead of limiting to the first end results, it limits to the last end results.
Over the next few minutes, we'll look at the implementation details from scratch, but I first want to show you the query functions that make this possible.
And make sure to stay tuned until the end of the video because I'm going to discuss some of the limitations of pagination in Firestore in useful.
For this demo, we'll be using Svelte along with a new library that I wrote called Svelte Fire.
The pagination queries and principles apply to all frameworks across all programming languages.
But as you'll see in a few minutes, Svelte Fire provides some special magic to make pagination even easier.
But I know not everybody's using Svelte yet, so let's start by just focusing on the queries that we need to make for pagination to work.
The first thing you'll need to do is make an initial query on your collection.
It needs to be ordered by a certain field and should be limited to a specific page size.
So that's pretty straightforward, but when you want to navigate to the use page, you need to offset by the last result in that first page.
This is pretty straightforward and uses query methods that have been available on Firestore from day 1.
So here we have a function called nextPage, which takes the last document from the first query.
It orders by the same field, it uses the start after method, which will offset from that value.
So you'll start after the field value from the last document by the same field that you're ordering by, and it should limit by the same value as well.
Now let's say the user hits the next button a few times, but now they want to navigate back to the previous page.
In that case, we want to grab the 1st document on the most recent query.
In this case, we'll offset using the end before method.
You and finally, that's where limit to last comes in.
That will give us the results that we're seeing on the previous page, giving us a full forward and backward pagination system.
Now let's take a minute to look at the full implementation details in Svelte.
The first thing we'll do is install Svelte Fire.
And, again, this is a library that I wrote, and I'm very excited about it because it unlocks some UI patterns in Firebase that are really awesome.
And if you want to see more videos about Svelte, let me know in the comments because I would be more than happy to make them.
The first thing we'll do is install Svelte Fire.
It provides several components that allow you to access data from collections, documents, and user authentication.
Then we'll initialize our Firebase app in the app component and use the Firebase app component from Svelte Fire to set up the context.
From there, I'll set up a couple of properties on the component.
The page size will be 3, and the field that we want to order by is the username.
From there, I'll simply paste in the query code that I showed you earlier.
The only difference is that the query is now a function, and the reason we do this is because Svelte is reactive.
So anytime we change this function, it will update the query that we send to Firestore and update the data in the UI.
So now we'll go back into the UI, and we'll set up a collection by using the collection component from Svelte Fire, and we'll give it a path of customers, which will read the customer's collection.
Then we'll pass in our query function as a property to that component.
And, again, whenever the query function changes, it will re execute the request to Firestore.
You now here's where Svelte gets really awesome because it has this thing called slot props.
It allows me as a library author to create a variable in the template called data.
That is the data that is unwrapped from this collection.
When the data has actually loaded, we can go ahead and loop over it and show the customer username, the ID, and their avatar image.
You Under the hood, Svelte Fire is also keeping track of the loading state, very similar to React Suspense if you're familiar with that.
So we'll use the loading slot 2 show a loading spinner before the collection is actually loaded.
From there, we'll go ahead and set up a couple of buttons that can run our previous page and next page functions.
To go to the previous page, we need to grab the first element from the current query.
To go to the next page, we need the last element in the current query.
Normally, we would need do write some extra JavaScript to calculate these values.
But in Sveltefire, they're made available as slot props.
So we simply say let first, let last, and as you might imagine, that gives us access to the first and last documents in the collection.
And that's all there is to it.
We're now running a paginated uQuery and Firestore that can go in both a forward direction and a reverse direction.
But before we wrap up the video, I do want to talk about some of the limitations with pagination in Firestore.
The biggest one in my opinion is splitting your data into a discrete number of pages.
If you want to show a number of pages and have the user navigate to a specific page, it's really just not possible in Firestore, at least not out of the box.
If you really need a feature like this, it is possible using a Cloud Function to aggregate your data on the back end when it's created.
I have a snippet on Fireship IO that shows you how to do this, so check that out if you really need it.
And also, you can use an that operator, but it's only available on the Admin SDK for Node.
Js.
So that could be very useful as well, but, again, only works on the server.
Now the next thing I want to point out is not really a limitation, but more of a caveat that you should be aware of.
If your data changes frequently, you might get unexpected results in your paginated queries.
For example, if the user is on a given page and then you add a new document to the collection, it could change the results on that page.
So the data would jump around instantly, which would be a weird behavior.
Then if they click back to the previous page, they'll get a different set of results than they saw originally.
So the bottom line here is that pagination is most well suited for collections that don't change frequently and that are not real time.
This is especially true if you do something like infinite scroll, which is just a fancy way to do pagination, because you generally don't want the position of results to change after they were loaded in initially.
Unique.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe, and make sure to use the discount code before it expires on Friday.
Thanks for watching, and I will talk to you soon.

Speaker 0: Firebase recently released a new query method called limitToLast. It's available in version 7.3 or greater of the JavaScript SDK. And in today's video, I'll show you exactly why it's so useful by implementing a pagination feature with Firestore. If you're new here, like and subscribe, and check out a discount code in the description below for Black Friday. It's active now, so feel free to use that if you want to become a Pro member.

You'll get access to the Firestore Data Modeling course along with a bunch of other advanced Firebase content. For today's video, let's start by talking about the problem that we're trying to solve. You may have a large collection of data that you want you to show to the user in batches. Or in other words, you want to split your data into a discrete set of pages and allow the user to click through those pages. If you've ever tried to implement pagination in Firestore in the past, you might know that it's pretty easy to go in a forward direction, but going backwards to a previous page was not so easy.

You'd have to follow these 4 steps, which just isn't very intuitive for something that you would think would be relatively easy. Well, I have some good news for you. The Limit to Last method makes this process much easier. It's similar to the existing limit method, but instead of limiting to the first end results, it limits to the last end results. Over the next few minutes, we'll look at the implementation details from scratch, but I first want to show you the query functions that make this possible.

And make sure to stay tuned until the end of the video because I'm going to discuss some of the limitations of pagination in Firestore in useful. For this demo, we'll be using Svelte along with a new library that I wrote called Svelte Fire. The pagination queries and principles apply to all frameworks across all programming languages. But as you'll see in a few minutes, Svelte Fire provides some special magic to make pagination even easier. But I know not everybody's using Svelte yet, so let's start by just focusing on the queries that we need to make for pagination to work.

The first thing you'll need to do is make an initial query on your collection. It needs to be ordered by a certain field and should be limited to a specific page size. So that's pretty straightforward, but when you want to navigate to the use page, you need to offset by the last result in that first page. This is pretty straightforward and uses query methods that have been available on Firestore from day 1. So here we have a function called nextPage, which takes the last document from the first query.

It orders by the same field, it uses the start after method, which will offset from that value. So you'll start after the field value from the last document by the same field that you're ordering by, and it should limit by the same value as well. Now let's say the user hits the next button a few times, but now they want to navigate back to the previous page. In that case, we want to grab the 1st document on the most recent query. In this case, we'll offset using the end before method.

You and finally, that's where limit to last comes in. That will give us the results that we're seeing on the previous page, giving us a full forward and backward pagination system. Now let's take a minute to look at the full implementation details in Svelte. The first thing we'll do is install Svelte Fire. And, again, this is a library that I wrote, and I'm very excited about it because it unlocks some UI patterns in Firebase that are really awesome.

And if you want to see more videos about Svelte, let me know in the comments because I would be more than happy to make them. The first thing we'll do is install Svelte Fire. It provides several components that allow you to access data from collections, documents, and user authentication. Then we'll initialize our Firebase app in the app component and use the Firebase app component from Svelte Fire to set up the context. From there, I'll set up a couple of properties on the component.

The page size will be 3, and the field that we want to order by is the username. From there, I'll simply paste in the query code that I showed you earlier. The only difference is that the query is now a function, and the reason we do this is because Svelte is reactive. So anytime we change this function, it will update the query that we send to Firestore and update the data in the UI. So now we'll go back into the UI, and we'll set up a collection by using the collection component from Svelte Fire, and we'll give it a path of customers, which will read the customer's collection.

Then we'll pass in our query function as a property to that component. And, again, whenever the query function changes, it will re execute the request to Firestore. You now here's where Svelte gets really awesome because it has this thing called slot props. It allows me as a library author to create a variable in the template called data. That is the data that is unwrapped from this collection.

When the data has actually loaded, we can go ahead and loop over it and show the customer username, the ID, and their avatar image. You Under the hood, Svelte Fire is also keeping track of the loading state, very similar to React Suspense if you're familiar with that. So we'll use the loading slot 2 show a loading spinner before the collection is actually loaded. From there, we'll go ahead and set up a couple of buttons that can run our previous page and next page functions. To go to the previous page, we need to grab the first element from the current query.

To go to the next page, we need the last element in the current query. Normally, we would need do write some extra JavaScript to calculate these values. But in Sveltefire, they're made available as slot props. So we simply say let first, let last, and as you might imagine, that gives us access to the first and last documents in the collection. And that's all there is to it.

We're now running a paginated uQuery and Firestore that can go in both a forward direction and a reverse direction. But before we wrap up the video, I do want to talk about some of the limitations with pagination in Firestore. The biggest one in my opinion is splitting your data into a discrete number of pages. If you want to show a number of pages and have the user navigate to a specific page, it's really just not possible in Firestore, at least not out of the box. If you really need a feature like this, it is possible using a Cloud Function to aggregate your data on the back end when it's created.

I have a snippet on Fireship IO that shows you how to do this, so check that out if you really need it. And also, you can use an that operator, but it's only available on the Admin SDK for Node. Js. So that could be very useful as well, but, again, only works on the server. Now the next thing I want to point out is not really a limitation, but more of a caveat that you should be aware of.

If your data changes frequently, you might get unexpected results in your paginated queries. For example, if the user is on a given page and then you add a new document to the collection, it could change the results on that page. So the data would jump around instantly, which would be a weird behavior. Then if they click back to the previous page, they'll get a different set of results than they saw originally. So the bottom line here is that pagination is most well suited for collections that don't change frequently and that are not real time.

This is especially true if you do something like infinite scroll, which is just a fancy way to do pagination, because you generally don't want the position of results to change after they were loaded in initially. Unique. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to use the discount code before it expires on Friday. Thanks for watching, and I will talk to you soon.
Firebase recently released a new query method called limitToLast. It's available in version 7.3 or greater of the JavaScript SDK. And in today's video, I'll show you exactly why it's so useful by implementing a pagination feature with Firestore.
If you're new here, like and subscribe, and check out a discount code in the description below for Black Friday. It's active now, so feel free to use that if you want to become a Pro member. You'll get access to the Firestore Data Modeling course along with a bunch of other advanced Firebase content.
websites
For today's video, let's start by talking about the problem that we're trying to solve. You may have a large collection of data that you want you to show to the user in batches. Or in other words, you want to split your data into a discrete set of pages and allow the user to click through those pages. If you've ever tried to implement pagination in Firestore in the past, you might know that it's pretty easy to go in a forward direction, but going backwards to a previous page was not so easy. You'd have to follow these 4 steps, which just isn't very intuitive for something that you would think would be relatively easy. Well, I have some good news for you. The Limit to Last method makes this process much easier. It's similar to the existing limit method, but instead of limiting to the first end results, it limits to the last end results. Over the next few minutes, we'll look at the implementation details from scratch, but I first want to show you the query functions that make this possible. And make sure to stay tuned until the end of the video because I'm going to discuss some of the limitations of pagination in Firestore in useful. For this demo, we'll be using Svelte along with a new library that I wrote called Svelte Fire. The pagination queries and principles apply to all frameworks across all programming languages. But as you'll see in a few minutes, Svelte Fire provides some special magic to make pagination even easier. But I know not everybody's using Svelte yet, so let's start by just focusing on the queries that we need to make for pagination to work. The first thing you'll need to do is make an initial query on your collection. It needs to be ordered by a certain field and should be limited to a specific page size. So that's pretty straightforward, but when you want to navigate to the use page, you need to offset by the last result in that first page. This is pretty straightforward and uses query methods that have been available on Firestore from day 1. So here we have a function called nextPage, which takes the last document from the first query. It orders by the same field, it uses the start after method, which will offset from that value. So you'll start after the field value from the last document by the same field that you're ordering by, and it should limit by the same value as well. Now let's say the user hits the next button a few times, but now they want to navigate back to the previous page. In that case, we want to grab the 1st document on the most recent query. In this case, we'll offset using the end before method. You and finally, that's where limit to last comes in. That will give us the results that we're seeing on the previous page, giving us a full forward and backward pagination system. Now let's take a minute to look at the full implementation details in Svelte. The first thing we'll do is install Svelte Fire. And, again, this is a library that I wrote, and I'm very excited about it because it unlocks some UI patterns in Firebase that are really awesome. And if you want to see more videos about Svelte, let me know in the comments because I would be more than happy to make them. The first thing we'll do is install Svelte Fire. It provides several components that allow you to access data from collections, documents, and user authentication. Then we'll initialize our Firebase app in the app component and use the Firebase app component from Svelte Fire to set up the context. From there, I'll set up a couple of properties on the component. The page size will be 3, and the field that we want to order by is the username. From there, I'll simply paste in the query code that I showed you earlier. The only difference is that the query is now a function, and the reason we do this is because Svelte is reactive. So anytime we change this function, it will update the query that we send to Firestore and update the data in the UI. So now we'll go back into the UI, and we'll set up a collection by using the collection component from Svelte Fire, and we'll give it a path of customers, which will read the customer's collection. Then we'll pass in our query function as a property to that component. And, again, whenever the query function changes, it will re execute the request to Firestore.
You now here's where Svelte gets really awesome because it has this thing called slot props. It allows me as a library author to create a variable in the template called data. That is the data that is unwrapped from this collection. When the data has actually loaded, we can go ahead and loop over it and show the customer username, the ID, and their avatar image.
data
You Under the hood, Svelte Fire is also keeping track of the loading state, very similar to React Suspense if you're familiar with that. So we'll use the loading slot 2 show a loading spinner before the collection is actually loaded. From there, we'll go ahead and set up a couple of buttons that can run our previous page and next page functions. To go to the previous page, we need to grab the first element from the current query. To go to the next page, we need the last element in the current query. Normally, we would need do write some extra JavaScript to calculate these values. But in Sveltefire, they're made available as slot props. So we simply say let first, let last, and as you might imagine, that gives us access to the first and last documents in the collection.
And that's all there is to it. We're now running a paginated uQuery and Firestore that can go in both a forward direction and a reverse direction. But before we wrap up the video, I do want to talk about some of the limitations with pagination in Firestore. The biggest one in my opinion is splitting your data into a discrete number of pages. If you want to show a number of pages and have the user navigate to a specific page, it's really just not possible in Firestore, at least not out of the box. If you really need a feature like this, it is possible using a Cloud Function to aggregate your data on the back end when it's created. I have a snippet on Fireship IO that shows you how to do this, so check that out if you really need it. And also, you can use an that operator, but it's only available on the Admin SDK for Node.
streaming
amazon
websites
databases
google
Js. So that could be very useful as well, but, again, only works on the server. Now the next thing I want to point out is not really a limitation, but more of a caveat that you should be aware of. If your data changes frequently, you might get unexpected results in your paginated queries. For example, if the user is on a given page and then you add a new document to the collection, it could change the results on that page. So the data would jump around instantly, which would be a weird behavior. Then if they click back to the previous page, they'll get a different set of results than they saw originally. So the bottom line here is that pagination is most well suited for collections that don't change frequently and that are not real time. This is especially true if you do something like infinite scroll, which is just a fancy way to do pagination, because you generally don't want the position of results to change after they were loaded in initially.
Unique. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to use the discount code before it expires on Friday. Thanks for watching, and I will talk to you soon.
youtube
Firebase recently released a new query method called limitToLast. It's available in version 7.3 or greater of the JavaScript SDK. And in today's video, I'll show you exactly why it's so useful by implementing a pagination feature with Firestore. If you're new here, like and subscribe, and check out a discount code in the description below for Black Friday. It's active now, so feel free to use that if you want to become a Pro member. You'll get access to the Firestore Data Modeling course along with a bunch of other advanced Firebase content. For today's video, let's start by talking about the problem that we're trying to solve. You may have a large collection of data that you want you to show to the user in batches. Or in other words, you want to split your data into a discrete set of pages and allow the user to click through those pages. If you've ever tried to implement pagination in Firestore in the past, you might know that it's pretty easy to go in a forward direction, but going backwards to a previous page was not so easy. You'd have to follow these 4 steps, which just isn't very intuitive for something that you would think would be relatively easy. Well, I have some good news for you. The Limit to Last method makes this process much easier. It's similar to the existing limit method, but instead of limiting to the first end results, it limits to the last end results. Over the next few minutes, we'll look at the implementation details from scratch, but I first want to show you the query functions that make this possible. And make sure to stay tuned until the end of the video because I'm going to discuss some of the limitations of pagination in Firestore in useful. For this demo, we'll be using Svelte along with a new library that I wrote called Svelte Fire. The pagination queries and principles apply to all frameworks across all programming languages. But as you'll see in a few minutes, Svelte Fire provides some special magic to make pagination even easier. But I know not everybody's using Svelte yet, so let's start by just focusing on the queries that we need to make for pagination to work. The first thing you'll need to do is make an initial query on your collection. It needs to be ordered by a certain field and should be limited to a specific page size. So that's pretty straightforward, but when you want to navigate to the use page, you need to offset by the last result in that first page. This is pretty straightforward and uses query methods that have been available on Firestore from day 1. So here we have a function called nextPage, which takes the last document from the first query. It orders by the same field, it uses the start after method, which will offset from that value. So you'll start after the field value from the last document by the same field that you're ordering by, and it should limit by the same value as well. Now let's say the user hits the next button a few times, but now they want to navigate back to the previous page. In that case, we want to grab the 1st document on the most recent query. In this case, we'll offset using the end before method. You and finally, that's where limit to last comes in. That will give us the results that we're seeing on the previous page, giving us a full forward and backward pagination system. Now let's take a minute to look at the full implementation details in Svelte. The first thing we'll do is install Svelte Fire. And, again, this is a library that I wrote, and I'm very excited about it because it unlocks some UI patterns in Firebase that are really awesome. And if you want to see more videos about Svelte, let me know in the comments because I would be more than happy to make them. The first thing we'll do is install Svelte Fire. It provides several components that allow you to access data from collections, documents, and user authentication. Then we'll initialize our Firebase app in the app component and use the Firebase app component from Svelte Fire to set up the context. From there, I'll set up a couple of properties on the component. The page size will be 3, and the field that we want to order by is the username. From there, I'll simply paste in the query code that I showed you earlier. The only difference is that the query is now a function, and the reason we do this is because Svelte is reactive. So anytime we change this function, it will update the query that we send to Firestore and update the data in the UI. So now we'll go back into the UI, and we'll set up a collection by using the collection component from Svelte Fire, and we'll give it a path of customers, which will read the customer's collection. Then we'll pass in our query function as a property to that component. And, again, whenever the query function changes, it will re execute the request to Firestore. You now here's where Svelte gets really awesome because it has this thing called slot props. It allows me as a library author to create a variable in the template called data. That is the data that is unwrapped from this collection. When the data has actually loaded, we can go ahead and loop over it and show the customer username, the ID, and their avatar image. You Under the hood, Svelte Fire is also keeping track of the loading state, very similar to React Suspense if you're familiar with that. So we'll use the loading slot 2 show a loading spinner before the collection is actually loaded. From there, we'll go ahead and set up a couple of buttons that can run our previous page and next page functions. To go to the previous page, we need to grab the first element from the current query. To go to the next page, we need the last element in the current query. Normally, we would need do write some extra JavaScript to calculate these values. But in Sveltefire, they're made available as slot props. So we simply say let first, let last, and as you might imagine, that gives us access to the first and last documents in the collection. And that's all there is to it. We're now running a paginated uQuery and Firestore that can go in both a forward direction and a reverse direction. But before we wrap up the video, I do want to talk about some of the limitations with pagination in Firestore. The biggest one in my opinion is splitting your data into a discrete number of pages. If you want to show a number of pages and have the user navigate to a specific page, it's really just not possible in Firestore, at least not out of the box. If you really need a feature like this, it is possible using a Cloud Function to aggregate your data on the back end when it's created. I have a snippet on Fireship IO that shows you how to do this, so check that out if you really need it. And also, you can use an that operator, but it's only available on the Admin SDK for Node. Js. So that could be very useful as well, but, again, only works on the server. Now the next thing I want to point out is not really a limitation, but more of a caveat that you should be aware of. If your data changes frequently, you might get unexpected results in your paginated queries. For example, if the user is on a given page and then you add a new document to the collection, it could change the results on that page. So the data would jump around instantly, which would be a weird behavior. Then if they click back to the previous page, they'll get a different set of results than they saw originally. So the bottom line here is that pagination is most well suited for collections that don't change frequently and that are not real time. This is especially true if you do something like infinite scroll, which is just a fancy way to do pagination, because you generally don't want the position of results to change after they were loaded in initially. Unique. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to use the discount code before it expires on Friday. Thanks for watching, and I will talk to you soon.
Firebase
firebase
recently
recently
released
released
a
a
new
new
query
query
method
method
called
called
limitToLast.
limittolast
It's
it's
available
available
in
in
version
version
7.3
7.3
or
or
greater
greater
of
of
the
the
JavaScript
javascript
SDK.
sdk
And
and
in
in
today's
today's
video,
video
I'll
i'll
show
show
you
you
exactly
exactly
why
why
it's
it's
so
so
useful
useful
by
by
implementing
implementing
a
a
pagination
pagination
feature
feature
with
with
Firestore.
firestore
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
check
check
out
out
a
a
discount
discount
code
code
in
in
the
the
description
description
below
below
for
for
Black
black
Friday.
friday
It's
it's
active
active
now,
now
so
so
feel
feel
free
free
to
to
use
use
that
that
if
if
you
you
want
want
to
to
become
become
a
a
Pro
pro
member.
member
You'll
you'll
get
get
access
access
to
to
the
the
Firestore
firestore
Data
data
Modeling
modeling
course
course
along
along
with
with
a
a
bunch
bunch
of
of
other
other
advanced
advanced
Firebase
firebase
content.
content
For
for
today's
today's
video,
video
let's
let's
start
start
by
by
talking
talking
about
about
the
the
problem
problem
that
that
we're
we're
trying
trying
to
to
solve.
solve
You
you
may
may
have
have
a
a
large
large
collection
collection
of
of
data
data
that
that
you
you
want
want
you
you
to
to
show
show
to
to
the
the
user
user
in
in
batches.
batches
Or
or
in
in
other
other
words,
words
you
you
want
want
to
to
split
split
your
your
data
data
into
into
a
a
discrete
discrete
set
set
of
of
pages
pages
and
and
allow
allow
the
the
user
user
to
to
click
click
through
through
those
those
pages.
pages
If
if
you've
you've
ever
ever
tried
tried
to
to
implement
implement
pagination
pagination
in
in
Firestore
firestore
in
in
the
the
past,
past
you
you
might
might
know
know
that
that
it's
it's
pretty
pretty
easy
easy
to
to
go
go
in
in
a
a
forward
forward
direction,
direction
but
but
going
going
backwards
backwards
to
to
a
a
previous
previous
page
page
was
was
not
not
so
so
easy.
easy
You'd
you'd
have
have
to
to
follow
follow
these
these
4
4
steps,
steps
which
which
just
just
isn't
isn't
very
very
intuitive
intuitive
for
for
something
something
that
that
you
you
would
would
think
think
would
would
be
be
relatively
relatively
easy.
easy
Well,
well
I
i
have
have
some
some
good
good
news
news
for
for
you.
you
The
the
Limit
limit
to
to
Last
last
method
method
makes
makes
this
this
process
process
much
much
easier.
easier
It's
it's
similar
similar
to
to
the
the
existing
existing
limit
limit
method,
method
but
but
instead
instead
of
of
limiting
limiting
to
to
the
the
first
first
end
end
results,
results
it
it
limits
limits
to
to
the
the
last
last
end
end
results.
results
Over
over
the
the
next
next
few
few
minutes,
minutes
we'll
we'll
look
look
at
at
the
the
implementation
implementation
details
details
from
from
scratch,
scratch
but
but
I
i
first
first
want
want
to
to
show
show
you
you
the
the
query
query
functions
functions
that
that
make
make
this
this
possible.
possible
And
and
make
make
sure
sure
to
to
stay
stay
tuned
tuned
until
until
the
the
end
end
of
of
the
the
video
video
because
because
I'm
i'm
going
going
to
to
discuss
discuss
some
some
of
of
the
the
limitations
limitations
of
of
pagination
pagination
in
in
Firestore
firestore
in
in
useful.
useful
For
for
this
this
demo,
demo
we'll
we'll
be
be
using
using
Svelte
svelte
along
along
with
with
a
a
new
new
library
library
that
that
I
i
wrote
wrote
called
called
Svelte
svelte
Fire.
fire
The
the
pagination
pagination
queries
queries
and
and
principles
principles
apply
apply
to
to
all
all
frameworks
frameworks
across
across
all
all
programming
programming
languages.
languages
But
but
as
as
you'll
you'll
see
see
in
in
a
a
few
few
minutes,
minutes
Svelte
svelte
Fire
fire
provides
provides
some
some
special
special
magic
magic
to
to
make
make
pagination
pagination
even
even
easier.
easier
But
but
I
i
know
know
not
not
everybody's
everybody's
using
using
Svelte
svelte
yet,
yet
so
so
let's
let's
start
start
by
by
just
just
focusing
focusing
on
on
the
the
queries
queries
that
that
we
we
need
need
to
to
make
make
for
for
pagination
pagination
to
to
work.
work
The
the
first
first
thing
thing
you'll
you'll
need
need
to
to
do
do
is
is
make
make
an
an
initial
initial
query
query
on
on
your
your
collection.
collection
It
it
needs
needs
to
to
be
be
ordered
ordered
by
by
a
a
certain
certain
field
field
and
and
should
should
be
be
limited
limited
to
to
a
a
specific
specific
page
page
size.
size
So
so
that's
that's
pretty
pretty
straightforward,
straightforward
but
but
when
when
you
you
want
want
to
to
navigate
navigate
to
to
the
the
use
use
page,
page
you
you
need
need
to
to
offset
offset
by
by
the
the
last
last
result
result
in
in
that
that
first
first
page.
page
This
this
is
is
pretty
pretty
straightforward
straightforward
and
and
uses
uses
query
query
methods
methods
that
that
have
have
been
been
available
available
on
on
Firestore
firestore
from
from
day
day
1.
1
So
so
here
here
we
we
have
have
a
a
function
function
called
called
nextPage,
nextpage
which
which
takes
takes
the
the
last
last
document
document
from
from
the
the
first
first
query.
query
It
it
orders
orders
by
by
the
the
same
same
field,
field
it
it
uses
uses
the
the
start
start
after
after
method,
method
which
which
will
will
offset
offset
from
from
that
that
value.
value
So
so
you'll
you'll
start
start
after
after
the
the
field
field
value
value
from
from
the
the
last
last
document
document
by
by
the
the
same
same
field
field
that
that
you're
you're
ordering
ordering
by,
by
and
and
it
it
should
should
limit
limit
by
by
the
the
same
same
value
value
as
as
well.
well
Now
now
let's
let's
say
say
the
the
user
user
hits
hits
the
the
next
next
button
button
a
a
few
few
times,
times
but
but
now
now
they
they
want
want
to
to
navigate
navigate
back
back
to
to
the
the
previous
previous
page.
page
In
in
that
that
case,
case
we
we
want
want
to
to
grab
grab
the
the
1st
1st
document
document
on
on
the
the
most
most
recent
recent
query.
query
In
in
this
this
case,
case
we'll
we'll
offset
offset
using
using
the
the
end
end
before
before
method.
method
You
you
and
and
finally,
finally
that's
that's
where
where
limit
limit
to
to
last
last
comes
comes
in.
in
That
that
will
will
give
give
us
us
the
the
results
results
that
that
we're
we're
seeing
seeing
on
on
the
the
previous
previous
page,
page
giving
giving
us
us
a
a
full
full
forward
forward
and
and
backward
backward
pagination
pagination
system.
system
Now
now
let's
let's
take
take
a
a
minute
minute
to
to
look
look
at
at
the
the
full
full
implementation
implementation
details
details
in
in
Svelte.
svelte
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
install
install
Svelte
svelte
Fire.
fire
And,
and
again,
again
this
this
is
is
a
a
library
library
that
that
I
i
wrote,
wrote
and
and
I'm
i'm
very
very
excited
excited
about
about
it
it
because
because
it
it
unlocks
unlocks
some
some
UI
ui
patterns
patterns
in
in
Firebase
firebase
that
that
are
are
really
really
awesome.
awesome
And
and
if
if
you
you
want
want
to
to
see
see
more
more
videos
videos
about
about
Svelte,
svelte
let
let
me
me
know
know
in
in
the
the
comments
comments
because
because
I
i
would
would
be
be
more
more
than
than
happy
happy
to
to
make
make
them.
them
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
install
install
Svelte
svelte
Fire.
fire
It
it
provides
provides
several
several
components
components
that
that
allow
allow
you
you
to
to
access
access
data
data
from
from
collections,
collections
documents,
documents
and
and
user
user
authentication.
authentication
Then
then
we'll
we'll
initialize
initialize
our
our
Firebase
firebase
app
app
in
in
the
the
app
app
component
component
and
and
use
use
the
the
Firebase
firebase
app
app
component
component
from
from
Svelte
svelte
Fire
fire
to
to
set
set
up
up
the
the
context.
context
From
from
there,
there
I'll
i'll
set
set
up
up
a
a
couple
couple
of
of
properties
properties
on
on
the
the
component.
component
The
the
page
page
size
size
will
will
be
be
3,
3
and
and
the
the
field
field
that
that
we
we
want
want
to
to
order
order
by
by
is
is
the
the
username.
username
From
from
there,
there
I'll
i'll
simply
simply
paste
paste
in
in
the
the
query
query
code
code
that
that
I
i
showed
showed
you
you
earlier.
earlier
The
the
only
only
difference
difference
is
is
that
that
the
the
query
query
is
is
now
now
a
a
function,
function
and
and
the
the
reason
reason
we
we
do
do
this
this
is
is
because
because
Svelte
svelte
is
is
reactive.
reactive
So
so
anytime
anytime
we
we
change
change
this
this
function,
function
it
it
will
will
update
update
the
the
query
query
that
that
we
we
send
send
to
to
Firestore
firestore
and
and
update
update
the
the
data
data
in
in
the
the
UI.
ui
So
so
now
now
we'll
we'll
go
go
back
back
into
into
the
the
UI,
ui
and
and
we'll
we'll
set
set
up
up
a
a
collection
collection
by
by
using
using
the
the
collection
collection
component
component
from
from
Svelte
svelte
Fire,
fire
and
and
we'll
we'll
give
give
it
it
a
a
path
path
of
of
customers,
customers
which
which
will
will
read
read
the
the
customer's
customer's
collection.
collection
Then
then
we'll
we'll
pass
pass
in
in
our
our
query
query
function
function
as
as
a
a
property
property
to
to
that
that
component.
component
And,
and
again,
again
whenever
whenever
the
the
query
query
function
function
changes,
changes
it
it
will
will
re
re
execute
execute
the
the
request
request
to
to
Firestore.
firestore
You
you
now
now
here's
here's
where
where
Svelte
svelte
gets
gets
really
really
awesome
awesome
because
because
it
it
has
has
this
this
thing
thing
called
called
slot
slot
props.
props
It
it
allows
allows
me
me
as
as
a
a
library
library
author
author
to
to
create
create
a
a
variable
variable
in
in
the
the
template
template
called
called
data.
data
That
that
is
is
the
the
data
data
that
that
is
is
unwrapped
unwrapped
from
from
this
this
collection.
collection
When
when
the
the
data
data
has
has
actually
actually
loaded,
loaded
we
we
can
can
go
go
ahead
ahead
and
and
loop
loop
over
over
it
it
and
and
show
show
the
the
customer
customer
username,
username
the
the
ID,
id
and
and
their
their
avatar
avatar
image.
image
You
you
Under
under
the
the
hood,
hood
Svelte
svelte
Fire
fire
is
is
also
also
keeping
keeping
track
track
of
of
the
the
loading
loading
state,
state
very
very
similar
similar
to
to
React
react
Suspense
suspense
if
if
you're
you're
familiar
familiar
with
with
that.
that
So
so
we'll
we'll
use
use
the
the
loading
loading
slot
slot
2
2
show
show
a
a
loading
loading
spinner
spinner
before
before
the
the
collection
collection
is
is
actually
actually
loaded.
loaded
From
from
there,
there
we'll
we'll
go
go
ahead
ahead
and
and
set
set
up
up
a
a
couple
couple
of
of
buttons
buttons
that
that
can
can
run
run
our
our
previous
previous
page
page
and
and
next
next
page
page
functions.
functions
To
to
go
go
to
to
the
the
previous
previous
page,
page
we
we
need
need
to
to
grab
grab
the
the
first
first
element
element
from
from
the
the
current
current
query.
query
To
to
go
go
to
to
the
the
next
next
page,
page
we
we
need
need
the
the
last
last
element
element
in
in
the
the
current
current
query.
query
Normally,
normally
we
we
would
would
need
need
do
do
write
write
some
some
extra
extra
JavaScript
javascript
to
to
calculate
calculate
these
these
values.
values
But
but
in
in
Sveltefire,
sveltefire
they're
they're
made
made
available
available
as
as
slot
slot
props.
props
So
so
we
we
simply
simply
say
say
let
let
first,
first
let
let
last,
last
and
and
as
as
you
you
might
might
imagine,
imagine
that
that
gives
gives
us
us
access
access
to
to
the
the
first
first
and
and
last
last
documents
documents
in
in
the
the
collection.
collection
And
and
that's
that's
all
all
there
there
is
is
to
to
it.
it
We're
we're
now
now
running
running
a
a
paginated
paginated
uQuery
uquery
and
and
Firestore
firestore
that
that
can
can
go
go
in
in
both
both
a
a
forward
forward
direction
direction
and
and
a
a
reverse
reverse
direction.
direction
But
but
before
before
we
we
wrap
wrap
up
up
the
the
video,
video
I
i
do
do
want
want
to
to
talk
talk
about
about
some
some
of
of
the
the
limitations
limitations
with
with
pagination
pagination
in
in
Firestore.
firestore
The
the
biggest
biggest
one
one
in
in
my
my
opinion
opinion
is
is
splitting
splitting
your
your
data
data
into
into
a
a
discrete
discrete
number
number
of
of
pages.
pages
If
if
you
you
want
want
to
to
show
show
a
a
number
number
of
of
pages
pages
and
and
have
have
the
the
user
user
navigate
navigate
to
to
a
a
specific
specific
page,
page
it's
it's
really
really
just
just
not
not
possible
possible
in
in
Firestore,
firestore
at
at
least
least
not
not
out
out
of
of
the
the
box.
box
If
if
you
you
really
really
need
need
a
a
feature
feature
like
like
this,
this
it
it
is
is
possible
possible
using
using
a
a
Cloud
cloud
Function
function
to
to
aggregate
aggregate
your
your
data
data
on
on
the
the
back
back
end
end
when
when
it's
it's
created.
created
I
i
have
have
a
a
snippet
snippet
on
on
Fireship
fireship
IO
io
that
that
shows
shows
you
you
how
how
to
to
do
do
this,
this
so
so
check
check
that
that
out
out
if
if
you
you
really
really
need
need
it.
it
And
and
also,
also
you
you
can
can
use
use
an
an
that
that
operator,
operator
but
but
it's
it's
only
only
available
available
on
on
the
the
Admin
admin
SDK
sdk
for
for
Node.
node
Js.
js
So
so
that
that
could
could
be
be
very
very
useful
useful
as
as
well,
well
but,
but
again,
again
only
only
works
works
on
on
the
the
server.
server
Now
now
the
the
next
next
thing
thing
I
i
want
want
to
to
point
point
out
out
is
is
not
not
really
really
a
a
limitation,
limitation
but
but
more
more
of
of
a
a
caveat
caveat
that
that
you
you
should
should
be
be
aware
aware
of.
of
If
if
your
your
data
data
changes
changes
frequently,
frequently
you
you
might
might
get
get
unexpected
unexpected
results
results
in
in
your
your
paginated
paginated
queries.
queries
For
for
example,
example
if
if
the
the
user
user
is
is
on
on
a
a
given
given
page
page
and
and
then
then
you
you
add
add
a
a
new
new
document
document
to
to
the
the
collection,
collection
it
it
could
could
change
change
the
the
results
results
on
on
that
that
page.
page
So
so
the
the
data
data
would
would
jump
jump
around
around
instantly,
instantly
which
which
would
would
be
be
a
a
weird
weird
behavior.
behavior
Then
then
if
if
they
they
click
click
back
back
to
to
the
the
previous
previous
page,
page
they'll
they'll
get
get
a
a
different
different
set
set
of
of
results
results
than
than
they
they
saw
saw
originally.
originally
So
so
the
the
bottom
bottom
line
line
here
here
is
is
that
that
pagination
pagination
is
is
most
most
well
well
suited
suited
for
for
collections
collections
that
that
don't
don't
change
change
frequently
frequently
and
and
that
that
are
are
not
not
real
real
time.
time
This
this
is
is
especially
especially
true
true
if
if
you
you
do
do
something
something
like
like
infinite
infinite
scroll,
scroll
which
which
is
is
just
just
a
a
fancy
fancy
way
way
to
to
do
do
pagination,
pagination
because
because
you
you
generally
generally
don't
don't
want
want
the
the
position
position
of
of
results
results
to
to
change
change
after
after
they
they
were
were
loaded
loaded
in
in
initially.
initially
Unique.
unique
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
make
make
sure
sure
to
to
use
use
the
the
discount
discount
code
code
before
before
it
it
expires
expires
on
on
Friday.
friday
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The speakers discuss the use of limitTo freight and Svelte Fire in creating efficient data collection processes. They explain the four steps involved in implementing the method, including setting up a query and accessing data from collections, documents, and user authentication. They also discuss the limitations of using the Cloud function in Fir Teng, including the need for a variable and a loading slot, and recommend using it for collections that don't change frequently and are not real time.
Firestore Pagination - It Just Got Easier
Firebase recently released a new query method called limitToLast. It's available in version 7.3 or greater of the JavaScript SDK. And in today's video, I'll show you exactly why it's so useful by implementing a pagination feature with Firestore. If you're new here, like and subscribe, and check out a discount code in the description below for Black Friday. It's active now, so feel free to use that if you want to become a Pro member. You'll get access to the Firestore Data Modeling course along with a bunch of other advanced Firebase content. For today's video, let's start by talking about the problem that we're trying to solve. You may have a large collection of data that you want you to show to the user in batches. Or in other words, you want to split your data into a discrete set of pages and allow the user to click through those pages. If you've ever tried to implement pagination in Firestore in the past, you might know that it's pretty easy to go in a forward direction, but going backwards to a previous page was not so easy. You'd have to follow these 4 steps, which just isn't very intuitive for something that you would think would be relatively easy. Well, I have some good news for you. The Limit to Last method makes this process much easier. It's similar to the existing limit method, but instead of limiting to the first end results, it limits to the last end results. Over the next few minutes, we'll look at the implementation details from scratch, but I first want to show you the query functions that make this possible. And make sure to stay tuned until the end of the video because I'm going to discuss some of the limitations of pagination in Firestore in useful. For this demo, we'll be using Svelte along with a new library that I wrote called Svelte Fire. The pagination queries and principles apply to all frameworks across all programming languages. But as you'll see in a few minutes, Svelte Fire provides some special magic to make pagination even easier. But I know not everybody's using Svelte yet, so let's start by just focusing on the queries that we need to make for pagination to work. The first thing you'll need to do is make an initial query on your collection. It needs to be ordered by a certain field and should be limited to a specific page size. So that's pretty straightforward, but when you want to navigate to the use page, you need to offset by the last result in that first page. This is pretty straightforward and uses query methods that have been available on Firestore from day 1. So here we have a function called nextPage, which takes the last document from the first query. It orders by the same field, it uses the start after method, which will offset from that value. So you'll start after the field value from the last document by the same field that you're ordering by, and it should limit by the same value as well. Now let's say the user hits the next button a few times, but now they want to navigate back to the previous page. In that case, we want to grab the 1st document on the most recent query. In this case, we'll offset using the end before method. You and finally, that's where limit to last comes in. That will give us the results that we're seeing on the previous page, giving us a full forward and backward pagination system. Now let's take a minute to look at the full implementation details in Svelte. The first thing we'll do is install Svelte Fire. And, again, this is a library that I wrote, and I'm very excited about it because it unlocks some UI patterns in Firebase that are really awesome. And if you want to see more videos about Svelte, let me know in the comments because I would be more than happy to make them. The first thing we'll do is install Svelte Fire. It provides several components that allow you to access data from collections, documents, and user authentication. Then we'll initialize our Firebase app in the app component and use the Firebase app component from Svelte Fire to set up the context. From there, I'll set up a couple of properties on the component. The page size will be 3, and the field that we want to order by is the username. From there, I'll simply paste in the query code that I showed you earlier. The only difference is that the query is now a function, and the reason we do this is because Svelte is reactive. So anytime we change this function, it will update the query that we send to Firestore and update the data in the UI. So now we'll go back into the UI, and we'll set up a collection by using the collection component from Svelte Fire, and we'll give it a path of customers, which will read the customer's collection. Then we'll pass in our query function as a property to that component. And, again, whenever the query function changes, it will re execute the request to Firestore. You now here's where Svelte gets really awesome because it has this thing called slot props. It allows me as a library author to create a variable in the template called data. That is the data that is unwrapped from this collection. When the data has actually loaded, we can go ahead and loop over it and show the customer username, the ID, and their avatar image. You Under the hood, Svelte Fire is also keeping track of the loading state, very similar to React Suspense if you're familiar with that. So we'll use the loading slot 2 show a loading spinner before the collection is actually loaded. From there, we'll go ahead and set up a couple of buttons that can run our previous page and next page functions. To go to the previous page, we need to grab the first element from the current query. To go to the next page, we need the last element in the current query. Normally, we would need do write some extra JavaScript to calculate these values. But in Sveltefire, they're made available as slot props. So we simply say let first, let last, and as you might imagine, that gives us access to the first and last documents in the collection. And that's all there is to it. We're now running a paginated uQuery and Firestore that can go in both a forward direction and a reverse direction. But before we wrap up the video, I do want to talk about some of the limitations with pagination in Firestore. The biggest one in my opinion is splitting your data into a discrete number of pages. If you want to show a number of pages and have the user navigate to a specific page, it's really just not possible in Firestore, at least not out of the box. If you really need a feature like this, it is possible using a Cloud Function to aggregate your data on the back end when it's created. I have a snippet on Fireship IO that shows you how to do this, so check that out if you really need it. And also, you can use an that operator, but it's only available on the Admin SDK for Node. Js. So that could be very useful as well, but, again, only works on the server. Now the next thing I want to point out is not really a limitation, but more of a caveat that you should be aware of. If your data changes frequently, you might get unexpected results in your paginated queries. For example, if the user is on a given page and then you add a new document to the collection, it could change the results on that page. So the data would jump around instantly, which would be a weird behavior. Then if they click back to the previous page, they'll get a different set of results than they saw originally. So the bottom line here is that pagination is most well suited for collections that don't change frequently and that are not real time. This is especially true if you do something like infinite scroll, which is just a fancy way to do pagination, because you generally don't want the position of results to change after they were loaded in initially. Unique. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to use the discount code before it expires on Friday. Thanks for watching, and I will talk to you soon.
The speakers discuss the use of limitTo freight and Svelte Fire in creating efficient data collection processes. They explain the four steps involved in implementing the method, including setting up a query and accessing data from collections, documents, and user authentication. They also discuss the limitations of using the Cloud function in Fir Teng, including the need for a variable and a loading slot, and recommend using it for collections that don't change frequently and are not real time.