Populating UITableView from Firestore with query cursors (paging) - swift

Question

I have a UITableView subclass that I am populating from a Firestore collection. I only grab 20 documents at a time, and use the UITableViewDataSourcePrefetching delegate to get the next "page" of 20 documents from Firestore when the user nears the end of the loaded array.
The following is my code that almost perfectly achieves this, omitting/obfuscating where appropriate.
class MyCustomViewController: UIViewController {
#IBOutlet weak var myCustomTableView: MyCustomTableView!
override func viewDidLoad() {
super.viewDidLoad()
myCustomTableView.query = Firestore.firestore().collection("MyCollection").whereField("foo", isEqualTo: "bar").order(by: "timestamp", descending: true)
myCustomTableView.fetchNextPage()
}
}
extension MyCustomViewController: UITableViewDataSourcePrefetching {
func tableView(_ tableView: UITableView, prefetchRowsAt indexPaths: [IndexPath]) {
guard let tableView = tableView as? MyCustomTableView else {
return
}
tableView.prefetch(indexPaths: indexPaths)
}
}
class MyCustomTableView: UITableView {
var documents = [DocumentSnapshot]()
var query: Query?
let querySize = 20
private var fetchSemaphore = DispatchSemaphore(value: 1)
public func prefetch(indexPaths: [IndexPath]) {
for indexPath in indexPaths {
if indexPath.section >= documents.count - 1 {
fetchNextPage()
return
}
}
}
public func fetchNextPage() {
guard let query = query else {
return
}
guard documents.count % querySize == 0 else {
print("No further pages to fetch.")
return
}
guard fetchSemaphore.wait(timeout: .now()) == .success else { return }
if self.documents.isEmpty {
query.limit(to: querySize).addSnapshotListener { (snapshot, error) in
guard let snapshot = snapshot else {
return
}
self.documents.append(contentsOf: snapshot.documents)
self.reloadData()
self.fetchSemaphore.signal()
}
}
else {
// I think the problem is on this next line
query.limit(to: querySize).start(afterDocument: documents.last!).addSnapshotListener { (snapshot, error) in
guard let snapshot = snapshot else {
return
}
for document in snapshot.documents {
if let index = self.documents.firstIndex(where: { $0.documentID == document.documentID }) {
self.documents[index] = document
}
else {
self.documents.append(document)
}
}
self.reloadData()
self.fetchSemaphore.signal()
}
}
}
}
I think I know what/where the problem is (see comment in fetchNextPage()), but I may be wrong. Even if I am correct, I have not been able to come up with a way to fix it.
My query is sorted, in descending order, by the documents' timestamp value which, as the name suggests, represents the time at which the document was created. This means that, in the table view, the newest documents will appear at the top, and the oldest at the bottom.
Everything works great, except for...
The problem: When a new document is created, every item in the table gets shunted down a row because the new document has the newest timestamp and gets placed at the top. Great, except that when this happens, all of the query snapshot listeners (except for the first one) are no longer using the correct document to start after. The document snapshot originally retrieved with documents.last! is no longer the correct document that the query should start after. I do not know how to change the startAfter parameter of an existing snapshot listener. I could not find any method belonging to the query that I could use to alter this.
Again, this might not actually be the reason I'm seeing things out of order when new documents are added, but I think it is. If anyone has advice for how to resolve this I'd greatly appreciate it.
References I have used to get here:
https://firebase.google.com/docs/firestore/query-data/query-cursors
https://www.raywenderlich.com/5786-uitableview-infinite-scrolling-tutorial
Additional notes:
Even though it'd be much easier and solve this problem, I do not want to use getDocuments on the query. Having the near-real-time updates is important in this case.
I cannot use FirebaseUI because my use-case requires functionality not yet available. For example, you may have noticed that I used indexPath.section instead of indexPath.row, which is because the table is made up of many single-rowed sections so that vertical padding can be put between cells.