How to keep updated a rendered query dynamically

Question

In the old days I used to limit any query expected to be big into smaller chunks. These would be rendered into different pages and any outdated info solved with a manual reload.

Now I want to have two features:

1. Infinite scroll
2. Update current view with newer background updates

I am somehow lost about how to keep the UI updated without a full reload.

Assume I've just rendered my first 50 query results. The user scrolls down to row 40 and I must fetch more. However after some time, the old slice 51-100 might start now at 43, or maybe 54. I want to dynamically fuse more data into the current view (and animate background insertions/deletions).

My first approach would be fetching a bigger just id array (0-100) to calculate all insertion and deletion points of new elements for my old query result. Then I could calculate the starting position of the new slice I want to fetch, but this might be already outdated after after all the calculations :-(

Which one is the common solution or pattern used to solve this problem?