infiniteQuery continues to refetch data even if there are no more observers

[Khufu-I]

Describe the bug
infiniteQuery continues to iterate and fetch all pages even after there are no more observers to consume the data. If the infiniteQuery contains a large set of pages (i.e. 100) this causes unnecessary network load and keeps references to variables for a long time.

To Reproduce
Steps to reproduce the behavior:
Open sample in CodeSandbox

1. Allow all pages to finish loading (up to 15 pages).
2. Open Console tab (bottom right) in CodeSandbox or browser console
3. Sample app will print Fetched page every time an API call is simulated
4. Click on Toggle button to unmount the component which calls useInfiniteQuery
5. Notice even though there are no more observers which consume the components query the infiniteQuery continues to fetch pages in the background.

Expected behavior
After all observers (i.e. React components) which consume an infiniteQuery go out of scope the infiniteQuery should stop fetching subsequent pages.

Screenshots

Desktop (please complete the following information):

• OS: all
• Browser: all
• Version: all

Smartphone (please complete the following information):

• Device: all
• OS: all
• Browser: all
• Version: all

Additional context
Possible code that controls this behaviour

[jayakusumah]

same issue, I'm using nextjs and following the example

[GermaVinsmoke]

Gave a staleTime of 1000 * 60 * 60 but then also it's fetching

[FMCorz]

Same issue.

[Khufu-I]

@boschni Thank you for addressing this issue. I noticed that with the latest update the CodeSandbox sample shows an error after the infinite query is cancelled and the React component is rendered again.
Please let me know if I've to change my code to consume the new changes.