# React Course Intermediate Part

**URL:** <https://forum.codewithmosh.com/t/react-course-intermediate-part/19819>\
**Category:** React\
**Created:** [April 24, 2023, 6:38pm UTC](https://forum.codewithmosh.com/t/react-course-intermediate-part/19819 "2023-04-24T18:38:45Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaudLN](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/daudln/32/5871_2.png) [@DaudLN](https://forum.codewithmosh.com/u/DaudLN)\
**Post date:** [April 24, 2023, 6:38pm UTC](https://forum.codewithmosh.com/t/react-course-intermediate-part/19819/1 "2023-04-24T18:38:45Z")

</div>

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

```auto
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

```auto
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.