Basic React Query Data Fetching

Demonstrate how to use React Query's useQuery hook for fetching data and displaying it in a component.
import { useQuery } from 'react-query';
import axios from 'axios';

// Define the fetch function
const fetchPosts = async () => {
    const { data } = await axios.get('');
    return data;

// React component using useQuery hook to fetch and display data
function PostsComponent() {
    const { isLoading, error, data } = useQuery('posts', fetchPosts);

    if (isLoading) return 'Loading...';

    if (error) return 'An error has occurred: ' + error.message;

    return (
            { => (
                <li key={}>{post.title}</li>
This code imports the useQuery hook from react-query and axios for making HTTP requests. It defines a fetchPosts function to fetch data from a placeholder API. Then, it creates a PostsComponent that uses the useQuery hook to fetch the posts data. The hook manages the loading state, error handling, and the data state. Based on the state, the component renders a loading message, an error message, or a list of posts.