How to Fetch Data Using Axios and React Query in ReactJS

Fetching data is a fundamental part of building dynamic web applications, and tools like Axios and React Query make it easier to handle this task effectively in React.js applications. In this article, we’ll explore how to use Axios and React Query to simplify the process of fetching and managing data in React applications. By the end, you’ll understand why these tools are so popular and how they can boost the efficiency and maintainability of your code.

What is Axios and React Query?

Axios is a lightweight and feature-rich JavaScript library for making HTTP requests. It simplifies API interactions with features like interceptors, request cancellation, and response transformation.

React Query is a state management library designed for handling server state in React. It automates data fetching, caching, and synchronization, making it easier to manage and display API data efficiently.

Why Should You Use Axios and React Query?

Using Axios and React Query together streamlines data fetching and state management in React applications. Axios provides flexibility for making HTTP requests with features like custom headers and interceptors, while React Query simplifies server state handling with built-in caching, automated refetching, and background synchronization. This combination reduces boilerplate code, enhances user experience, and ensures your application is efficient and maintainable.

Let’s get started with a simple project with React JS.

Step 1: Set up the project and install the required libraries

To get started, set up a new React project using Vite for a fast and efficient development environment. Run the following command to create a new Vite project:

npm create vite@latest your-project-name

Follow the prompts to choose a project name and select React with either JavaScript or TypeScript, depending on your preference. After the project is created, navigate to the project directory:

cd your-project-name

npm install

Next, install Axios and React Query, as these are the libraries we’ll be using:

npm install axios @tanstack/react-query

optional: If you prefer using Tailwind CSS for styling, you can remove the default styles provided by Vite and install Tailwind CSS for styling.

Step 2: Implement QueryClient from React Query

After installing the required libraries, the next step is to set up the QueryClient provided by React Query. This client acts as the core of React Query, managing queries and caching. It's best practice to place the QueryClientProvider at the top-level component to make React Query accessible throughout your application.

Here’s how you can modify your app.tsx file:

//app.tsx



import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

import './App.css';

import ProductList from './components/ProductList';



const queryClient = new QueryClient();



function App() {

  return (

    <QueryClientProvider client={queryClient}>

      <main className="bg-neutral-50 min-h-screen">

        <div className="w-[1020px] mx-auto py-4">

          <h1 className="text-[2rem] text-neutral-950 font-bold">

            React Query with Axios

          </h1>

          <ProductList />

        </div>

      </main>

    </QueryClientProvider>

  );

}



export default App;

Step 3: Create API and Components Folders

Organize your project structure by creating the following folders and files:

• 
  src/api/fakeStoreApi.ts for handling data fetching with Axios.


• 
  src/components/ProductList.tsx for displaying the fetched data.

so the result will be like this:

.

in fakeStoreApi.ts :

//fakeStoreApi.ts



import axios from 'axios';



const BASE_URL = 'https://fakestoreapi.com';



const axiosInstance = axios.create({

  baseURL: BASE_URL,

});



export const getAllProducts = async () => {

  try {

    const response = await axiosInstance.get('/products');

    return response.data;

  } catch (error) {

    console.error(error);

    return null;

  }

};

• Base URL Configuration:
  
  Utilizes axios.create to set up an Axios instance with a default baseURL. This ensures all HTTP requests use the base URL

  
  
  

  then let's add some styling to make it more aesthetic.
  
  

  
  
  
  
  

  CODE Kopieren

  //ProductList.tsx
  
  
  
  import { useQuery } from '@tanstack/react-query';
  
  import { getAllProducts } from '../api/fakeStoreApi';
  
  
  
  type ProductsProps = {
  
    id: number;
  
    title: string;
  
    price: number;
  
    category: string;
  
    description: string;
  
    image: string;
  
  };
  
  
  
  export default function ProductList() {
  
    const { data } = useQuery({
  
      queryKey: ['products'],
  
      queryFn: getAllProducts,
  
    });
  
  
  
    return (
  
      <div>
  
        <h2 className="text-[1.2rem] text-neutral-900 font-semibold pb-2">
  
          Product List:
  
        </h2>
  
        <div className="grid grid-cols-4 gap-4">
  
          {data?.map((product: ProductsProps) => (
  
            <div
  
              key={product.id}
  
              className="bg-neutral-200 rounded-lg flex flex-col gap-y-2 p-2"
  
            >
  
              <img
  
                src={product.image}
  
                alt={product.title}
  
                className="w-full h-[300px] object-cover rounded-md"
  
              />
  
              <div>
  
                <p className="text-[0.8rem] text-neutral-600">
  
                  {product.category}
  
                </p>
  
                <h3 className="text-[1rem] text-neutral-800 font-medium">
  
                  {product.title.length > 20
  
                    ? `${product.title.slice(0, 20)}...`
  
                    : product.title}
  
                </h3>
  
              </div>
  
              <p className="text-[0.9rem] text-neutral-800">${product.price}</p>
  
            </div>
  
          ))}
  
        </div>
  
      </div>
  
    );
  
  }
  
  

  
  
  
  
  
  
  
  

  so the final display will look like this:

  
  
  

  . See you, Thanks guys!

  Vollständiger Original-Bericht

  Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

  ↗ Original-Artikel auf dev.to lesen