Detecting empty data in Angular/RxJS infinite scroll: Best approach?
Closed this issue · 4 comments
Which @ngneat/query-* package(s) are the source of the bug?
query
Is this a regression?
No
Description
I've created a code example for infinite scrolling.
However, I'm unsure how to determine when there is no data available, meaning there are no results.
Initially, I updated it to be empty: observer.next({ data: [], nextId: null, previousId: null });
Now, I want to display "it's empty" in the UI. I tried checking the pages property, but even when there's no data, it shows a length of 1.
Is there a better way to determine if the data is empty than going to the first index and checking the data?
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/stackblitz-starters-kuxqvm
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in
No response
Anything else?
No response
Do you want to create a pull request?
Yes
I think putting @empty on the inner @for loop would have the desired output.
You push { data: [], nextId: null, previousId: null } which in turn signals tanstack query, that there is only this one page (no prev. page and no next page), hence the one result you get.
...
@for (page of result.data.pages; track $index) {
@for (post of page.data; track $index) {
...The outer for loop carries the pages it has fetched so far and accordingly re-renders them too. The inner one is for rendering their contents, thus why i said that placing an @empty block would probably give you the desired result.
but what if i don't have @empty? unfortunately i don't use control flow in my angular syntax.
then check the length property inside the first for loop