TanStack Query vs SWR: React’da server ma’lumotlari bilan ishlash

Qisqacha javob

SWR — ma’lumotlarni yuklash va yangilash uchun ixcham hook. TanStack Query — to‘liqroq vositalar to‘plami: kesh sozlamalari, orqaga qaytariladigan mutatsiyalar, so‘rovlarni invalidatsiya qilish, cheksiz ro‘yxatlar va rasmiy devtools. Agar ilova asosan ma’lumot o‘qisa, SWR yetarli. Foydalanuvchilar ko‘p yaratsa, tahrirlasa va o‘chirsa, TanStack Query bu mantiqni qo‘lda yozishdan qutqaradi.

Server holati mijoz holatidan nimasi bilan farq qiladi

Mijoz holati brauzerga tegishli: ochiq modal oyna, tanlangan tab, formadagi kiritish. U sizniki va doim dolzarb.

Server holati boshqacha:

• u serverda yashaydi, sizda esa faqat uning nusxasi bor;
• nusxa istalgan payt eskirishi mumkin, chunki ma’lumotni boshqa foydalanuvchilar o‘zgartiradi;
• yuklash asinxron va xato bilan tugashi mumkin;
• bir xil ma’lumot ko‘pincha bir nechta komponentga bir vaqtda kerak bo‘ladi.

Server ma’lumotlarini useState yoki global store’ga joylasangiz, yuklanish flaglari, xatolarni qayta ishlash, dublikatlarni olib tashlash, qayta so‘rovlar va kesh eskirishini qo‘lda yozishga to‘g‘ri keladi. Ikkala kutubxona aynan shu muammoni hal qiladi.

Asosiy foydalanish

// SWR
const { data, error, isLoading } = useSWR(`/api/orders/${id}`, fetcher)

// TanStack Query
const { data, error, isPending } = useQuery({
  queryKey: ['orders', id],
  queryFn: () => fetchOrder(id),
})

SWR’da kalit odatda URL bo‘ladi. TanStack Query’da kalit massiv, shuning uchun so‘rovlar guruhini, masalan ['orders'] bilan boshlanadigan hammasini, oson invalidatsiya qilish mumkin.

Taqqoslash

Keshlash va revalidatsiya

SWR stale-while-revalidate g‘oyasiga amal qiladi: keshdagi ma’lumotni darhol ko‘rsatish, fonda yangisini so‘rash va almashtirish. Standart holatda bu deyarli sozlamasiz yaxshi ishlaydi.

TanStack Query yangilikning aniq tushunchasini kiritadi. staleTime ma’lumot qancha vaqt yangi hisoblanishini belgilaydi (bu davrda qayta so‘rov yo‘q), axlat yig‘ish vaqti esa ishlatilmayotgan ma’lumot xotirada qancha saqlanishini. Shu tufayli valyutalar ma’lumotnomasi va buyurtmaning jonli statusiga turlicha munosabatda bo‘lish mumkin.

Mutatsiyalar

Kutubxonalar eng ko‘p shu yerda farqlanadi.

• SWR’da siz API’ni chaqirasiz, keyin yangilash uchun mutate(key) ni chaqirasiz yoki mutate ga optimistik ma’lumot berasiz. Bu oddiy, lekin bog‘liq kalitlarni o‘zingiz muvofiqlashtirasiz.
• TanStack Query’da useMutation hayot sikli callback’lariga ega. Odatiy optimistik yangilash: onMutate da oldingi keshni saqlash, yangi qiymatni yozish, onError da orqaga qaytarish va onSettled da invalidateQueries ni chaqirish.

const mutation = useMutation({
  mutationFn: updateOrder,
  onSettled: () => queryClient.invalidateQueries({ queryKey: ['orders'] }),
})

Paginatsiya va cheksiz ro‘yxatlar

Ikkalasi ham «yana yuklash» ro‘yxatlarini qo‘llab-quvvatlaydi: useSWRInfinite va useInfiniteQuery. Oddiy raqamlangan sahifalarda ikkalasi ham keyingi sahifa yuklanguncha oldingisini ko‘rsatib turadi, jadval miltillamaydi. TanStack Query’da kursorlar va «keyingi sahifa bormi» tekshiruvi biroz aniqroq ifodalangan.

Devtools

TanStack Query rasmiy devtools paneliga ega: har bir so‘rov, uning kaliti, statusi, yangiligi va ma’lumotlari ko‘rinadi, qo‘lda qayta so‘rash yoki invalidatsiya qilish mumkin. Katta ilovada bu «nega yangilanmadi» savoliga javob topishni sezilarli tezlashtiradi. SWR’da loglar yoki hamjamiyat vositalariga tayanish kerak.

Qanday tanlash kerak

• Kichik ilova, bir nechta so‘rovli lending, faqat o‘qiladigan dashboardlar — SWR. Kod va tushunchalar kamroq.
• Admin panellar, CRM, sinxron bo‘lishi kerak bo‘lgan ko‘p forma va ro‘yxatli ilovalar — TanStack Query. Prefiks bo‘yicha invalidatsiya va tuzilgan mutatsiyalar o‘zini oqlaydi.
• Ma’lumotlar server komponentlarida yuklanadigan Next.js App Router — dastlabki ma’lumot uchun kutubxona kerak bo‘lmasligi mumkin; uni ma’lumot mijozda o‘zgaradigan joyda ulang.
• Jamoa allaqachon ulardan birini ishlatadi — bir xillikni saqlang, ikkalasi ham yetuk.

Ko‘p uchraydigan xatolar

• Olingan ma’lumotni useState ga nusxalash va avtomatik yangilanishni yo‘qotish.
• Beqaror kalitlar, masalan SWR’da har renderda qayta yaratiladigan obyektlar, ortiqcha so‘rovlarga olib keladi.
• Mutatsiyadan keyin bog‘liq ro‘yxatlarni invalidatsiya qilishni unutish.
• Agressiv yangilash intervallarini hamma joyga qo‘yish, faqat ma’lumot haqiqatan tez o‘zgaradigan joyga emas.