React Query Bilan API Keshlashtirish: Real Loyiha Case Study

Kirish: Katta Loyihada API So'rovlari Boshog'rig'i

Har bir frontend dasturchi o'z faoliyatida kamida bir marta quyidagi muammoga duch keladi: foydalanuvchi sahifalar orasida o'tganda bir xil ma'lumotlar qayta-qayta serverdan yuklanadi, loading spinnerlar ko'payib ketadi va serverga tushayotgan yuklama ortadi. Ushbu maqolada biz real e-tijorat boshqaruv paneli (admin dashboard) loyihasida duch kelingan shunday muammoni TanStack Query (React Query) yordamida qanday hal qilganimizni ko'rib chiqamiz.

Loyiha Konteksti va Dastlabki Muammo

Biz ishlab chiqqan CRM tizimida mijozlar ro'yxati, buyurtmalar statistikasi va mahsulotlar katalogi mavjud edi. Barcha ma'lumotlar klassik useEffect va useState orqali yuklanar edi:

// Eski uslubdagi xato yondashuv
const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  fetch('/api/products')
    .then(res => res.json())
    .then(data => {
      setProducts(data);
      setLoading(false);
    });
}, []);

Ushbu yondashuv dastlab yaxshi ishlagandek tuyuldi, ammo loyiha kattalashgani sari quyidagi jiddiy muammolar yuzaga keldi:

• Keraksiz qayta so'rovlar (Duplicate requests): Foydalanuvchi har safar sahifalar o'rtasida navigatsiya qilganda (masalan, Mahsulotlar → Sozlamalar → Mahsulotlar), butun ro'yxat qaytadan so'ralar va ekran miltillab (flicker) turardi.
• Eskirgan ma'lumotlar (Stale data): Bir nechta admin bir vaqtning o'zida ishlaganda, bir admin o'zgartirgan narx ikkinchi adminning ekranida yangilanmay qolar edi.
• Xotira oqishi va bekor qilinmagan so'rovlar: Komponent unmount bo'lganda so'rov davom etaverar va konsolda ogohlantirishlar paydo bo'lardi.
• Global state chalkashligi: Faqat server ma'lumotini saqlash uchun Redux ishlatish kod bazasini keraksiz boilerplatelar bilan to'ldirib yuborgan edi.

Yechim: TanStack Query Integratsiyasi

Muammoni hal qilish uchun biz @tanstack/react-query kutubxonasiga o'tdik. U server holatini (server state) boshqarish, keshlashtirish, sinxronizatsiya va fonda yangilashni avtomatik ravishda o'z zimmasiga oladi.

1. QueryClient Sozlash

Dastlab loyihaning asosiy faylida keshning yashash muddatini (staleTime va gcTime) to'g'ri belgilab oldik:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // Ma'lumot 5 daqiqa davomida yangi hisoblanadi
      gcTime: 1000 * 60 * 10,   // Keshda 10 daqiqa saqlanadi
      refetchOnWindowFocus: false,
      retry: 1,
    },
  },
});

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <DashboardLayout />
    </QueryClientProvider>
  );
}

2. Maxsus Hook Yaratish (Custom Hook)

API chaqiruvlarini toza va qayta ishlatiluvchi qilish uchun maxsus hook yozdik:

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchProducts = async (page = 1) => {
  const { data } = await axios.get(`/api/products?page=${page}`);
  return data;
};

export const useProducts = (page) => {
  return useQuery({
    queryKey: ['products', page],
    queryFn: () => fetchProducts(page),
    placeholderData: (previousData) => previousData, // pagination uchun silliq o'tish
  });
};

3. Ma'lumotlarni Yangilash va Optimistic Updates

Foydalanuvchi mahsulot narxini o'zgartirganda, serverdan javob kelishini kutmasdan darhol UI'da aks ettirish (Optimistic Update) foydalanuvchi tajribasini (UX) sezilarli darajada oshirdi:

import { useMutation, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';

export const useUpdateProduct = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (updatedProduct) => axios.put(`/api/products/${updatedProduct.id}`, updatedProduct),
    onMutate: async (newProduct) => {
      await queryClient.cancelQueries({ queryKey: ['products'] });
      const previousProducts = queryClient.getQueryData(['products']);
      
      queryClient.setQueryData(['products'], (old) => 
        old?.map(item => item.id === newProduct.id ? { ...item, ...newProduct } : item)
      );
      
      return { previousProducts };
    },
    onError: (err, newProduct, context) => {
      queryClient.setQueryData(['products'], context.previousProducts);
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['products'] });
    },
  });
};

Natijalar: Loyihada Qanday O'zgarishlar Bo'ldi?

React Query'ga to'liq o'tgandan so'ng loyihamizda quyidagi aniq ko'rsatkichlarga erishdik:

1. Serverga tushayotgan yuklama 65% ga kamaydi: StaleTime to'g'ri sozlanganligi sababli bitta foydalanuvchi tomonidan yuboriladigan keraksiz takroriy so'rovlar deyarli butunlay yo'qoldi.
2. Redux hajmi 70% ga qisqardi: Redux'da faqat sof klient holati (masalan, sidebar ochiq/yopiqligi, tema tanlovi) qoldi. Hamma API holatlari React Query ixtiyoriga o'tkazildi.
3. Dastur tezligi va UX yaxshilandi: Sahifalar orasidagi o'tish bir zumda amalga oshadigan bo'ldi, chunki ma'lumotlar to'g'ridan-to'g'ri keshdan o'qiladi va fonda yangilanadi.

Xulosa va Tavsiyalar

Agar sizning React loyihangizda ko'p API so'rovlari bo'lsa va useEffect ichida ma'lumot yuklashdan charchagan bo'lsangiz, albatta TanStack Query'dan foydalaning. U nafaqat kodingizni qisqartiradi, balki foydalanuvchilar uchun ilovani bir necha barobar tezkor qiladi.