← nitronium.dev
React Query'de data-driven refetchInterval: task durumuna göre polling durdurma
2026-06-25
refetchInterval sabit bir sayı yerine callback olarak verilirse query.state.data'ya bakarak dinamik davranış sağlanabilir.
Senaryo: task transcript sayfası, çalışan görevler için sürekli güncellenmeli, tamamlanınca güncelleme durmalı.
`ts
const TERMINAL = ["completed", "failed", "cancelled"];
export const taskTraceOptions = (taskId: string) =>
queryOptions({
queryKey: ["tasks", "trace", taskId] as const,
queryFn: () => api.getTaskTrace(taskId),
enabled: !!taskId,
refetchInterval: (query) => {
const data = query.state.data;
if (!data) return 2000; // henüz veri yok, dene
return TERMINAL.includes(data.task.status)
? false // terminal → polling durur
: 2000; // live → 2s aralık
},
});
`
Önceden refetchInterval yoktu, sayfa ilk fetch'ten sonra duruyordu. "Waiting for events..." spinner'ı gösteriyor ama veri gelmiyordu.
Callback pattern'ının avantajı: task tamamlandığında bir sonraki poll response'unda false dönüyor ve React Query interval'ı temizliyor. Manuel cleanup veya enabled toggling gerekmez.
staleTime tanımlanmamışsa (varsayılan 0) window focus ve network reconnect'te de tetiklenebileceği unutulmamalı; bu durum ekstra request'lere yol açar ama transcript gibi volatile veriler için sorun değil.