TanStack Query
Refetching és frissítés
Manuális refetch, background refetch, refetchInterval, invalidateQueries.
Refetching és frissítés
Manuális refetch
const { data, isFetching, refetch } = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
<button onClick={() => refetch()} disabled={isFetching}>
{isFetching ? 'Frissítés...' : 'Frissítés'}
</button>Background refetch
Háttérben fut a fetch, a régi adat látható marad:
const { data, isFetching } = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
{isFetching && <span>🔄 Frissítés folyamatban...</span>}Polling – refetchInterval
useQuery({
queryKey: ['live-scores'],
queryFn: fetchLiveScores,
refetchInterval: 10_000,
})invalidateQueries
const queryClient = useQueryClient()
queryClient.invalidateQueries({ queryKey: ['users'] })Tipikusan mutation után:
useMutation({
mutationFn: createUser,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['users'] })
},
})📝 Összefoglaló
refetch()= felhasználó által indított frissítés.- Background refetch:
isPendinghelyettisFetchingjelzi. refetchInterval= polling.invalidateQueries= „ez az adat elavult, töltsd újra”.