Why I Switched from Axios to React Query for Data Fetching

• 2 min read

Why I Switched from Axios to React Query for Data Fetching

When at first I started building React apps back in then, Axios was the first tool I used for handling API requests. It made things easy, just send a request, get the response, and you’re done. But as my apps got bigger, I realized that fetching data wasn’t the hard part.

The real challenge was managing state, handling errors, and deciding when to refetch data. I found myself writing the same logic over and over again. That’s when I discovered React Query, and everything changed.

With Axios, I always had to set up loading and error states manually:

// Using Axios for data fetching

const fetchData = async () => {
  setLoading(true);
  try {
    const response = await axios.get('/api/courses');
    setData(response.data);
  } catch (error) {
    setError(true);
  } finally {
    setLoading(false);
  }
};

This works, but it’s repetitive. Every time I made a request, I had to write this same pattern.

Less Stress, Less Boilerplate

With React Query, it’s all handled for me:

// Using React Query for data fetching

const { data, isLoading, isError } = useQuery({
  queryKey: ['courses'],
  queryFn: fetchCourses,
});

Just like that, React Query takes care of the loading, error, and success states automatically and even to beyond of what you are expecting.

One thing I struggled with was caching. Let’s say I load a list of courses. If I navigate to another page and come back, Axios would fetch the data again, even if nothing changed.

React Query fixes this. It caches the data, so if I return to the page, the cached data shows up instantly while it quietly checks for updates in the background. This makes the app feel much faster, and I didn’t have to write any extra code to make it happen.

Other Tools You Might Want to Check Out

While React Query and Axios are great, there are other libraries worth exploring, depending on your project needs as well.

SWR: Built by the creators of Next.js, it’s a lightweight library for data fetching with automatic caching and revalidation, similar to React Query.

TanStack Query (formerly React Query): If you're using other frameworks like Vue or Solid, TanStack Query works outside React too.

Apollo Client: Perfect for working with GraphQL APIs. It handles state management, caching, and real-time updates.

RTK Query: Comes with Redux Toolkit, making it a good choice if your app already uses Redux for state management.

Fetch API: If your needs are simple, the native Fetch API in JavaScript might be enough, especially when combined with libraries like useSWR.

Each tool right here has its strengths, so it’s worth experimenting to see what works best for your stack. For me, React Query feels like a game-changer, but exploring different options helped me understand what I really needed, so i believe you will want to check it out. Try them out, and you might find the perfect fit for your next project!

It Just Makes Life Easier

The main reason I switched to React Query is simple. It saves me time and reduces the amount of code I need to write. I can focus on building features instead of constantly worrying about how to manage API requests.

I still use Axios for the actual requests because it’s great at that. But wrapping it in React Query makes my life so much easier.

If you’re still handling API calls manually, give React Query a try. It might feel a bit different at first, but once you see how much it simplifies things, you’ll probably never want to go back.

Thanks for reading, and I wish you a great day! Cheers 🥂