Error Handling with React Query

Example of handling errors in React Query when data fetching fails, including displaying user-friendly error messages.
import { useQuery } from 'react-query';

function fetchTodo() {
  return fetch('').then(res =>
    res.ok ? res.json() : Promise.reject('Failed to fetch')
Defines a fetch function that fetches data from an API. It checks if the response is ok, otherwise rejects the promise with an error message.
function TodoComponent() {
  const { data, error, isLoading } = useQuery('todo', fetchTodo);

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

  return <div>{data.title}</div>;
Uses the useQuery hook from React Query to fetch data using the fetchTodo function. It renders different components based on the loading state and presence of an error.