How do I use React Query for data fetching?

How do I use React Query for data fetching?

React Query is a powerful library for managing server state in React applications. You can use the useQuery hook to fetch data.

Can you show me a basic example of using useQuery?

Sure! Here's a simple example:

import { useQuery } from 'react-query';

const fetchTodos = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
  return response.json();
};

const Todos = () => {
  const { data, error, isLoading } = useQuery('todos', fetchTodos);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error fetching data</div>;

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

This will fetch a list of todos from an API.

What are some benefits of using React Query?

Some benefits include automatic caching, background data synchronization, and built-in support for pagination and optimistic updates.

Is it suitable for large applications?

Absolutely! React Query is designed to handle complex data fetching scenarios, making it ideal for large applications.