How can I use React Query to fetch data in my React app?

How can I use React Query to fetch data in my React app?

You can use React Query by installing it via npm and then using 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 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 refetch the data on a button click?

You can use the refetch function provided by useQuery. Here's how:

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

  return (
    <div>
      <button onClick={refetch}>Refetch Data</button>
      {isLoading ? <div>Loading...</div> : <div>Data: {JSON.stringify(data)}</div>}
      {error && <div>Error: {error.message}</div>}
    </div>
  );
};