question(query): how to implement infinite scroll

[SenikFarsyan]

Hi everyone. I use firebaseConnect(['Posts]), but i want to imlement lasy loading or infinite scroll, to load posts not all at once just part by part. Can somebody help me to figure out?

[prescottprue]

You may want to try using limitTo on your query to control the group size, then add something like react-waypoint and use it to trigger manual queries. So something like attaching the listener in onEnter and detaching it on onLeave.

Though I haven't personally done it with Firebase, I have worked on projects that have done it with other data systems. This actually might also make a nice example, so reach out if you get something working.

[olivertuckwebdev]

@prescottprue would it be possible to have the listener set up like firebaseConnect(query) and then have query pointing to a query object where you can manually increase the limit upon scrolling? Or would this keep doing a re-fetch of all of the previous records as well? I'm a bit confused about the best way to go about this even with your answer

[harveychow]

I've struggled with this as well. I eventually fixed this by using firestoreConnect. Then in my FlatList onEndReached I copy the firestore state to the local state. And finally append the new firestore.get() to the local state like so:

// Copy initial firestore statet to local state
if (this.state.posts.length === 0) {
  this.setState({ posts: this.getPosts() });
}

// Don't retrieve if it's already refreshing
if (this.state.refreshing === true) return;

console.log("Retrieving additional Data");
this.setState({ refreshing: true });

const postKeys: Array<string> = Object.keys(this.props.posts);
const lastVisibleKey: string = postKeys[postKeys.length - 1];
const lastVisiblePost = this.props.posts[lastVisibleKey];
// console.log('Last Visible Post', lastVisiblePost);

await this.props.firestore.get({
  collection,
  limit,
  orderBy,
  startAfter: lastVisiblePost.createdAt,
  populates,
});

if (this.getPosts() !== null && this.getPosts().length) {
  this.setState({
    posts: [...this.state.posts, ...this.getPosts()],
    refreshing: false,
  });
}

Note: getPosts converts the firestore object to an array for FlatList