tanstack react query is showing loading.

[daudln]

tanstack react query is showing loading only when I am offline even if i fetch data locally from my local api

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
  });
};

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;

[louis-young]

Hi 👋

Please could you provide a runnable Code Sandbox reproduction? It'd be easier for someone to help you if you can provide this.

[daudln]

Thanks team, I have solved this issue by updating my query client like this.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      networkMode: 'offlineFirst',
    },
  },
});