hasNextPage is not revalidated on route change

[rokaskasperavicius]

Hi,

I am building a tiny calendar site and decided to learn and use react-query to hold data. However, trying to implement useInfiniteQuery for infinity scrolling, I ran into a problem and I am not sure this is a bug or my mistake.

I have a small set-up with useInfiniteQuery where the keys are (['calendar', year, month]). This has two variables (year and month) which change upon different query in the route (I use react-router for it). At the bottom there is a Loader which observes scrolling and fetches new pages for that month and year on every scroll.

Everything was working perfectly until I tried fetching half of my database for a specific month, going to the next month and then going back to the month I had started with. At first, data is taken out of the cache, as expected, then I transform the data and show it on my website. The issue here is that when I scroll through half of my data, the loader is not shown at the bottom. Let me mention that my loader is shown if the variable "hasNextPage" is true. But, hasNextPage is not revalidated and when it loads data from the cache and doesn't fetch (like on the first site load), the "hasNextPage" is false and I can't access the other half of my data for that specific month and year.

I tried searching for a similar problem but I haven't succeeded yet. I saw that there is an InfiniteQueryObserver and I tried using it without any luck. Unless I don't know how to properly use it. Though, I couldn't find any examples on the official react-query site.

One of the solutions I have come up with is to refetch the data on useEffect when the queries in the route change. This works but, in my opinion, this removes the best part about react-query because every time the data is "stale" and it has to be fetched from the database.

I know that I am probably missing a simple solution and maybe somebody could help my with this.

Any help will be appreciated :)

Ps: I could try to paste the code if needed but for now it is a bit messy because I am learning a lot of things and experimenting with them.

react-query: 3.6.0
node: 14.15.1
npm: 14.15.1
react: 17.0.1
react-router-dom: 5.2.0