Infinite Query - Polling Next Page

[anatolzak]

I am using useInfiniteQuery to create a chat app with bi-directional cursor pagination. Fetching the previous page will get older messages and fetching the next page should get newer messages.

Currently, what I do to achieve this is to call fetchNextPage every interval inside useEffect. Additionally, the server accepts a cursor and a direction ('forward' | 'backward'), and if no items are found, the cursor returned by the server matches the provided request cursor to allow react query to continuously fetch the next page without hasNextPage turning false.

My current strategy works, however, it adds a new empty page entry to the pages array every time the client fetches the next page without new items being returned by the server. This seems inefficient memory wise.

I was wondering if there is a better way to achieve this "next-page polling" while still keeping complexity low.

[TkDodo]

you should only fetch when hasNextPage / hasPreviousPage is true. That flag is determined by whatever getNextPageParam / getPreviousPageParam returns. So there, you should return undefined to indicate that there is no next page. So ideally, each response contains some info if there is more data to be fetched or not.

[TkDodo]

I'd expect a chat application to push new messages to the client :)

[anatolzak]

Not necessarily though. Sometimes one may prefer using polling instead of websockets, and in the case of polling, there is not a good solution for polling next page when using infinite query

[TkDodo]

yeah agree; polling infinite queries will lead to refetching all pages with refetchInterval, but fetchNextPage in a loop is not really meant for that either; returning an "empty" entry from there is a good middle ground, though I agree it will add empty pages in between (that you could remove with setQueryData forexample)

[anatolzak]

@TkDodo I feel like there should be a better solution than to have to manually remove empty entries using setQueryData . I believe "polling" for the next page should be supported out of the box. What are your thoughts?

[TkDodo]

I already said I don't think so. chat applications without pushing messages from the server are not the primary use-case, and to make it work, there are enough workarounds you can apply.

[see2ever]

maybe you could just return Promise.reject() if next page is empty?