Firestore Pagination - It Just Got Easier

[@Grummpyro]

Wish u had released this a week ago, I recently finished pagination for my site. Thank you for the videos, they are very helpful without your video my life would much more difficult.

[@Fireship]

Dang, I planed on this video last week but didn't finish it in time.

[@omargamal2147]

YES MORE SVELTE 🔥 This channel is the best , thanks Jeff .

[@AurelHavetta]

Yes, please more of svelte, we are migrating to Svelte, cause our team saw your videos about it.

[@patrickmullot73]

'startAfter' is great. 'after' is also quite powerful but be careful because you get charged for all the reads, not just the ones you actually get. For instance, if you write "after(1000).limit(1)" , you get charged by 1.000 + 1 reads, not just 1.

[@ebonilha]

Well, offset-based pagination will always re-read all previous documents. As Firestore bills per-read, that's a dangerous way to go. Cursor-based pagination would be preferred

[@tech3425]

Really needed this, thanks! You're the one who really sold me on firebase

[@ptone805]

Very interested to see how you are making the most of svelte without the benefits of typescript

[@headphonejackd]

Definitely interested in more videos on the most promising framework from the best front end KZbinr! A deep dive on svelte would be awesome.

[@duanehodges3146]

Great tutorial as usual. Quick question...when you say we have to supply the document as a reference point when we're paginating are we supplying the entire document or just the document ID?

[@guilhermealberto7209]

A starting point was already set (by another call to `startAt`, `startAfter`, or `equalTo`)

[@bensonmwaura9494]

You've pushed some stellar content throughout the year! Always a channel to look forward to 🔥. Kindly consider demonstrating how to deploy a Svelte/Sapper on Firebase Hosting with Skeleton Screen implementation for minimal UI as an alternative to spinning loaders. Thanks!😎

[@murunwascengy2762]

Svelte Svelte Svelte Svelte Svelte Svelte 🔥🔥 every day any day

[@escoladejesusnafreguesiado3319]

Very Nice, How about jump page? if i'm on page 3, and want to go to page 6. How do i do that?

[@ProgrammingwithPeter]

You make it look easy! But yes, their sdk is great and easy to use!

[@dma6967]

Please, can you explain how to do Firestore pagination in Flutter?!

[@Fireship]

The logic and process is the same, just a slightly different API for making queries dart.

[@IssaLafi]

After a long time of learning angular you change to svelte 🤨 come on

[@hojdog]

After a long time of learning angular you should be able to convert. Why should he code examples in the most difficult to read, least popular framework?

[@abdoufma]

He did ONE video using svelte as an example because he thinks it's cool, and that's how people react? Jeez! A man is allowed to be interested in many technologies, you know?

[@Fireship]

Nothing against Angular, I still use it on Fireship.io. Svelte just provides some really nice UI patterns for Firebase that I can't ignore.

[@mycloudvip]

I've got to CONGRATULATE you for your content! I signed up to a course on React Native with you a while ago. Where can I get the most content at the best price? Is basic support included while taking the courses? Stay SAFE

[@nicolapigozzo]

Is it possible to add the pages numbers with this method??

[@dependersethi1345]

♥️ as always

[@Fireship]

Thank you!

[@troythompson2]

Was just about to do this.. CLUTCH

[@Alcaatraz01]

Would you say that this is why reddit moved away from paginated results for subreddits to infinite scroll? Obviously they managed to guarantee the same posts for a given page number by keeping track of the first and last ids but that meant you could only see the newest posts by going to the home page for the subreddit. Do you think that is an acceptable solution or confusing for the user? I recently had to implement that legacy reddit pagination system but wondered if it's not the best approach. Maybe combining the legacy reddit pagination with the twitter style notification at the top of the list of new posts being available... any thoughts?

[@Alcaatraz01]

Also thanks for the awesome video again!

[@BeastinlosersHD]

Infinite pagination is good for keeping users hooked! Maybe you can have two tabs, one for new, with infinite scroll of most recent, similar to most websites. However, I am really intrigued by the UI choice of having two sections, one with new, constantly updating feed at the top, or side, and another section that has the reddit style + pagination. Just consider them two different websites/widgets and put them together on one page. Is this for a work project or a hobby project, I'm curious how it would come out!

[@Alcaatraz01]

@@BeastinlosersHD Hi there! It's a hobby project for a game I play that basically aggregates posts from a subreddit and the most popular discord servers (for this game's community) in realtime. I basically add much requested features on top of the aggregation such as filtering and the ability to create posts directly in the app. So basically with multiple highly active sources of incoming posts I had to settle on some sort of pagination solution. Infinite scroll is cool but I'm a huge fanatic of state management so being able to restore the state of the app as close to exact on a refresh is crucial. Infinite scroll would make that awkward in my mind... you'd sort of have to force the scroll to render down to where the user left off.

[@aytunch]

Hi this limitToLast is great but I can not find it in Cloud Functions. Is it only available in client libraries?

[@sepehrazizi1491]

does svelte really worth learning? i think angular still is the better choice

[@zeeshaanmaudarbocus6827]

how come you don't need to call `.get().then()` on the queries? If not using Svelte, am i not supposed to call .get on the queries? Anybody?

[@ninjachickn]

I would be very interested in seeing more Svelte videos going forward.

[@anujkrsingh]

Learn a lot.Thank you

[@jacksontong6873]

I've followed your method to aggregate the number of pages on backend with Cloud function. How do I fetch the data for specific page with javascript SDK?

[@anton-shubin-live]

Hello Jeff! I have a question about .limitToLast(n) and Firestore Pricing. Does Firestore count skipped documents as READs? (like Node.js admin-sdk's .offset(n) does)

[@abdoufma]

I would assume so, since "after(x).limit(n)" also counts as x+n reads

[@hojdog]

I would love AWS tutorials!

[@kjvelarde]

SVELTE 🤘

[@nosknut]

PLease make a video on infinite scroll with firebase and react!

[@beeferplus]

Did the same feature release for Android platform?

[@pilearn1266]

if you can help the nuxt team to implement the new firebase v9 will be great!

[@moseskarunia]

Svelte is 🔥

[@Eduardo-ld5us]

You should do with ReactJS examples :(

[@SolidousMdz]

Exactly, sadly this didnt help me at all. Having to discover how to figure out the first and last by hand sucks.

[@rubenheymans1988]

Can you do more angularfire2 please?

[@Fireship]

Yes, they just shipped a bunch of new features. It's always on my list.

[@kameshvadivel9459]

Hello sir,how can I get scrollable tab bar like what's app in flutter???

[@diyvideos9737]

Gread tut it saved my ass

[@tranquillityEnthusiast]

@Jeff Delaney what's your thought on flutter web??....

[@Fireship]

I need to play around with the latest version. It's cool, but most well suited for specific types of apps. I'm more excited about the potential of Flutter desktop.

[@tranquillityEnthusiast]

@@Fireship I hope I see a vedio on CI/CD of flutter very soon...

[@metalllus]

I wish we had limitToLast in angularfire...

[@abdoufma]

Euuuh, you do? It's available as a part of the JS SDK, it's one of the first things Jeff said in the video(0:04)

[@metalllus]

@@abdoufma maybe I am doing something wrong but if I query with an injected AngularFirestore service, I do not seem to have the option, the only option available is 'limit', eg. this.db.collection('A', ref => ref .where(something) .limit(10))

[@metalllus]

@@helloworld7826 nope, i'm using angular/fire 5.2.3 and it's not available there.

[@ttbooster]

does svelte work within an Angular project?

[@not2day646]

No. Svelte is its own js framework

[@alexzaporozhets8121]

+1 for more videos about Svelte

[@BeastinlosersHD]

*No views* also *has comments*

[@Fireship]

Looks like a few people decided to watch now ;)

[@St0rMsk]

Why the hell does this not work on my code? :D

[@jrdnrc]

nice

[@vespertilian]

Discount code did not work :(

[@blue_mustang_]

Don't forget to generate both queries in firebase.Because otherwise won't work.I was struggling with that becuase I forgot

[@mantasreika]

wish this was only JS example.

[@out_fur_blood]

Unless a framework is backed by a big company, I am not going to bother. I a tired of learning the new shiny thing, and then in real life nobody hires you for it.

[@ricko13]

Damn! Firestore must do better

[@bitp]

First :)

[@Fireship]

Silver 🥈

[@divinedela9125]

1st

[@Fireship]

Gold 🥇