When working with data in React applications, you often need to fetch information from external sources such as APIs. React Query provides the useQuery hook, which streamlines this process and handles many common challenges for you. The useQuery hook is designed to retrieve data asynchronously, cache the results, and keep your UI in sync with the server state.

The useQuery hook typically takes two main parameters: a query key and a fetch function. The query key is a unique identifier for the data you are requesting, which React Query uses for caching and refetching logic. The fetch function is a function that returns a promise, usually making a network request to retrieve data.

When you call useQuery, it returns an object containing several useful properties:

• data: the data returned from your fetch function;
• isLoading: a boolean indicating if the query is currently loading;
• error: any error encountered during the fetching process;
• refetch: a function to manually trigger a new fetch for the query.

To see how this works in practice, consider fetching a list of users from a public API. Here is an example using the useQuery hook in a React component:

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

function UsersList() {
  const { data, isLoading, error } = useQuery(
    ['users'], // query key
    () => fetch('https://jsonplaceholder.typicode.com/users').then(res => res.json()) // fetch function
  );

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

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

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

In this example, the query key is ['users'] and the fetch function uses the fetch API to get user data. The returned object from useQuery provides data, isLoading, and error for handling different UI states.

React Query's useQuery hook automatically manages the three most common states encountered during data fetching: loading, error, and data. When the fetch function is running, isLoading is true, allowing you to show a loading indicator. If the fetch fails, the error property is set, so you can display an error message. Once the data is successfully fetched, data contains the result, and you can render it in your component. By handling these states for you, useQuery reduces boilerplate and ensures your UI responds appropriately to different situations without manual state management.