When you use the useQuery hook in React Query, it returns an object containing several important properties that help you manage the various states of a data-fetching request. Three of the most commonly used properties are isLoading, isError, and data.

• isLoading: this property is true while the query is in the process of fetching data. It is typically used to display a loading spinner or message to the user, indicating that data is being loaded;
• isError: this property is true if the query encounters an error during the fetching process. You can use this to show an error message or prompt the user to retry;
• data: this property holds the data returned from your query function once the fetch is successful. If the data is not yet available or the fetch failed, this property will be undefined.

By checking these properties, you can give users clear and immediate feedback about the state of your data requests.

Consider a React component that fetches a list of users using useQuery. You can use conditional rendering to handle the different states returned by the hook:

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

function fetchUsers() {
  return fetch('https://jsonplaceholder.typicode.com/users').then((res) => {
    if (!res.ok) {
      throw new Error('Failed to fetch users');
    }
    return res.json();
  });
}

function UsersList() {
  const {
    isLoading,
    isError,
    data,
    error,
  } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });

  if (isLoading) {
    return <div>Loading users...</div>;
  }

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

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}