A Complete Guide to Fetching Data in Next.js with Axios and React-TanStack-Query

Let's be honest: You're likely familiar with the fetch API, coupled with useState and useEffect. It works, but quickly becomes unwieldy. Error handling? A chore. Caching? A nightmare. Managing data updates? Forget about it!

But what if data fetching could be simpler? Enter Axios and React-TanStack-Query, transforming data management from a juggling act into a smooth, efficient process.

Consider a movie listing app. Instead of repetitive code, these tools let you concentrate on building features. Ready for an upgrade? Let's begin!

---

Why Ditch fetch useState useEffect?

Before diving into solutions, let's review the limitations of the traditional approach:

1. Redundancy: Each data fetch involves repetitive code for loading states, error handling, and the fetch call itself.
2. Caching Inefficiency: fetch doesn't inherently cache data. Navigating back to a page means refetching everything.
3. Manual Refetches: Data updates require manual intervention to trigger reloads.

Let's address these issues.

---

Step 1: Installing Axios and React-TanStack-Query

Add these packages to your project:

npm install axios @tanstack/react-query

Next, configure a Query Client, a helper for managing your data:

// /components/providers/QueryProvider.jsx
"use client"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function QueryProvider({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}

// /layout.jsx
import localFont from "next/font/local";
import "./globals.css";
import QueryProvider from "../components/providers/QueryProvider";

const geistSans = localFont({
    src: "./fonts/GeistVF.woff",
    variable: "--font-geist-sans",
    weight: "100 900",
});
const geistMono = localFont({
    src: "./fonts/GeistMonoVF.woff",
    variable: "--font-geist-mono",
    weight: "100 900",
});

export const metadata = {
    title: "Tanstack Query with axios",
    description: "Generated by create next app",
};


export default function RootLayout({ children }) {
    return (
        <QueryProvider>{children}</QueryProvider>
    );
}

That's the setup. Let's fetch some data!

---

Fetching Data with React-TanStack-Query

Let's refactor a simple fetch example using React-TanStack-Query. We'll build a movie app fetching a movie list:

The Traditional Approach (fetch useState useEffect)

import { useEffect, useState } from "react";

export default function Movies() {
  const [movies, setMovies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/movies")
      .then(res => res.json())
      .then(data => {
        setMovies(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading movies...</p>;
  if (error) return <p>Error loading movies: {error.message}</p>;

  return (
    <ul>
      {movies.map(movie => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}

Now, let's streamline this with React-TanStack-Query.

The Improved Approach (React-TanStack-Query)

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

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

export default function Movies() {
  const { data: movies, error, isLoading } = useQuery(["movies"], fetchMovies);

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

  return (
    <ul>
      {movies.map(movie => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}

---

Explanation

1. useQuery: This hook handles fetching, caching, and error management—no more manual useState or useEffect!
2. Automatic Refetches: Data remains current without manual intervention.
3. Axios Integration: Axios simplifies data fetching compared to the native fetch API.

---

Customizing Axios

Real-world apps often require headers, base URLs, or authentication tokens. Create a reusable Axios instance:

// utils/axios.js
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://api.example.com",
  headers: {
    Authorization: `Bearer ${process.env.API_TOKEN}`,
  },
});

export default axiosInstance;

Use this instance in your query:

import { useQuery } from "@tanstack/react-query";
import axiosInstance from "../utils/axios";

const fetchMovies = async () => {
  const response = await axiosInstance.get("/movies");
  return response.data;
};

// ... rest of the Movies component remains the same

---

Benefits of React-TanStack-Query

Here's why it's a worthwhile upgrade:

1. Built-in Caching: Data is cached, avoiding unnecessary refetches.
2. Simplified Error Handling: No more complex try/catch blocks.
3. Stale-While-Revalidate: Displays cached data while fetching updates in the background.
4. Extensive Customization: Easily adjust fetching, polling, retries, and more.

---

Bonus: Pagination Example

Handling paginated APIs is straightforward:

npm install axios @tanstack/react-query

---

Conclusion

Adopting React-TanStack-Query is like upgrading to a high-performance system. It handles caching, error handling, and refetching, allowing you to focus on building exceptional features. If you're tired of repetitive code, give it a try. You won't regret it!

The above is the detailed content of A Complete Guide to Fetching Data in Next.js with Axios and React-TanStack-Query. For more information, please follow other related articles on the PHP Chinese website!