RTK QueryAdvanced
Production Architecture
RTK Query-সহ production tips — code splitting, error tracking, testing — বাংলায়।
7টি অংশবাংলা ভাষায়
Code splitting
injectEndpointsts
ts
// লেজি-loaded ফিচারের জন্য separate endpoint file
const extendedApi = ordersApi.injectEndpoints({
endpoints: (builder) => ({
getOrderStats: builder.query<Stats, void>({
query: () => "orders/stats",
}),
}),
});
// শুধু pick যখন route-loaded
export const { useGetOrderStatsQuery } = extendedApi;প্রোডাকশন checklist
- Error tracking — listener-এ
reportError(error)/Sentry capture - Auth headers —
credentials: 'include', CSRF token - StrictMode mounted twice — RTK Query-হীন idempotent-তা যাচাই
- keepUnusedDataFor দীর্ঘ → স্মৃতি/bandwidth
- Rehydration SSR-এ per-request store
- Testing —
setupListeners, mock RTK Query hooks (MSW)
মেট্রিক্স
perf profilets
ts
"use client";
// উল্লেখযোগ্য queries-কে profile করুন —
// cache hits অথবা redundant refetch
export function TrackQueries() {
const status = useAppSelector((s) => s.ordersApi.queries);
// status-থেকে lastUpdated/fetchCount ধরে dashboard-এ দেখান
return null;
}production-এ cache reset
লগআউট-এর সময় user-নির্দিষ্ট cache পরিষ্কার করতে store.dispatch(api.util.resetApiState()) call করুন — নাহলে পরের user আগের user-এর data cache-এ দেখতে পারে।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।