Range Queries & Cursoring Pagination

[00:00:00]
>> All right, so with range queries, this allows you to paginate through results. And so this, you have the startAt. And so in this case, we're back at expenses again. And we're ordering by date, cuz when you're doing ranges, or cursors, you need to know what you're ordering by.

[00:00:19]
And we can actually startAt the first of the year, and then limit to the last ten items. And so what this will do is it will actually, in a way, maybe do the opposite of what you would think. Is that it would start at the beginning of the year, but let's say we're all the way up to the 31st today.

[00:00:37]
So any expenses it would have, it would the last ten from today back, because it's the last one. So startAT is a way for you to order by something, and then curse your way through it. And then we also have the ability to combine it with startingAt and endingAt.

[00:00:55]
And you can still limit within that range, so this one orders by date again. It starts at the first of the year, but it ends at the first of February, and then we get the last ten of February. So that helps us figure out ranges, but how do we move within those ranges?

[00:01:15]
Well, from this query, we are doing the same thing where we're ordering by date. We're starting at the first of the year and then ending at the first of February, limiting the last ten. And imagine that later on the line, you click a button to get the next page, so increasing the window.

[00:01:33]
What you would do is, I'm only getting this. This is a one time get, which is why you see await. We have a method called getDocs. If you don't wanna do real-time updates, allows you to get all your information one time. This gets back my data. Normally, I would actually have this within the initial query.

[00:01:51]
And then I would save that last document, or the first document, in this case. And I get this docs, which by the way, this is a newcomer to JavaScript, the at method, it's so cool. You get at an index in an array no more like array brackets, just, I don't know.

[00:02:06]
I discovered this the other week, and I'm just trying to spread the joy. So the at operator and your arrays, it's new, it's great, it's awesome. But then we get the first document of that query, and then now we can say startAt the beginning of the year, just like we're doing up here.

[00:02:22]
But moving the array, we can end before the first doc. So now that first ten we had, they're gone, and now we have moved on to the next ten using that document. So as you're cursing through or paging through results, this is how you create all these pages.

[00:02:38]
Is that you keep track of where you are, what was the first, or what was the last, depending on your query on the document, and you pass that to one of the range functions. And then that way, Firestore's smart enough to say, okay, I'm gonna get all the documents beyond this way.

[00:02:52]
And this is actually exactly what we do in the Firestore console, or in the emulator when you see us just scroll through. We are listening to scroll events, and we're saying, you're about to hit a scroll point, so let's change the window. So that's how we can keep all of your data kind of rendering in the browser.

[00:03:14]
So let's go through and work on that. So this is back to the same page, same app, that is. I'm gonna go to ranges and cursory, and there's nothing there right now, and go into ranges and cursoring. So first one, always easy, get the first 20 categories that are in 2022.

[00:03:35]
So you could do this with greater than or equal to on a wearable. We're gonna do this on a range now. So I'm gonna say where, I started where, I'm sorry, where, I just said don't do it where, I'm gonna first say orderBy. And we got reversed 20 categories in 2022.

[00:03:52]
Why did I say categories? Expenses, that's what I wanna say, expenses. So we're gonna say orderBy(dat), and we're going to say startAt(new Date(1/1/2022) and limit to, not limit to, limit(20). And make sure you always include the collection. I do this all the time, I always forget the collection.

[00:04:32]
All right, so this starts at 1/1, and as I scroll through, goes only down to 1/2. So all right, we're cursing through that. And so now, this one's a little more complicated. Break that up. I get the first 20 expenses that contain the category of transportation or housing, and that costs between 100 and 120.

[00:05:04]
So to do that, I can say, all right, what do I want to order by? And then I'm gonna order by cost, in this case, because I'm ranging in between these two. So I can say orderBy(cost), and I'll say start at 100, end at 120. And we can still do other queries on this as well.

[00:05:27]
So I can still use where, and I can say where('categories') is, what is it, 'array-contains-any', of, let's copy this, transportation, or housing. And what's the limit? Limit the first 20. What did I do wrong here? I probably did the same thing again, didn't I? Start, startAt. And I still need the collection, keep forgetting that.

[00:06:10]
All right, So our categories had transportation or housing. We started at 100, and we're just doing the first 20, but we would stop at 120. Now, I'm gonna skip to this complicated one. I'm gonna skip over this third one, cuz it's more or less the same of what we've been doing.

[00:06:32]
What we're gonna to focus on is we're going to get the first ten expenses that contain the category of food, fun, kids. Food, fun, or kids, it should be written, that cost between 120, and then we're going to get the next 10. So we're going to orderBy('cost'), startAt, what was it, 100.

[00:07:06]
EndAt(120), And then we can say where('categories', 'array-contains-any', ['Food', 'fun', or 'kids']), And limit to the first 10. So this will go out, and let's pretend we click some button or something, we'll get the results. We'll grab the last document, and then from here, we can do more or less the same, except we want to start at the last doc.

[00:07:50]
expensesCol always needs to be put in there, same up here. And so now, this is the ten to kinda show it for a fact, this should probably be my console.log, consol.log = results.docs., my gosh, docs.map(d.data), just to kinda show what happened. You can see we get our first array of these ones, and then it goes on to the next array as well, so we're able to page through.