useQuery queryFn function not triggered immediately when the query is stale after component re-evaluation

[daniel-delatorre-xplore]

Hi guys,

I started recently with react query and I have seen something that caught my eye.
We have defined this code at the beginning of the component:

async function fetchPosts() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/posts?_limit=10&_page=0"
  );
  return response.json();
}
const { data, isError, error, isLoading } = useQuery({
    queryKey: "posts",
    queryFn: fetchPosts,
    staleTime: 3000,
    cacheTime: 3000,
  });

But when the component is re-evaluated the fetchPosts is not executed immediately once the query posts is stale, It is executed again when some extra time has passed, can you tell me why?