React Query fetches data even if staleTime is set to Infinity

Hello, hope everyone is doing great.

First time I am using React Query, so excuse the noobiness. I am trying to understand React Query through this simple example (local server) where I check the Network tab to see if requests are made when data is fresh. Whenever I refresh the page, an HTTP request is fired, even if data is not stale (I am using React Query Devtools to check this)

export default function App() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () => fetch('http://localhost:8000/api/v1/getservices').then((res) => res.json()),
    staleTime: Infinity
  });

  if (isPending) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <ul>
      {data.map((category) => (
        <li>{category.category_name}</li>
      ))}
    </ul>
  );
}

export default function App() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () => fetch('http://localhost:8000/api/v1/getservices').then((res) => res.json()),
    staleTime: Infinity
  });

  if (isPending) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <ul>
      {data.map((category) => (
        <li>{category.category_name}</li>
      ))}
    </ul>
  );
}

TanStack•3y ago•

9 replies

dry-scarlet

React Query fetches data even if staleTime is set to Infinity

export default function App() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () => fetch('http://localhost:8000/api/v1/getservices').then((res) => res.json()),
    staleTime: Infinity
  });

  if (isPending) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <ul>
      {data.map((category) => (
        <li>{category.category_name}</li>
      ))}
    </ul>
  );
}

export default function App() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () => fetch('http://localhost:8000/api/v1/getservices').then((res) => res.json()),
    staleTime: Infinity
  });

  if (isPending) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <ul>
      {data.map((category) => (
        <li>{category.category_name}</li>
      ))}
    </ul>
  );
}

React Query fetches data even if staleTime is set to Infinity

Similar Threads

React Query fetches data even if staleTime is set to Infinity

Similar Threads

Similar Threads

Similar Threads