Caching e Invalidazione

Edoardo Midali

Stati della Query

Una query può essere in vari stati:

Fresh: I dati sono considerati “freschi”. Non serve rifetch.
Stale: I dati sono “vecchi”. Verranno usati, ma partirà un fetch in background alla prossima occasione (focus finestra, remount componente).
Inactive: Nessun componente sta usando questa query. Dopo 5 minuti (default), viene cancellata dalla cache (GC).

staleTime vs gcTime

staleTime: “Per quanto tempo i dati sono considerati freschi?”. Default: 0 (diventano stantii immediatamente). Se metti Infinity, non verranno mai ricaricati automaticamente.
gcTime (ex cacheTime): “Per quanto tempo i dati inattivi rimangono in memoria?”. Default: 5 minuti.

```tsx const { data } = useQuery({ queryKey: [‘todos’], queryFn: fetchTodos, staleTime: 1000 * 60, // 1 minuto }) ```

Invalidazione Manuale

Quando sai che i dati sono cambiati (es. dopo una mutation), devi dirlo a QueryClient.

```tsx // Invalida tutte le query che iniziano con [‘todos’] // Es. [‘todos’], [‘todos’, 1], [‘todos’, { filter: ‘active’ }] queryClient.invalidateQueries({ queryKey: [‘todos’] }) ```

Questo marca i dati come “stale” e innesca immediatamente un refetch se la query è attiva sullo schermo.