Hook useSWR: recupero, caricamento ed errori

useSWR(key, fetcher, options) è l'hook principale. key è la chiave della cache (in genere una stringa URL), fetcher è la funzione asincrona che restituisce i dati e options è un oggetto di configurazione opzionale.

L'hook restituisce un oggetto con data, error, isLoading, isValidating e la funzione mutate.

key può essere una stringa URL, un array di [url, params] oppure null. Le chiavi stringa corrispondono a semplici richieste GET. Le chiavi array consentono di includere variabili come userId o filtri nell'identità della cache.

Passare null disabilita completamente la richiesta, una soluzione utile per il recupero condizionale quando i dati necessari non sono ancora disponibili.

fetcher riceve la chiave (oppure gli elementi della chiave array come argomenti separati) e deve restituire una Promise. Il valore risolto diventa data. Se fetcher genera un'eccezione, viene impostata la proprietà error.

Esempio: (url) => fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).

data è undefined durante il primo caricamento e corrisponde al valore restituito da fetcher dopo il completamento. error è undefined a meno che fetcher non abbia generato un'eccezione; in tal caso contiene l'oggetto errore generato.

Verifichi if (error) per visualizzare un messaggio di errore e if (!data) per visualizzare uno skeleton di caricamento, fornendo interfacce di fallback chiare.

isLoading è true solo quando non sono presenti dati nella cache e una richiesta è in corso: durante il primo caricamento per quella chiave. isValidating è true ogni volta che è in corso una richiesta, comprese le revalidazioni in background quando esistono già dati nella cache.

Utilizzi isLoading per le schermate skeleton e isValidating per un indicatore di caricamento discreto che segnali un aggiornamento in background.

SWRConfig consente di definire fetcher predefinito, dedupingInterval, refreshInterval, gestore onError e altre opzioni per tutte le chiamate a useSWR all'interno del relativo sottoalbero. In questo modo la configurazione viene centralizzata invece di ripetere le opzioni in ogni hook.

È possibile annidare più provider SWRConfig per avere valori predefiniti diversi nelle varie sezioni dell'app.

Passi null come chiave per saltare la richiesta: useSWR(isLoggedIn ? '/api/user' : null, fetcher). SWR non eseguirà il recupero finché la chiave non assumerà un valore diverso da null.

È più pulito rispetto all'opzione skip di React Query. Il passaggio della chiave da null a una stringa attiva automaticamente il primo recupero.

Concateni gli hook SWR per le richieste dipendenti: const { data: user } = useSWR('/api/me', fetcher) quindi const { data: orders } = useSWR(user ? '/api/orders/' + user.id : null, fetcher). Il secondo hook attende il completamento del primo.

Questo modello evita catene di useEffect e mantiene le dipendenze dei dati dichiarative e leggibili.

Se un componente Header e un componente Sidebar chiamano entrambi useSWR('/api/user', fetcher), SWR esegue una sola richiesta e condivide il risultato. Entrambi i componenti vengono nuovamente renderizzati insieme quando data o error si aggiornano.

Questa deduplicazione avviene automaticamente entro la finestra di dedupingInterval (2000 ms per impostazione predefinita), senza alcuna configurazione aggiuntiva.

refreshInterval: 5000 esegue il polling ogni 5 secondi. refreshWhenHidden: false interrompe il polling quando la scheda non è visibile. shouldRetryOnError: false disabilita i nuovi tentativi automatici. revalidateOnFocus: false disabilita la revalidazione attivata quando la finestra torna in primo piano.

Combini le opzioni in base ai requisiti di aggiornamento dei dati: i dashboard utilizzano spesso refreshInterval, mentre per i contenuti statici si imposta revalidateOnFocus: false.

Per i dati paginati, includa il numero di pagina nella chiave: useSWR(['/api/items', page], fetcher). Cambiare pagina attiva un nuovo recupero per quella pagina, mantenendo nella cache le pagine precedenti.

SWR fornisce anche useSWRInfinite per i modelli basati su cursore o di scorrimento infinito, con una funzione getKey che costruisce le chiavi in base all'indice della pagina e ai dati della pagina precedente.

Che cosa succede quando si passa null come chiave a useSWR?

useSWR(key, fetcher) restituisce data, error, isLoading e isValidating. Le chiavi null disabilitano il recupero per le richieste condizionali e dipendenti. isLoading indica il primo caricamento, mentre isValidating indica qualsiasi richiesta in corso. SWRConfig centralizza i valori predefiniti e la deduplicazione delle richieste tra i componenti è automatica.

Opzioni come refreshInterval, revalidateOnFocus e shouldRetryOnError consentono di definire con precisione il comportamento di aggiornamento dei dati per singolo hook o globalmente.