Axios React Query Example

A comprehensive example demonstrating best practices for data fetching using Axios and React Query.

Project Structure

src/
├── api/
│   ├── axiosClient.ts      # Axios instance and interceptors
│   ├── endpoints.ts        # API endpoint definitions
│   └── queryClient.ts       # React Query client configuration
├── pages/
│   ├── products/
│   │   ├── components/
│   │   │   ├── ProductList.tsx
│   │   │   ├── ProductDetail.tsx
│   │   │   ├── ProductForm.tsx
│   │   │   └── ProductCard.tsx
│   │   ├── queries/
│   │   │   └── ProductQueries.ts
│   │   └── services/
│   │       └── ProductService.ts  # Page-specific service
│   ├── orders/
│   │   ├── components/
│   │   │   ├── OrderList.tsx
│   │   │   ├── OrderDetail.tsx
│   │   │   ├── OrderForm.tsx
│   │   │   └── OrderCard.tsx
│   │   ├── queries/
│   │   │   └── OrderQueries.ts
│   │   └── services/
│   │       └── OrderService.ts
│   └── users/
│       ├── components/
│       │   ├── UserList.tsx
│       │   ├── UserDetail.tsx
│       │   ├── UserForm.tsx
│       │   └── UserCard.tsx
│       ├── queries/
│       │   └── UserQueries.ts
│       └── services/
│           └── UserService.ts
├── types/
│   └── index.ts
└── components/
    ├── layout/
    │   ├── Sidebar.tsx
    │   └── Header.tsx
    └── shared/
        ├── Pagination.tsx
        └── ErrorBoundary.tsx

Features

• Centralized API configuration with Axios
• Efficient data fetching and caching with React Query
• TypeScript support
• Error handling and retry logic
• Authentication token management
• Request/Response interceptors
• Global error notifications
• Pagination support
• Form handling
• Optimistic updates
• Real-time data synchronization

Tech Stack

• React 19
• TypeScript
• Vite
• TanStack Query (React Query)
• Axios
• Tailwind CSS
• JSON Server (Mock API)

Getting Started

1. Clone the repository:

git clone https://github.com/yourusername/axios-react-query-example.git
cd axios-react-query-example

2. Install dependencies:

npm install

3. Start the mock API server:

cd server
npm install
npm start

4. In a new terminal, start the development server:

npm run dev

Development

Environment Setup

Create a .env file in the root directory:

VITE_APP_BASE_URL=http://localhost:3000

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Lint code
• npm run format - Format code

Best Practices

Code Organization

• Feature-based folder structure
• Separation of concerns
• Reusable components and hooks
• Type safety with TypeScript

Data Fetching

• Centralized API configuration
• Query caching and invalidation
• Optimistic updates
• Error handling and retries

UI/UX

• Responsive design
• Loading states
• Error boundaries
• Form validation

API Documentation

The mock API server provides the following endpoints:

• /api/products - Product management
• /api/orders - Order management
• /api/users - User management

Each endpoint supports standard CRUD operations.

License

MIT