Detecting empty data in Angular/RxJS infinite scroll: Best approach?

[jon9090]

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

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• stackblitz-starters-kuxqvm (Open reproduction)

[luii]

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.

[jon9090]

but what if i don't have @empty? unfortunately i don't use control flow in my angular syntax.

[luii]

then check the length property inside the first for loop