I have a "My Chats" screen with a "ChatList" component in my web app.
Each "ChatListItem" has the user avatar, the date of the last message, the content of the last message (which can be deleted) etc.
It is represented like this in my DB
ChatRoom doc = {
lastMessage: {
date,
content,
senderId
},
members: {id1: { username, avatar }, id2: { username, avatar }},
membersIds: [id1, id2],
read: false,
}
And stored on Firestore following this NoSQL structure:
/
chatsCollection/
chatDoc1
chatDoc2
...
This is how I am listening all the current user chats:
export function listenMyChats(limitToLast, onNext, onError) {
const currentUserId = getCurrentUser().uid;
const query = firestore
.collection("chats")
.where("membersIds", "array-contains", currentUserId)
.orderBy("lastMessage.date", "asc");
return query.limitToLast(limitToLast).onSnapshot(onNext, onError);
}
If I limit the listener results to 20, then it will be not possible to handle the changes of for example, the 80th item of my ChatList.
Imagine that the other user deletes the last message he sent, updating the chatroom doc data to:
ChatRoom doc = {
lastMessage: {
date, <---- DATE HAS NOT CHANGED!
deleted: true, <-----
senderId
},
members: {id1: { username, avatar }, id2: { username, avatar }},
membersIds: [id1, id2],
read: false,
}
As you can see, the last message's date has not changed, and I am listening the 20 first items ordered by the last message's date.
This will cause a problem. If the doc is in the 21st position of my ChatList, I will not be able to update the GUI with the respective new data, as the listener will not detect any changes.
I have thought to combine the listener with a pull-to-refresh system inside the "My Chats" screen. But, is there any other approach to handle all the items without deleting the limitToLast(20)?
The issue probably is that you are trying to model your data in a different way from how Firestore is designed.
you are treating documents which come through the listener as events. But in fact what you should do is construct a query which shows exactly what data you want to see in the UI, e.g. the most recent 20 chats which aren't deleted.
The Firestore SDK will then tell you whenever the set of documents matched by the query changes. Then you need to update the UI to match the new set of documents in the watch list. If a chat is deleted, the Firestore SDK will still let you know because it tracks documents disappearing from the query results, and documents appearing.
Another option, perhaps more similar to what you are doing now, would be to have actual events stored in a collection somewhere. A deletion event would include the timestamp at which it was deleted, so you can be confident that looking at the most recent documents will be likely to include the changes you are interested in.
For more information related to “firestore infinite scroll” you can refer to the stackoverflow case and document where a brief description about the infinite scroll has been mentioned and how you can do it in your application.