Query caches error result and never calls queryFn

[travikk]

Describe the bug

Hey,

So I found a very specific conditions, in which useQuery will cache an error thrown by queryFn, and then from there on out always return that error never calling queryFn again.

As you can see in the example from Stackblitz below, it only occurs when 2 things are set:

staleTime: Infinity

as well as this weird counter in the component itself, right after mounting.

  useEffect(() => {
    console.log('MyComponent MOUNT');
    setCount(1);

    return () => console.log('MyComponent UNMOUNT ***');
  }, []);

This obviously is a simplified use-case meant to reproduce a bug, but one can imagine in a complex app there will be a hook that triggers component re-render on component mount.

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-zhvjhgqf?file=src%2FApp.jsx

Steps to reproduce

1. Go to Stackblitz
2. Open browser DevTools and observe console output.
3. Look for About to fetch! Count: N
4. Click Manual Retry until the counter N reaches 3, at that point the queryFn will try to fetch from a non-existing endpoint resulting in an error thrown
5. The ErrorBoundary catches the error and displays fallback component.

Expected behavior

When you hit "Try Again" on the screen the expected behavior is that the queryFn is invoked again and About to fetch! Count: 4 is printed in the console but that never happens.

From this point on, useQuery cannot escape the previously returned error and it'll forever be failing

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• macOS
• Chrome 140
• "@tanstack/react-query": "^5.90.2",

Tanstack Query adapter

react-query

TanStack Query version

v5.90.2

TypeScript version

NA

Additional context

No response