How can I use React Query to fetch data from an API?

How can I use React Query to fetch data from an API?

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>{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 specific interval?

You can use the refetchInterval option in the useQuery hook. For example:

const { data, error, isLoading } = useQuery('dataKey', fetchData, {
  refetchInterval: 10000, // refetch every 10 seconds
});

Are there any best practices for using React Query?

Yes! Some best practices include using query keys effectively, managing cache time, and handling errors gracefully.