12.3-bob: RTK Query

  IKKI XIL "STATE" (12.1: 2.10 — chuqurroq):

  CLIENT STATE — brauzerda tug'iladi, ILOVA nazoratida:
  - theme, modal ochiq/yopiq, forma, savat (lokal), til
  - sinxron, darrov, faqat frontendga tegishli (Redux/Context/Zustand)

  SERVER STATE — serverdan keladi, BOSHQA joyda saqlanadi (DB):
  - foydalanuvchilar, mahsulotlar, buyurtmalar (API javobi)
  - O'Z MUAMMOLARI bor (client state'da yo'q):
     ASINXRON (so'rov vaqt oladi — loading/error)
     KESH (har safar so'ramaslik — saqlash)
     ESKIRISH (server'da o'zgardi — frontend eski ko'rsatadi — sync)
     TAKROR (ikki komponent bir ma'lumotni so'rasa — bir so'rov — dedupe)
     FONDA YANGILASH (foydalanuvchi eski ko'pib turgan paytda yangisini olish)

   Server state — Redux/Context'da qo'lda boshqarish = yuzlab qator + ko'p xato
   Server state — MAXSUS vosita (RTK Query / TanStack Query) — barcha muammoni AVTOMATIK

  RTK QUERY — Redux Toolkit'ning server-state (data fetching + caching) yechimi:
  @reduxjs/toolkit ICHIDA keladi (alohida o'rnatish kerak emas)

  ARXITEKTURA:
  ┌────────────────────────────────────────────────────────────┐
  │ createApi — API "ta'rifi" (endpoint'lar + baseQuery)        │
  │                                                             │
  │ endpoints — query (o'qish) + mutation (o'zgartirish)          │
  │                                                             │
  │ AVTOMATIK HOOKLAR — useGetUsersQuery, useAddUserMutation    │
  │                                                             │
  │ Komponent — hook'ni ishlatadi (data, isLoading, error)     │
  │                                                              │
  │ + RTK Query KESHNI Redux store'da saqlaydi (avtomatik)      │
  └────────────────────────────────────────────────────────────┘

  RTK QUERY AVTOMATIK QILADIGAN ISHLAR:
   Keshlash (cache key bo'yicha — 2.6)         Loading/error holatlari
   Deduplication (takror so'rov birlashadi)     Fonda yangilash (refetch)
   Invalidation (tags — kerakli paytda qayta — 2.7)   Avtomatik hooklar

   RTK Query — RTK ichida (Redux loyihada tabiiy); kesh Redux store'da
   Faqat endpoint ta'riflanadi  hooklar va kesh AVTOMATIK

  createApi — barcha API endpoint'larini BIR joyda ta'riflash:

  import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

  export const api = createApi({
    reducerPath: "api",                          // store'dagi joy nomi
    baseQuery: fetchBaseQuery({                   // asosiy so'rov mexanizmi (fetch o'rovi)
      baseUrl: "/api",                            // barcha so'rov shu URL'dan
    }),
    tagTypes: ["User", "Product"],               // kesh teglari (invalidation — 2.7)
    endpoints: (builder) => ({                    // endpoint'lar 2.4-bob
      getUsers: builder.query({                   // o'qish (query)
        query: () => "/users",                    //  GET /api/users
      }),
      addUser: builder.mutation({                 // o'zgartirish (mutation)
        query: (newUser) => ({ url: "/users", method: "POST", body: newUser }),
      }),
    }),
  });

  // Avtomatik hooklar (endpoint nomidan — 2.5):
  export const { useGetUsersQuery, useAddUserMutation } = api;

   createApi — bitta API "ta'rifi" (baseQuery + endpoints + tagTypes)
   baseQuery — asosiy so'rov (fetchBaseQuery — fetch o'rovi; yoki axios — 2.10)

  IKKI XIL ENDPOINT:

  QUERY — ma'lumot O'QISH (GET — kesh qilinadi):
  getProducts: builder.query({
    query: () => "/products",                    // GET /api/products
  }),
  getProductById: builder.query({
    query: (id) => `/products/${id}`,            // argument bilan (GET /api/products/5)
  }),

  MUTATION — ma'lumot O'ZGARTIRISH (POST/PUT/DELETE — keshni bekor qiladi):
  addProduct: builder.mutation({
    query: (newProduct) => ({                    // obyekt qaytaradi (URL + metod + body)
      url: "/products", method: "POST", body: newProduct,
    }),
  }),
  deleteProduct: builder.mutation({
    query: (id) => ({ url: `/products/${id}`, method: "DELETE" }),
  }),

  ┌────────────────────────────────────────────────────────────┐
  │ query: ma'lumot o'qish (GET, keshlanadi — 2.6)               │
  │ mutation: ma'lumot o'zgartirish (POST/PUT/DELETE, kesh bekor) │
  └────────────────────────────────────────────────────────────┘

   query — o'qish (keshlanadi, avtomatik); mutation — o'zgartirish (qo'lda trigger)
   query string yoki obyekt qaytaradi (obyekt: url/method/body — murakkab so'rov)

  RTK QUERY har endpoint uchun AVTOMATIK React hook generatsiya qiladi:

  endpoint nomi  hook nomi:
  getUsers (query)      useGetUsersQuery
  getUserById (query)   useGetUserByIdQuery
  addUser (mutation)    useAddUserMutation
  deleteUser (mutation) useDeleteUserMutation

  QUERY HOOK (o'qish — komponentda avtomatik ishlaydi):
  const { data, isLoading, isFetching, error, refetch } = useGetUsersQuery();
  const { data: user } = useGetUserByIdQuery(5);   // argument bilan

  MUTATION HOOK (o'zgartirish — qo'lda trigger):
  const [addUser, { isLoading, isSuccess }] = useAddUserMutation();
  await addUser({ name: "Ali" });                  // trigger (so'rov yuboriladi)

  ┌────────────────────────────────────────────────────────────┐
  │ Query hook: useXQuery()  {data, isLoading, error} (avtomatik)│
  │ Mutation hook: [trigger, {isLoading}] = useXMutation()       │
  └────────────────────────────────────────────────────────────┘

   Hooklar AVTOMATIK (endpoint nomidan — yozish kerak emas)
   Query — avtomatik ishlaydi; mutation — trigger funksiya bilan (qo'lda)

  KESHLASH — RTK Query so'rov natijasini SAQLAYDI (cache key bo'yicha):

  CACHE KEY — endpoint + argument (har xil argument — har xil kesh):
  useGetUserByIdQuery(5)    cache key: "getUserById(5)"
  useGetUserByIdQuery(7)    cache key: "getUserById(7)" (alohida kesh)

  KESH HAYOT SIKLI:
  1. 1-komponent useGetUsersQuery()  so'rov yuboriladi  natija KESHGA
  2. 2-komponent useGetUsersQuery()  KESHDAN (so'rov takror YUBORILMAYDI — dedupe)
  3. Komponent unmount  kesh saqlanadi (default 60s — keepUnusedDataFor)
  4. 60s'dan keyin hech kim ishlatmasa  kesh O'CHIRILADI

  STALENESS (eskirish) — kesh "eski" bo'lsa fonda yangilash:
  - refetchOnMountOrArgChange — mount'da yangilash
  - refetchOnFocus — oyna fokusga qaytganda
  - refetchOnReconnect — internet qayta ulanganda

   Kesh key — endpoint + argument (har argument alohida kesh)
   Deduplication — ko'p komponent bir query  BITTA so'rov (kesh ulashiladi)

  MUAMMO: mahsulot QO'SHILDI (mutation)  mahsulotlar RO'YXATI (query) eskirdi  qanday yangilash?

  TAGS va INVALIDATION — RTK Query'ning kesh-sinxronlash mexanizmi:

  1. tagTypes — kesh teglari ta'riflanadi (createApi'da):
  tagTypes: ["Product"],

  2. QUERY — "men shu tegni TA'MINLAYMAN" (provides):
  getProducts: builder.query({
    query: () => "/products",
    providesTags: ["Product"],                   // bu query — "Product" teg
  }),

  3. MUTATION — "men shu tegni BEKOR QILAMAN" (invalidates):
  addProduct: builder.mutation({
    query: (p) => ({ url: "/products", method: "POST", body: p }),
    invalidatesTags: ["Product"],                //  "Product" query'lar QAYTA so'raladi
  }),

   addProduct chaqirilsa  "Product" teg bekor  getProducts AVTOMATIK qayta yuklanadi

   providesTags (query — ta'minlaydi) + invalidatesTags (mutation — bekor qiladi)
   Mutation'dan keyin tegishli query AVTOMATIK qayta yuklanadi (qo'lda refetch kerak emas)

  RTK QUERY HOLATLARI (query hook):
  isLoading   — BIRINCHI yuklanish (hali ma'lumot yo'q — spinner)
  isFetching  — har QANDAY yuklanish (birinchi + fonda yangilash — indikator)
  isSuccess   — muvaffaqiyatli (data bor)
  isError     — xato (error bor)
  error       — xato obyekti
  data        — ma'lumot (kesh yoki yangi)
  refetch     — qo'lda qayta yuklash

  isLoading vs isFetching (MUHIM farq):
  isLoading  — faqat BIRINCHI marta (kesh yo'q — to'liq spinner)
  isFetching — fonda yangilash ham (kesh bor, lekin yangilanmoqda — kichik indikator)

  function Products() {
    const { data, isLoading, isFetching, error } = useGetProductsQuery();
    if (isLoading) return <Skeleton />;           // birinchi — skeleton
    if (error) return <Error />;
    return (
      <div>
        {isFetching && <small>Yangilanmoqda...</small>}   {/* fonda — kichik */}
        <List items={data} />
      </div>
    );
  }

   isLoading — birinchi yuklash (spinner); isFetching — har yuklash (fonda — indikator)
   Kesh bor  darrov data ko'rsatiladi (isFetching=true — fonda yangilanadi — UX)

  MUTATION — server ma'lumotini o'zgartirish (POST/PUT/DELETE):
  const [addProduct, { isLoading }] = useAddProductMutation();
  await addProduct(newProduct).unwrap();          // .unwrap() — natija/xato Promise sifatida

  OPTIMISTIC UPDATE — server javobini KUTMASDAN UI'ni darrov yangilash (tez UX):
   foydalanuvchi "yoqdi" bosdi  darrov  (server javobini kutmasdan)
   server muvaffaqiyatli  o'zgardi (qoladi); xato  ORQAGA qaytarish (rollback)

  addProduct: builder.mutation({
    query: (p) => ({ url: "/products", method: "POST", body: p }),
    async onQueryStarted(arg, { dispatch, queryFulfilled }) {
      // 1. Darrov keshni yangila (optimistic):
      const patch = dispatch(api.util.updateQueryData("getProducts", undefined, (draft) => {
        draft.push(arg);                            // UI darrov yangilanadi
      }));
      try {
        await queryFulfilled;                       // server javobini kut
      } catch {
        patch.undo();                               //  xato  ORQAGA qaytar (rollback)
      }
    },
  }),

   Optimistic update — UI darrov (server kutmasdan)  tez his; xato bo'lsa rollback
   .unwrap() — mutation natijasini Promise sifatida (try/catch bilan boshqarish)

  baseQuery'ni sozlash (auth header, refresh token, xato boshqaruvi):

  // Auth header (har so'rovga token — 11.15: 2.7 interceptor kabi):
  baseQuery: fetchBaseQuery({
    baseUrl: "/api",
    prepareHeaders: (headers, { getState }) => {
      const token = (getState() as RootState).auth.token;
      if (token) headers.set("Authorization", `Bearer ${token}`);   // har so'rovga
      return headers;
    },
  }),

  // Refresh token bilan (401  token yangilash  qayta so'rov) — custom baseQuery:
  const baseQueryWithReauth = async (args, api, extraOptions) => {
    let result = await baseQuery(args, api, extraOptions);
    if (result.error?.status === 401) {                    // token tugadi
      const refresh = await baseQuery("/auth/refresh", api, extraOptions);
      if (refresh.data) {
        api.dispatch(setToken(refresh.data.token));        // yangi token
        result = await baseQuery(args, api, extraOptions); // so'rovni qayta
      } else api.dispatch(logout());
    }
    return result;
  };

   prepareHeaders — har so'rovga token (axios interceptor'ning RTK Query versiyasi — 11.15)
   Custom baseQuery — 401/refresh logikasi (token yangilash — avtomatik)

  QAYSI QACHON (server-state vositalari):

  ┌─────────────────────┬──────────────────────────────────────┐
  │ createAsyncThunk    │ oddiy async / client-side async amal   │
  │   12.2-bob            │ (kesh/sync kerak emas — bir martalik)  │
  │ RTK Query           │ Redux loyihada server state            │
  │   (bu bob)          │ (kesh/invalidation — RTK ekotizimida)  │
  │ TanStack Query      │ universal server state (Redux'siz ham) │
  │   12.4-bob            │ (eng keng, eng moslashuvchan — 12.4)   │
  └─────────────────────┴──────────────────────────────────────┘

  RTK QUERY vs TANSTACK QUERY (eng keng savol):
  - RTK Query — Redux ICHIDA (agar loyiha Redux ishlatsa — tabiiy); kesh Redux store'da
  - TanStack Query — MUSTAQIL (Redux kerak emas); ko'proq moslashuvchan, keng community
   Redux loyiha  RTK Query; Redux'siz / yangi loyiha  TanStack Query (ko'pincha afzal)

   Server state  createAsyncThunk EMAS (kesh/sync yo'q)  RTK Query / TanStack Query
   Redux loyiha  RTK Query; aks holda  TanStack Query (12.4 — eng keng tavsiya)

  MUAMMO: providesTags: ["Product"] — juda "keng":
   bitta mahsulot o'zgarsa ham BUTUN ro'yxat qayta so'raladi (ortiqcha)
   yangi mahsulot QO'SHILGANDA esa ro'yxat yangilanishi KERAK (yangi element)

  LIST TAG PATTERN — ikki xil teg: har element ID + maxsus LIST tegi:

  getProducts: builder.query({
    query: () => "/products",
    providesTags: (result) =>
      result
        ? [
            ...result.map((p) => ({ type: "Product", id: p.id })),   // har element
            { type: "Product", id: "LIST" },                          // butun ro'yxat tegi
          ]
        : [{ type: "Product", id: "LIST" }],
  }),

  addProduct: builder.mutation({                     // YANGI qo'shildi  LIST eskirdi
    invalidatesTags: [{ type: "Product", id: "LIST" }],   // faqat ro'yxat qayta
  }),
  updateProduct: builder.mutation({                  // BITTA o'zgardi  faqat o'sha
    invalidatesTags: (r, e, { id }) => [{ type: "Product", id }],   // faqat shu element
  }),

   id:"LIST" — "ro'yxatning o'zi" tegi (qo'shish/o'chirishda invalidate)
   id:p.id — har element tegi (o'zgarishda faqat shu element invalidate)

  PAGINATION — sahifalab yuklash (page argument — har sahifa alohida kesh):

  getProducts: builder.query({
    query: (page = 1) => `/products?page=${page}&limit=20`,    // page argument
  }),
  // Komponent:  useGetProductsQuery(page)  — har page alohida cache key 2.6-bob

  INFINITE (cheksiz — "ko'proq yuklash"): eski + yangi sahifani BIRLASHTIRISH.
  Klassik yo'l — serializeQueryArgs + merge + forceRefetch:

  getFeed: builder.query({
    query: (page) => `/feed?page=${page}`,
    serializeQueryArgs: ({ endpointName }) => endpointName,   // hamma page — bitta kesh
    merge: (currentCache, newItems) => {
      currentCache.push(...newItems);                          // eski + yangi (Immer)
    },
    forceRefetch: ({ currentArg, previousArg }) => currentArg !== previousArg,
  }),

  YANGI (RTK Query 2.x): infiniteQuery endpoint (rasmiy infinite API):
  getFeed: builder.infiniteQuery({
    query: ({ pageParam }) => `/feed?page=${pageParam}`,
    infiniteQueryOptions: {
      initialPageParam: 1,
      getNextPageParam: (last, all, lastArg) => lastArg + 1,   // keyingi sahifa argi
    },
  }),
  // hook: const { data, fetchNextPage, hasNextPage } = useGetFeedInfiniteQuery();

   Oddiy pagination — page argument (har sahifa alohida kesh, "1/2/3" tugmalar)
   Infinite — merge (eski+yangi bitta ro'yxatda) yoki infiniteQuery (RTK 2.x rasmiy)

  SKIP — so'rovni SHARTGA bog'lash (masalan token yo'qsa so'ramaslik):

  const { data } = useGetProfileQuery(userId, {
    skip: !userId,                    // userId yo'q bo'lsa — so'rov YUBORILMAYDI
  });
  // yoki skipToken (TypeScript'da toza):
  useGetProfileQuery(userId ?? skipToken);

  PREFETCH — ma'lumotni OLDINDAN yuklash (foydalanuvchi bosishidan oldin — tezlik):

  const prefetch = usePrefetch("getProductById");
  <li onMouseEnter={() => prefetch(product.id)}>   // hover'da oldindan yukla
    {product.name}                                  //  bosganda darrov (kesh tayyor)
  </li>

   skip — shartli so'rov (auth/argument tayyor bo'lmaguncha yubormaslik)
   prefetch — hover/oldindan yuklash  bosganda darrov ko'rinadi (silliq navigatsiya)

  RETRY — xatoda avtomatik qayta urinish (tarmoq nosozligi):
  import { retry } from "@reduxjs/toolkit/query/react";
  baseQuery: retry(fetchBaseQuery({ baseUrl: "/api" }), { maxRetries: 3 }),
  // yoki endpoint'da:  extraOptions: { maxRetries: 5 }
  // retry.fail(error) — ma'lum xatolarda urinishni to'xtatish

  STREAMING UPDATES — WebSocket bilan keshni JONLI yangilash (real-time chat):
  getMessages: builder.query({
    query: () => "/messages",
    async onCacheEntryAdded(arg, { updateCachedData, cacheDataLoaded, cacheEntryRemoved }) {
      const ws = new WebSocket("wss://api/ws");
      await cacheDataLoaded;                          // dastlabki ma'lumot yuklanmaguncha kut
      ws.onmessage = (event) => {
        const msg = JSON.parse(event.data);
        updateCachedData((draft) => { draft.push(msg); });   // keshga JONLI qo'sh (Immer)
      };
      await cacheEntryRemoved;                         // komponent ketganda
      ws.close();                                      // socket'ni yop (tozalash)
    },
  }),

  CODE GENERATION — OpenAPI'dan endpoint'larni AVTOMATIK yaratish (backend sxemasidan):
  npx @rtk-query/codegen-openapi openapi-config.ts
  // OpenAPI/Swagger sxema  typed endpoint'lar + hooklar (qo'lda yozish shart emas)

   retry — tarmoq xatosida avtomatik qayta urinish (maxRetries)
   onCacheEntryAdded — WebSocket/SSE bilan keshni jonli yangilash (chat/notif)
   codegen-openapi — backend sxemasidan endpoint+hook avtomatik (katta API'da vaqt tejaydi)

  TESTLASH — RTK Query hook'larini MSW (Mock Service Worker) bilan sinash:
  MSW — tarmoq darajasida so'rovni ushlaydi (haqiqiy fetch, soxta javob) — eng ishonchli

  1. Handler (soxta endpoint):
  const server = setupServer(
    http.get("/api/products", () => HttpResponse.json([{ id: "1", name: "Olma" }])),
  );

  2. Test store (har testda yangi — kesh izolyatsiya):
  function renderWithStore(ui) {
    const store = configureStore({
      reducer: { [productsApi.reducerPath]: productsApi.reducer },
      middleware: (gd) => gd().concat(productsApi.middleware),
    });
    return render(<Provider store={store}>{ui}</Provider>);
  }

  3. Test:  loading  data (waitFor bilan async):
  renderWithStore(<ProductsList />);
  expect(screen.getByTestId("skeleton")).toBeInTheDocument();       // avval loading
  expect(await screen.findByText("Olma")).toBeInTheDocument();      // keyin data (findBy = kutadi)

   MSW — tarmoqni mock qiladi (fetch haqiqiy — RTK Query "haqiqiy" ishlaydi)
   Har testda YANGI store — kesh testlar orasida oqib ketmaydi (izolyatsiya)

CREATE API 2.3-bob:  createApi({ reducerPath, baseQuery, tagTypes, endpoints: (b) => ({...}) })
BASE QUERY 2.3-bob:  fetchBaseQuery({ baseUrl: "/api", prepareHeaders })
QUERY 2.4-bob:       getX: builder.query({ query: (arg) => `/x/${arg}`, providesTags: ["X"] })
MUTATION 2.4-bob:    addX: builder.mutation({ query: (b) => ({url,method:"POST",body:b}), invalidatesTags })
HOOK 2.5-bob:        const {data,isLoading,error} = useGetXQuery(arg)
                   const [addX, {isLoading}] = useAddXMutation()
TAGS 2.7-bob:        providesTags: ["Product"]  +  invalidatesTags: ["Product"]
HOLAT 2.8-bob:       isLoading (birinchi) | isFetching (har) | data | error | refetch
MUTATION CALL 2.9-bob: await addX(data).unwrap()  // try/catch bilan
LIST TAG 2.12-bob:   providesTags: [...r.map(x=>({type:"X",id:x.id})), {type:"X",id:"LIST"}]
INFINITE 2.13-bob:   builder.query({ serializeQueryArgs, merge, forceRefetch })  |  builder.infiniteQuery
SKIP 2.14-bob:       useGetXQuery(arg, { skip: !arg })  |  useGetXQuery(arg ?? skipToken)
PREFETCH 2.14-bob:   const prefetch = usePrefetch("getX"); onMouseEnter={() => prefetch(id)}
RETRY 2.15-bob:      baseQuery: retry(fetchBaseQuery({...}), { maxRetries: 3 })
STREAMING 2.15-bob:  onCacheEntryAdded(arg, { updateCachedData, cacheDataLoaded, cacheEntryRemoved })
CODEGEN 2.15-bob:    npx @rtk-query/codegen-openapi openapi-config.ts
STORE:             configureStore({ reducer: { [api.reducerPath]: api.reducer }, middleware: ...concat(api.middleware) })

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const productsApi = createApi({
  reducerPath: "productsApi",
  baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
  tagTypes: ["Product"],
  endpoints: (builder) => ({
    getProducts: builder.query<Product[], void>({
      query: () => "/products",
      providesTags: ["Product"],                  // kesh teg (2.7)
    }),
    getProductById: builder.query<Product, string>({
      query: (id) => `/products/${id}`,
      providesTags: (result, error, id) => [{ type: "Product", id }],   // ID bo'yicha
    }),
    addProduct: builder.mutation<Product, Partial<Product>>({
      query: (body) => ({ url: "/products", method: "POST", body }),
      invalidatesTags: ["Product"],               // qo'shilca — ro'yxat qayta yuklanadi (2.7)
    }),
  }),
});

export const { useGetProductsQuery, useGetProductByIdQuery, useAddProductMutation } = productsApi;

import { configureStore } from "@reduxjs/toolkit";
import { productsApi } from "../features/products/productsApi";

export const store = configureStore({
  reducer: {
    [productsApi.reducerPath]: productsApi.reducer,   // api reducer
  },
  middleware: (getDefault) => getDefault().concat(productsApi.middleware),   // api middleware (kesh)
});
//  api.reducer (kesh) + api.middleware (so'rov boshqaruvi) — majburiy (2.3)

function ProductsList() {
  const { data: products, isLoading, isFetching, error } = useGetProductsQuery();

  if (isLoading) return <Skeleton />;             // birinchi yuklanish (2.8)
  if (error) return <Error message="Yuklab bo'lmadi" />;
  if (!products?.length) return <Empty />;

  return (
    <div>
      {isFetching && <small>Yangilanmoqda...</small>}   {/* fonda yangilash 2.8-bob */}
      <ul>{products.map((p) => <li key={p.id}>{p.name}</li>)}</ul>
    </div>
  );
}
//  Hech qanday useEffect/fetch/setState yo'q — RTK Query AVTOMATIK (2.5)

function ProductDetail({ id }: { id: string }) {
  const { data: product, isLoading } = useGetProductByIdQuery(id);   // argument (cache key — 2.6)

  if (isLoading) return <Spinner />;
  return <h1>{product?.name}</h1>;
}
//  Har id alohida keshlanadi (getProductById(5) ≠ getProductById(7) — 2.6)
//    id o'zgarsa — yangi so'rov (yoki kesh bo'lsa — keshdan)

function AddProductForm() {
  const [addProduct, { isLoading, isSuccess }] = useAddProductMutation();

  async function handleSubmit(data: Partial<Product>) {
    try {
      await addProduct(data).unwrap();            // .unwrap() — Promise (try/catch — 2.9)
      toast.success("Qo'shildi");                 // muvaffaqiyat
      //  getProducts AVTOMATIK qayta yuklanadi (invalidatesTags — 2.7)
    } catch (err) {
      toast.error("Xatolik");
    }
  }

  return <form onSubmit={/* ... */}>{isLoading && <Spinner />}</form>;
}
//  Qo'shilgandan keyin ro'yxat avtomatik yangilanadi (invalidation — qo'lda refetch yo'q — 2.7)

export const usersApi = createApi({
  reducerPath: "usersApi",
  baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
  tagTypes: ["User"],
  endpoints: (builder) => ({
    getUsers: builder.query<User[], void>({
      query: () => "/users",
      providesTags: (result) =>
        result
          ? [...result.map((u) => ({ type: "User" as const, id: u.id })), "User"]   // har user + umumiy
          : ["User"],
    }),
    updateUser: builder.mutation<User, { id: string; data: Partial<User> }>({
      query: ({ id, data }) => ({ url: `/users/${id}`, method: "PUT", body: data }),
      invalidatesTags: (result, error, { id }) => [{ type: "User", id }],   // faqat shu user
    }),
    deleteUser: builder.mutation<void, string>({
      query: (id) => ({ url: `/users/${id}`, method: "DELETE" }),
      invalidatesTags: ["User"],                  // butun ro'yxat
    }),
  }),
});
//  ID bo'yicha invalidation — faqat o'zgargan user qayta yuklanadi (aniq, tejamkor — 2.7)

export const api = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({
    baseUrl: "/api",
    prepareHeaders: (headers, { getState }) => {
      const token = (getState() as RootState).auth.token;
      if (token) headers.set("Authorization", `Bearer ${token}`);   // har so'rovga token (2.10)
      return headers;
    },
  }),
  endpoints: () => ({}),
});
//  Har so'rovga token avtomatik (axios interceptor'ning RTK Query versiyasi — 11.15: 2.7)

import { fetchBaseQuery } from "@reduxjs/toolkit/query/react";

const rawBaseQuery = fetchBaseQuery({ baseUrl: "/api", prepareHeaders: /* token */ });

const baseQueryWithReauth = async (args: any, api: any, extraOptions: any) => {
  let result = await rawBaseQuery(args, api, extraOptions);
  if (result.error?.status === 401) {                          // token tugadi
    const refresh = await rawBaseQuery("/auth/refresh", api, extraOptions);
    if (refresh.data) {
      api.dispatch(setToken((refresh.data as any).token));     // yangi token
      result = await rawBaseQuery(args, api, extraOptions);    // so'rovni qayta
    } else {
      api.dispatch(logout());
    }
  }
  return result;
};
// createApi'da: baseQuery: baseQueryWithReauth
//  401  refresh  qayta so'rov (foydalanuvchi qayta login qilmaydi — 2.10)

toggleLike: builder.mutation<void, string>({
  query: (id) => ({ url: `/products/${id}/like`, method: "POST" }),
  async onQueryStarted(id, { dispatch, queryFulfilled }) {
    // 1. Darrov keshni yangila (server javobini kutmasdan):
    const patch = dispatch(
      productsApi.util.updateQueryData("getProducts", undefined, (draft) => {
        const product = draft.find((p) => p.id === id);
        if (product) product.liked = !product.liked;            // UI darrov o'zgaradi
      })
    );
    try {
      await queryFulfilled;                                     // server javobini kut
    } catch {
      patch.undo();                                             // xato  rollback (2.9)
    }
  },
}),
//  "Yoqdi" darrov  (server kutmasdan); xato bo'lsa orqaga (optimistic — 2.9)

// Oyna fokusga qaytganda yangilash (createApi'da):
// setupListeners(store.dispatch);  + refetchOnFocus: true

function LiveData() {
  const { data } = useGetStatsQuery(undefined, {
    pollingInterval: 30000,           //  har 30s avtomatik yangilash (real-time'ga yaqin)
    refetchOnFocus: true,             // tab'ga qaytganda yangilash
    refetchOnReconnect: true,         // internet qayta ulanganda
  });
  return <Dashboard stats={data} />;
}
//  pollingInterval — davriy yangilash (dashboard/jonli ma'lumot — 2.6)

import { useLazyGetUserByIdQuery } from "./api";

function UserSearch() {
  const [trigger, { data, isLoading }] = useLazyGetUserByIdQuery();   // qo'lda (avtomatik emas)

  return (
    <div>
      <button onClick={() => trigger("5")}>Foydalanuvchini yukla</button>   {/* qo'lda so'rov */}
      {isLoading && <Spinner />}
      {data && <p>{data.name}</p>}
    </div>
  );
}
//  useLazyXQuery — query'ni QO'LDA ishga tushirish (mount'da emas — masalan qidiruv tugmaci)

getUsers: builder.query<User[], void>({
  query: () => "/users",
  transformResponse: (response: { data: User[] }) => response.data,   // {data:[...]}  [...]
  transformErrorResponse: (error) => error.data,                       // xato o'zgartirish
}),
//  transformResponse — server javobini komponentga qulay shaklga (masalan o'rab olingan {data})

// store.ts
import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import { api } from "./api";

export const store = configureStore({
  reducer: { [api.reducerPath]: api.reducer, auth: authReducer },
  middleware: (getDefault) => getDefault().concat(api.middleware),
});
setupListeners(store.dispatch);     // refetchOnFocus/Reconnect uchun (2.6)

// main.tsx
import { Provider } from "react-redux";
createRoot(document.getElementById("root")!).render(
  <Provider store={store}><App /></Provider>
);

function ProductsPage() {
  const { data: products, isLoading } = useGetProductsQuery();
  const [addProduct] = useAddProductMutation();
  const [deleteProduct] = useDeleteProductMutation();

  if (isLoading) return <Skeleton />;

  return (
    <div>
      <button onClick={() => addProduct({ name: "Yangi" })}>+ Qo'shish</button>   {/* invalidate  ro'yxat yangilanadi */}
      <ul>
        {products?.map((p) => (
          <li key={p.id}>
            {p.name}
            <button onClick={() => deleteProduct(p.id)}></button>   {/* o'chir  ro'yxat yangilanadi */}
          </li>
        ))}
      </ul>
    </div>
  );
}
//  Hech qanday qo'lda kesh/refetch yo'q — invalidatesTags hammasini avtomatik qiladi (2.7)
//    Bu KOD — createAsyncThunk bilan 5 baravar uzun bo'lardi (12.2 bilan solishtir)

export const productsApi = createApi({
  reducerPath: "productsApi",
  baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
  tagTypes: ["Product"],
  endpoints: (builder) => ({
    getProducts: builder.query<Product[], void>({
      query: () => "/products",
      providesTags: (result) =>
        result
          ? [
              ...result.map((p) => ({ type: "Product" as const, id: p.id })),   // har element
              { type: "Product" as const, id: "LIST" },                          // ro'yxatning o'zi
            ]
          : [{ type: "Product" as const, id: "LIST" }],
    }),
    addProduct: builder.mutation<Product, Partial<Product>>({
      query: (body) => ({ url: "/products", method: "POST", body }),
      invalidatesTags: [{ type: "Product", id: "LIST" }],   // faqat ro'yxat qayta (yangi element)
    }),
    updateProduct: builder.mutation<Product, { id: string; data: Partial<Product> }>({
      query: ({ id, data }) => ({ url: `/products/${id}`, method: "PUT", body: data }),
      invalidatesTags: (result, error, { id }) => [{ type: "Product", id }],   // faqat shu element
    }),
  }),
});
//  id:"LIST" — qo'shish/o'chirishda; id:p.id — bitta element o'zgarishda (aniq, tejamkor — 2.12)

getFeed: builder.query<Post[], number>({
  query: (page) => `/feed?page=${page}&limit=20`,
  // Barcha sahifa uchun BITTA kesh (page argumentini kalitdan chiqarib tashla):
  serializeQueryArgs: ({ endpointName }) => endpointName,
  // Yangi sahifani mavjud keshga qo'sh (Immer draft):
  merge: (currentCache, newItems) => {
    currentCache.push(...newItems);
  },
  // Argument (page) o'zgarganda yangi so'rovga ruxsat ber:
  forceRefetch: ({ currentArg, previousArg }) => currentArg !== previousArg,
}),
// Komponent:
function Feed() {
  const [page, setPage] = useState(1);
  const { data, isFetching } = useGetFeedQuery(page);
  return (
    <div>
      {data?.map((post) => <Card key={post.id} post={post} />)}
      <button disabled={isFetching} onClick={() => setPage((p) => p + 1)}>
        Ko'proq yuklash
      </button>
    </div>
  );
}
//  merge — eski + yangi sahifa BITTA ro'yxatda (cheksiz lenta — 2.13)
//    RTK Query 2.x'da builder.infiniteQuery + useGetFeedInfiniteQuery ham bor (rasmiy API)

// SKIP — shartli so'rov (argument tayyor bo'lmaguncha yubormaslik):
function Profile({ userId }: { userId?: string }) {
  const { data, isLoading } = useGetProfileQuery(userId!, {
    skip: !userId,                      // userId yo'q  so'rov yuborilmaydi (2.14)
  });
  if (!userId) return <p>Foydalanuvchi tanlanmagan</p>;
  if (isLoading) return <Spinner />;
  return <h1>{data?.name}</h1>;
}
// TypeScript'da toza yo'l: useGetProfileQuery(userId ?? skipToken)

// PREFETCH — hover'da oldindan yuklash (bosganda darrov ochiladi):
function ProductRow({ product }: { product: Product }) {
  const prefetch = usePrefetch("getProductById");
  return (
    <li onMouseEnter={() => prefetch(product.id)}>   {/* hover  kesh oldindan tayyor 2.14-bob */}
      <Link to={`/products/${product.id}`}>{product.name}</Link>
    </li>
  );
}
//  skip — ortiqcha/xato so'rovning oldini oladi; prefetch — silliq navigatsiya (2.14)

import { fetchBaseQuery, retry } from "@reduxjs/toolkit/query/react";

export const chatApi = createApi({
  reducerPath: "chatApi",
  // Tarmoq xatosida avtomatik 3 marta qayta urinish:
  baseQuery: retry(fetchBaseQuery({ baseUrl: "/api" }), { maxRetries: 3 }),
  endpoints: (builder) => ({
    getMessages: builder.query<Message[], string>({
      query: (roomId) => `/rooms/${roomId}/messages`,
      // WebSocket bilan keshni JONLI yangilash:
      async onCacheEntryAdded(roomId, { updateCachedData, cacheDataLoaded, cacheEntryRemoved }) {
        const ws = new WebSocket(`wss://api/rooms/${roomId}`);
        try {
          await cacheDataLoaded;                          // dastlabki HTTP javobi kelguncha kut
          ws.addEventListener("message", (event) => {
            const msg: Message = JSON.parse(event.data);
            updateCachedData((draft) => {
              draft.push(msg);                            // yangi xabarni keshga qo'sh (Immer)
            });
          });
        } catch {
          // cacheDataLoaded rad etilsa (komponent tez ketsa) — e'tiborsiz
        }
        await cacheEntryRemoved;                          // komponent unmount bo'lganda
        ws.close();                                       // socket'ni yop (tozalash)
      },
    }),
  }),
});
//  retry — tarmoq nosozligida avtomatik; onCacheEntryAdded — real-time kesh (chat — 2.15)

import { setupServer } from "msw/node";
import { http, HttpResponse } from "msw";
import { render, screen } from "@testing-library/react";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import { productsApi } from "./productsApi";

const server = setupServer(
  http.get("/api/products", () => HttpResponse.json([{ id: "1", name: "Olma" }])),
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

function renderWithStore(ui: React.ReactElement) {
  const store = configureStore({                          // HAR testda yangi store (kesh izolyatsiya)
    reducer: { [productsApi.reducerPath]: productsApi.reducer },
    middleware: (gd) => gd().concat(productsApi.middleware),
  });
  return render(<Provider store={store}>{ui}</Provider>);
}

test("mahsulotlar ro'yxatini ko'rsatadi", async () => {
  renderWithStore(<ProductsList />);
  expect(screen.getByTestId("skeleton")).toBeInTheDocument();      // avval loading
  expect(await screen.findByText("Olma")).toBeInTheDocument();     // keyin data (findBy — kutadi)
});
//  MSW tarmoqni mock qiladi (RTK Query "haqiqiy" ishlaydi); har testda yangi store — 2.16

 createAsyncThunk + slice'da API ma'lumoti (qo'lda kesh/sync — 12.2)
 RTK Query (kesh/invalidation avtomatik — 2.1)

 mutation'dan keyin qo'lda refetch (zerikarli, unutiladi)
 invalidatesTags (avtomatik qayta yuklash — 2.7)

 isFetching'ni to'liq spinner uchun (kesh bor'da ham spinner — yomon UX)
 isLoading (birinchi spinner) + isFetching (fonda kichik indikator — 2.8)

 har endpoint'da qo'lda token header (takror)
 prepareHeaders (markazlashgan — 2.10)

 Redux'siz loyihaga RTK Query majburlash (Redux kerak bo'ladi)
 Redux loyiha  RTK Query; aks holda  TanStack Query (2.11)

 har mutation'da server kutib UI yangilash (sekin his)
 optimistic update (darrov UI + rollback — 2.9)

 providesTags: ["Product"] — bitta element o'zgarsa BUTUN ro'yxat qayta so'raladi
 LIST tag pattern — id:p.id (element) + id:"LIST" (ro'yxat) — aniq, tejamkor (2.12)

 argument yo'q'da ham so'rov (userId undefined  /users/undefined — xato)
 skip yoki skipToken (argument tayyor bo'lmaguncha yubormaslik — 2.14)