0Pricing
Frontend Academy · Lezione

SWR e React Query per la memorizzazione nella cache dei dati

Usare SWR o TanStack Query per recuperare, memorizzare nella cache, deduplicare e rivalidare i dati del server, sostituendo gli schemi manuali di fetch con useEffect

SWR e React Query per la memorizzazione nella cache dei dati è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Lo stato del server è diverso

I dati di rete non sono un semplice stato dell'applicazione. Richiedono caching, deduplicazione, aggiornamento in background, monitoraggio del caricamento e degli errori e retry. I pattern manuali di fetch con useEffect + useState riproducono queste funzionalità in modo inadeguato.

SWR e TanStack Query

SWR (Vercel): piccolo e semplice, basato solo su hook. TanStack Query (in precedenza React Query): più grande e con più funzionalità (mutazioni, query infinite, prefetching, devtools). Entrambi sono eccellenti.

SWR — utilizzo di base

useSWR(key, fetcher) restituisce data, error e lo stato di caricamento. I dati vengono messi in cache in base alla chiave e deduplicati tra i componenti.

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(r => r.json());

function Profile() {
  const { data, error, isLoading } = useSWR('/api/me', fetcher);

  if (error) return <ErrorMessage error={error} />;
  if (isLoading) return <Spinner />;
  return <h1>{data.name}</h1>;
}

SWR — comportamento della revalidazione

Per impostazione predefinita, SWR esegue la revalidazione quando la scheda riacquista il focus e quando viene ristabilita la connessione. Restituisce immediatamente il valore in cache ('stale') e lo aggiorna in background ('while-revalidate').

SWR — mutazione

mutate(key) esegue nuovamente la validazione di una query in cache. Passi i nuovi dati come secondo argomento per applicare un aggiornamento ottimistico.

import useSWR, { mutate } from 'swr';

async function updateProfile(updates) {
  // Optimistic update — UI reflects change immediately
  mutate('/api/me', { ...currentData, ...updates }, false);
  await fetch('/api/me', { method: 'PUT', body: JSON.stringify(updates) });
  // Revalidate to get the server's canonical state
  mutate('/api/me');
}

TanStack Query — configurazione

Avvolga l'app in un QueryClientProvider con un QueryClient configurato.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const client = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 30000, retry: 2 }
  }
});

function App() {
  return (
    <QueryClientProvider client={client}>
      <Routes />
    </QueryClientProvider>
  );
}

useQuery

useQuery({ queryKey, queryFn }) recupera e mette in cache i dati.

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

function UserList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json()),
    staleTime: 60_000 // fresh for 1 minute
  });

  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

useMutation per le scritture

useMutation gestisce POST/PUT/DELETE con stato integrato di esecuzione e di errore e un hook onSuccess per invalidare le cache.

import { useMutation, useQueryClient } from '@tanstack/react-query';

function CreateUserForm() {
  const qc = useQueryClient();
  const m = useMutation({
    mutationFn: (user) => fetch('/api/users', { method: 'POST', body: JSON.stringify(user) }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] })
  });

  return <button onClick={() => m.mutate({ name: 'Alice' })} disabled={m.isPending}>Create</button>;
}

Invalidazione delle query

Dopo una mutazione, invalidi le query correlate per attivare un nuovo fetch. queryClient.invalidateQueries({ queryKey: ['users'] }) le contrassegna come obsolete ed esegue nuovamente il fetch se sono montate.

Aggiornamenti ottimistici

TanStack Query offre un supporto integrato per gli aggiornamenti ottimistici tramite onMutate, onError e onSettled.

useMutation({
  mutationFn: updateUser,
  onMutate: async (newUser) => {
    await qc.cancelQueries({ queryKey: ['user', newUser.id] });
    const previous = qc.getQueryData(['user', newUser.id]);
    qc.setQueryData(['user', newUser.id], newUser);
    return { previous };
  },
  onError: (_, newUser, ctx) => {
    qc.setQueryData(['user', newUser.id], ctx.previous); // rollback
  },
  onSettled: (_, __, newUser) => {
    qc.invalidateQueries({ queryKey: ['user', newUser.id] });
  }
});

Query infinite

useInfiniteQuery gestisce gli elenchi con paginazione o scorrimento infinito: espone fetchNextPage e tiene traccia di tutte le pagine caricate.

React Query Devtools

Aggiunga @tanstack/react-query-devtools per visualizzare un pannello mobile che mostra tutte le query in cache e il loro stato e consente di invalidarle manualmente.

Verifica rapida

Qual è il principale vantaggio di usare SWR o TanStack Query rispetto a useEffect + fetch manuali?

Riepilogo: SWR e React Query

Lo stato del server richiede caching, deduplicazione e revalidazione. SWR è piccolo e semplice. TanStack Query offre più funzionalità (mutazioni, query infinite, devtools). Utilizzi useQuery per le letture e useMutation per le scritture. Esegua invalidateQueries dopo le mutazioni. Applichi aggiornamenti ottimistici con onMutate/onError. Entrambi rendono obsoleto l'uso manuale di useEffect+fetch nelle applicazioni di produzione.

Domande Frequenti

La lezione «SWR e React Query per la memorizzazione nella cache dei dati» è gratuita?

Sì — il testo completo di «SWR e React Query per la memorizzazione nella cache dei dati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «SWR e React Query per la memorizzazione nella cache dei dati»?

Usare SWR o TanStack Query per recuperare, memorizzare nella cache, deduplicare e rivalidare i dati del server, sostituendo gli schemi manuali di fetch con useEffect Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «SWR e React Query per la memorizzazione nella cache dei dati»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Fetch API: GET, POST, PUT e DELETE
  2. Axios: interceptor e URL di base
  3. Gestione degli errori: codici di stato HTTP
  4. SWR e React Query per la memorizzazione nella cache dei dati
← Torna a Frontend Academy