Blog>
Snippets

Fetching and Caching Data with React Query

Demonstrate how to fetch a list of items from an API and cache the results using React Query to optimize performance.
import { useQuery } from 'react-query';
import axios from 'axios';
Import the useQuery hook from React Query and axios for making HTTP requests.
const fetchItems = async () => {
  const { data } = await axios.get('https://api.example.com/items');
  return data;
};
Define an asynchronous function fetchItems to fetch data from the API.
const ItemsList = () => {
  const { data, isLoading, isError, error } = useQuery('items', fetchItems);

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

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};
Create a functional component that uses the useQuery hook to fetch and display the items. It handles loading and error states.
export default ItemsList;
Export the ItemsList component for use in other parts of the application.