TanStack Query Patterns

A learning project focused on practicing TanStack Query (React Query) patterns and server-state management.

This project demonstrates common real-world patterns used when working with remote data in React applications.

---

🚀 Tech Stack

• React
• TypeScript
• Vite
• TanStack Query
• Axios
• JSON Server (mock API)

---

✨ Features Implemented

• ✅ Data fetching with useQuery
• ✅ Server-side pagination
• ✅ CRUD operations
• ✅ Cache updates with setQueryData
• ✅ Optimistic updates
• ✅ Mutation lifecycle handling
• ✅ Loading and fetching state management

---

📦 Installation

npm install

Running the Project 1️⃣ Start the frontend (Vite)

npm run dev

The app will be available at:

http://localhost:5173 2️⃣ Start the mock API server

Run in a separate terminal:

npm run server

The API will be available at:

http://localhost:3000 📁 Project Structure src/ ├─ api/ // API layer ├─ hooks/ // React Query hooks ├─ components/ // UI components ├─ pages/ // Pages └─ main.tsx

Author

Qnoisy; Ulbi TV