RTK QueryAdvanced
Optimistic Update — onQueryStarted
প্যাচ-ভিত্তিক optimistic UI, rollback ও invalidate — বাংলায়।
5টি অংশবাংলা ভাষায়
RTK Query-তে optimistische update-এর স্থান mutation-এর `onQueryStarted`-এ। server-এর জবাবের আগেই আমরা local cache-টা update - করি, আর queryFulfilled এ রেসস করুন।
Optimistic delete (updateQueryData)ts
ts
deleteProduct: builder.mutation<void, string>({
query: (id) => ({ url: "products/" + id, method: "DELETE" }),
async onQueryStarted(id, { dispatch, queryFulfilled }) {
// 1) UI-তে আগেই remove
const patchResult = dispatch(
ordersApi.util.updateQueryData(
"getProducts", // endpoint
undefined, // arg
(draft) => {
const idx = draft.findIndex((p) => p.id === id);
if (idx >= 0) draft.splice(idx, 1);
},
),
);
try {
await queryFulfilled;
// 2) server নিশ্চিত → tags-ও invalidate (সার্ভার-সত্যে মিলে)
dispatch(ordersApi.util.invalidateTags(["Product"]));
} catch {
// 3) ব্যর্থ → আগের cache ফিরিয়ে (rollback)
patchResult.undo();
}
},
}),updateQueryData কী
util.updateQueryData(endpoint, args, updater)— cache-এ draft-based patch- Returned
patchResult—.undo()rollback - Queries-মাউন্ট থাকলে instant UI, background refetch হয়নি
- কোনো অবশ্য refetch-এর নিশ্চয়তা না থাকলে mutation-সফলতা-পর্যন্ত cache-জাত স্থিতি — তাই queryFulfilled-এ আমরা নিজে invalidate করি
কখন নয়
Optimistic শুধু reversible & good-feedback scenarios-এ। Create-তে সার্ভার থেকে id আসে — সাধারণত normalize-নিশ্চিত না হলে optimistic skip করুন। Delete/toggle-এর জন্য দারুণ।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।