React-query doesn't use the cache when component rendered after a timeout

[NicHaley]

I have created a simplified codesandbox to illustrate my problem here:

https://codesandbox.io/s/pedantic-waterfall-90i2fk?file=/src/App.js

In this example there are 3 'widgets'. Each widgets makes a dummy query using useQuery. Two of them render on the initial App render. Because we are using react-query, we can see that the dummy query only gets triggered once (note the logged 'Requesting'). However, after 3 seconds a timeout is triggered, and showWidget3 is set to true. At this point Widget3 is rendered, however we can see that it makes a request.

I can't seem to figure out why this is happening. In the query staleTime is set to Infinity, and so I would have expected the dummy query to have only been triggered once. Any idea what is going on here?

[TkDodo]

quite simply, you are creating a new QueryClient inside your App on each render. The client holds the cache, so making a new one will throw it away:

export default function App() {
  const queryClient = new QueryClient();
  const [showWidget3, setShowWidget3] = useState(false);

you can either:

• create the client in a stable way, via state or an instance ref:

  const [queryClient] = useState(() => new QueryClient());

• create the client outside of the App:

const queryClient = new QueryClient();
export default function App() {
  const [showWidget3, setShowWidget3] = useState(false);

both ways work equally well.

[NicHaley]

🤦‍♂️ Ah!! Didn't catch that one thank you