React Course Intermediate Part

React
1

tanstack react query is showing loading only when I am offline (my computer is not connected to internet) even if I fetch data locally from my local API.

Here is my hook to call backend

const useTours = () => {
  const fetchTours = async () => {
    const res = await axios.get<ApiResponse>(
      'http://localhost:5000/api/v1/tours'
    );
    const tours = res.data;
    return tours;
  };
  return useQuery<ApiResponse, Error>({
    queryKey: ['tours'],
    queryFn: fetchTours,
    cacheTime: 3600000,
    staleTime: 3600000, // cache for 1 hour
  });
};

here is my Tours component

import { useState } from 'react';
import useTours from '../../hooks/useTours';

interface Props {}

const Tours = () => {
  const { data: response, error, isLoading } = useTours();
  const [selectedTour, setSelectedTour] = useState(-1);
  console.log(error);
  if (isLoading)
    return (
      <div className="text-center">
        <div
          className="text-center mx-auto spinner-border text-dark"
          role="status"
        >
          <span className="visually-hidden">Loading...</span>
        </div>
      </div>
    );
  return (
    <>
      <ul className="list-group">
        {response?.data.documents.map((tour, index) => (
          <li
            key={tour._id}
            className={
              selectedTour == index
                ? 'list-group-item active'
                : 'list-group-item'
            }
            style={{ cursor: 'pointer' }}
            onClick={() => setSelectedTour(index)}
          >
            {tour.name}
          </li>
        ))}
      </ul>
    </>
  );
};

export default Tours;

Backend: - Node.js
OS run: Ubuntu 23.04

Hereby for Help.