How do I use React Query for API requests?

How do I use React Query for API requests?

React Query is a powerful library for managing server state in React applications. You can use it to fetch, cache, and update data easily. Would you like a basic example?

Yes, please provide a simple example.

Sure! First, install React Query with npm install react-query. Then, you can use the useQuery hook to fetch data. Here's a basic example:

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
};

const MyComponent = () => {
  const { data, error, isLoading } = useQuery('dataKey', fetchData);

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

  return <div>Data: {JSON.stringify(data)}</div>;
};

This will fetch data from the API and handle loading and error states.

What if I want to mutate data instead of just fetching it?

You can use the useMutation hook for that! It allows you to create, update, or delete data. Would you like an example of that?