How to fix The query function did not throw or return a rejected promise in React

// ❌ Bad: Catches error but doesn't re-throw
const queryFn = async () => {
  try {
    const response = await fetch('/api/data');
    return response.json();
  } catch (error) {
    console.error('Error fetching data:', error);
    // Error is swallowed here - React Query never sees it
  }
};

// ✅ Good: Re-throws the error
const queryFn = async () => {
  try {
    const response = await fetch('/api/data');
    return response.json();
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error; // Re-throw so React Query can handle it
  }
};

// ❌ Bad: fetch doesn't throw on HTTP errors
const queryFn = async () => {
  const response = await fetch('/api/users');
  return response.json(); // This succeeds even if status is 404 or 500
};

// ✅ Good: Check response.ok and throw
const queryFn = async () => {
  const response = await fetch('/api/users');

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  return response.json();
};

// ✅ Also good: Extract error message from response
const queryFn = async () => {
  const response = await fetch('/api/users');

  if (!response.ok) {
    const errorData = await response.json();
    throw new Error(errorData.message || 'Request failed');
  }

  return response.json();
};

// Using axios (automatically throws on error status codes)
import axios from 'axios';

const queryFn = async () => {
  const { data } = await axios.get('/api/users');
  return data;
  // No need to check status - axios throws automatically
};

// Using ky (also throws automatically)
import ky from 'ky';

const queryFn = async () => {
  return await ky.get('/api/users').json();
  // Automatically throws on 4xx/5xx responses
};

async function fetchWithErrorHandling(url: string, options?: RequestInit) {
  const response = await fetch(url, options);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }

  return response;
}

// Use in queryFn
const queryFn = async () => {
  const response = await fetchWithErrorHandling('/api/users');
  return response.json();
};

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

function UserList() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['users'],
    queryFn: async () => {
      const response = await fetch('/api/users');

      if (!response.ok) {
        throw new Error('Failed to fetch users');
      }

      return response.json();
    },
    retry: 2, // React Query will retry failed queries
  });

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return <div>{/* Render data */}</div>;
}

import { QueryClient, QueryCache } from '@tanstack/react-query';

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
      console.error('Query error:', error, query.queryKey);
    },
  }),
});