Even if the cache time is 0, the cache is used for the same query.

[kubota-precena]

I created a simple sample code.

import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'

const useFooQuery = () =>
  useQuery({
    queryKey: ['foo'],
    queryFn: () => fetch('https://httpbin.org/get'),
    staleTime: 0,
    cacheTime: 0,
  })

const Root = () => {
  const [flag, setFlag] = useState(false)
  return (
    <>
      <button onClick={() => setFlag((pre) => !pre)}>toggle</button>
      {flag ? <A /> : <B />}
    </>
  )
}

export const A = () => {
  const { data } = useFooQuery()
  return <p>A: {data?.status}</p>
}

export const B = () => {
  const { data } = useFooQuery()
  return <p>B: {data?.status}</p>
}

export default Root

When I click the toggle button, component A is unmounted, so I would like to think it is refetched, but it is not.

What can be done about this problem? We do not want to reset explicitly.
In fact, the same problem occurs during page transition.

[TkDodo]

there is no render cycle where useFooQuery becomes inactive / unused, so the cached entry is not eligible for garbage collection.

if you don't want to show stale data, you can check for isFetchedAfterMount and only show data when this flag is true.