For transient issues, e.g. network errors. Can be improved with exponential back-off and jitter (to prevent Thundering Herd Problem).

import { useQuery } from '@tanstack/react-query';

export default function ProductPage({ id }) {
  const { data, error } = useQuery({
    queryKey: ['product', id],
    queryFn: () => fetch(`/api/products/${id}`).then(res => res.json()),
    retry: 3,
     /**
     * Calculates the delay before the next retry attempt using exponential backoff.
     *
     * @param {number} attempt - The number of the current retry attempt (starting from 0).
     * @returns {number} The delay in milliseconds before the next retry, capped at 30,000 ms.
     */
    retryDelay: attempt => Math.min(1000 * 2 ** attempt, 30000)
  });

  if (error) return <ProductErrorState />;
  if (!data) return <ProductSkeleton />;

  return <ProductDetails product={data} />;
}