การแคช อายุข้อมูล และการดึงข้อมูลเบื้องหลัง

ยินดีต้อนรับ

ข้อมูลใหม่เทียบกับข้อมูลเก่า

staleTime

useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  staleTime: 60_000, // fresh for 60 seconds
})

การตั้งค่า staleTime สำหรับข้อมูลคงที่

// Effectively never stale — reload only on explicit invalidation
useQuery({ queryKey: ['countries'], queryFn: fetchCountries,
  staleTime: Infinity })

gcTime (การเก็บขยะ)

useQuery({
  queryKey: ['products'],
  queryFn: fetchProducts,
  gcTime: 10 * 60 * 1000, // keep in memory for 10 minutes
})

staleTime เทียบกับ gcTime

ตัวบ่งชี้การดึงข้อมูลใหม่เบื้องหลัง

const { data, isLoading, isFetching } = useQuery({ /* ... */ });

return (
  <>
    {isLoading ? <Spinner /> : <DataView data={data} />}
    {isFetching && !isLoading && <RefreshIndicator />}
  </>
);

refetchOnWindowFocus

useQuery({
  queryKey: ['settings'],
  queryFn: fetchSettings,
  refetchOnWindowFocus: false,
})

refetchInterval สำหรับการดึงข้อมูลเป็นระยะ

useQuery({
  queryKey: ['liveStats'],
  queryFn: fetchStats,
  refetchInterval: 5000, // every 5 seconds
})

ข้อมูลตัวแทน

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

useQuery({
  queryKey: ['posts', page],
  queryFn: () => fetchPage(page),
  placeholderData: keepPreviousData,
})

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สรุปทบทวน

ถัดไป