Using cached results when calling refetch in react-query

I have a component that uses useQuery to fetch and display a list of Cities.

Cities.js

 const { data, isInitialLoading, isError, refetch } = useQuery(
    ["cities"],
    () => axios.get("http://localhost/cities"),
    {
      staleTime: 10000, 
    }
  );

  // Display loading indicator
  if (isInitialLoading) {
   return <div>Loading...</div>;
  }

  return (
      // Display cities
      {data.map(city => {
         return <p> City: {city.name} </p>
      })}

     // Call refetch method once clicked
     <button onClick={() => refetch()}> call refetch</button>
  ) 

The button displayed above should refetch data once clicked. My question is that when the refetch method is called manually like in the example above, does react-query search cache first, and then return a cached result if it exists, or does refetch always make a brand new fetch request to the specified endpoint? I have set staleTime to 10 seconds in my example, therefore would refetch return the cached result for 10 seconds, and then make new calls to the endpoint afterwards once data is considered stale? If not, what alternative solutions could I implement in order to make use of cached results when making manual refetch calls? Thanks.