TanStackIntermediate
Project Architecture — Data Flow
Browser থেকে REST API পর্যন্ত সম্পূর্ণ ডেটা ফ্লো — Query ও Mutation দৃষ্টিকোণ থেকে — বাংলায়।
9টি অংশবাংলা ভাষায়
শুরু থেকেই ঠিকঠাক architecture বোঝা গুরুত্বপূর্ণ। আমাদের project তিনটি বড় স্তরে ভাগ: UI Layer (React client components), API Layer (Axios) এবং Server Layer (Next.js route handlers / backend REST)।
সম্পূর্ণ Data Flowtext
text
Browser (React client component)
│ TanStack Query (useQuery/useMutation)
▼
Axios client (lib/axios.ts)
│ GET / POST / PUT / DELETE
▼
Next.js Route Handlers (app/api/**)
│ (proxy / BFF)
▼
Backend REST API + DatabaseQuery (Read) ফ্লো
- Dashboard page-এ
useProducts()hook চলে - TanStack Query-র queryKey দেখে cache-এ আছে কিনা সিদ্ধান্ত নেয়
- Cache-এ না থাকলে queryFn চালায় — যা Axios দিয়ে GET request করে
- Axios যায়
/api/productsroute handler-এ - Route handler backend REST API থেকে ডেটা আনে ও JSON return করে
- TanStack Query ডেটা cache করে ও component-এ
dataহিসেবে দেয়
Mutation (Write) ফ্লো
- User form submit করে → React Hook Form validation (Zod)
- Validation পাস হলে mutation-এর
mutationFnচালায় - Axios POST/PUT/DELETE করে
/api/products - Route handler কাজ শেষে response দেয়
- mutation-এর
onSuccess-এ list query invalidate হয় - TanStack Query আবার fetch করে — UI instant refresh
স্তরগুলোর দায়িত্ব
| স্তর | কী করে | কার উদাহরণ |
|---|---|---|
| Client components | UI render, state, হুক ব্যবহার | product-table.tsx |
| TanStack Query | Server state, cache, refetch | use-products.ts |
| React Hook Form | Form state ও submit | product-form.tsx |
| Axios layer | HTTP request-এর একমাত্র জায়গা | products-api.ts |
| Route Handlers | API gateway, validation server-side | app/api/products/route.ts |
কেন এত স্তর?
স্তর আলাদা রাখলে প্রতিটি অংশ পরীক্ষাযোগ্য ও পুনঃব্যবহারযোগ্য হয়। TanStack Query-র নামে সরাসরি fetch লেখা ট্র্যাশ নয় — কিন্তু Axios layer আলাদা করলে baseURL, headers, error handling এক জায়গায় থাকে, পরিবর্তন সহজ হয়।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।