How can I use React Query with Axios for data fetching?

How can I use React Query with Axios for data fetching?

You can use React Query to manage server state and Axios for making HTTP requests. First, install both libraries.

What are the steps to set it up?

1. Install React Query and Axios. 2. Create a query function using Axios. 3. Use the useQuery hook from React Query to fetch data.

Can you show me a code example?

Sure! Here's a simple example:

import { useQuery } from 'react-query';
import axios from 'axios';

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

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 need to handle mutations?

You can use the useMutation hook from React Query for handling mutations. It works similarly to useQuery.