RTK QueryIntermediate

Error Handling — RTK Query ভুল

Serialized error shape, matcher, retry, user-friendly message — বাংলায়।

8টি অংশবাংলা ভাষায়

RTK Query-র error হলো serializable object — { status, data } shape. Middleware-এ global error handler-এ সেটা থেকে user-friendly Bangla message বানাই।

Error shape

fetchBaseQuery errorts

// HTTP error
{
  status: 404,
  data: { message: "Not found" },
}

// network error
{
  status: "FETCH_ERROR",
  error: "TypeError: Failed to fetch",
}

// timeout / parse error
{ status: "TIMEOUT_ERROR" }

Global handler

listener দিয়ে toasttsx

tsx

startAppListening({
  matcher: isAnyOf(
    ordersApi.endpoints.createOrder.matchRejected,
    ordersApi.endpoints.getOrders.matchRejected,
  ),
  effect: async (action) => {
    const error = action.payload;
    const message =
      typeof error?.data?.message === "string"
        ? error.data.message
        : "কিছু ভুল হয়েছে, আবার চেষ্টা করুন";
    toast.error(message);
  },
});

fetchBaseQuery-এ transform

Global refetch retryts

baseQuery: fetchBaseQuery({
  baseUrl: "https://api.example.com/",
  // 401 হলে logout ইত্যাদি
  prepareHeaders: (headers, { getState }) => {
    const token = (getState() as RootState).auth.token;
    if (token) headers.set("Authorization", "Bearer " + token);
    return headers;
  },
}),

Error কখনো raw দেখান

error.status + raw data user-কে দেখবেন না — সুস্পষ্ট message + recovery (retry/back) দরকার। dev-এ DevTools-এ full inspect।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।