TanStackAdvanced
API + Query + Table + Form — একসাথে
চারটি স্তর কীভাবে কথা বলে — Data flow-এর ডায়াগ্রাম-সহ ব্যাখ্যা — বাংলায়।
7টি অংশবাংলা ভাষায়
পুরো system-এ চার স্তর। তুলে ধরলাম প্রতিটির ভূমিকা ও সংযোগ বিন্দু:
| স্তর | থাকে | দায়িত্ব |
|---|---|---|
| API layer | lib/products-api.ts | Axios-সহ HTTP + types |
| Server/API route | app/api/products/* | ডেটাবেজ read/write |
| Query layer | lib/hooks/* | TanStack cache, mutations |
| UI layer | components/products/* | Table, Form, Dialog render |
data flow — একটা সংক্ষিপ্ত ধাপ
- উপরের
ProductForm→useCreateProduct().mutate(values) mutationFn→productsApi.create(values)→ Axios POST- server route: validate → insert → নতুন
Productreturn - query
onSuccess→invalidateQueries(productKeys.all) - table-এর query refetch → নতুন
items-সহ render
খুঁজে বের করবেন ভুল কোথায়
- Form জমা নেই → zod errors দেখুন (FieldError), API-তে ভুল body
- Table পুরনো → invalidate হয়েছে কিনা; Devtools-এ lastUpdated দেখুন
- Query-র ডেটা undefined → queryKey mismatch; API ভিন্ন shape
- loading চির → staleTime বেশি/cache hit; network tab দেখুন
এক-মুখী ডেটা flow
TanStack Query-র মূল সুবিধা — একমুখী: UI কখনো সরাসরি server-এ লেখে না, সব mutation মাধ্যমে। এতে পুরো app deterministic থাকে — debugging কঠিন নয়।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।