0Pricing
React Academy · Lezione

Aggiornamenti ottimistici e invalidazione della cache

Aggiorni immediatamente l'interfaccia durante una mutation e invalidi i dati memorizzati nella cache tramite i tag.

Aggiornamenti ottimistici e invalidazione della cache è una lezione React 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 React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione creerà endpoint di mutation in RTK Query, aggiornerà immediatamente l'interfaccia con aggiornamenti ottimistici e invaliderà le voci obsolete della cache utilizzando i tag.

Endpoint di mutation

Definisca le mutation con builder.mutation(). Le mutation modificano i dati sul server (POST, PUT, DELETE) e restituiscono un hook useMutation.
export const userApi = createApi({
  /* ... */
  endpoints: (builder) => ({
    updateUser: builder.mutation({
      query: ({ id, ...body }) => ({
        url: '/users/' + id,
        method: 'PUT',
        body,
      }),
    }),
  }),
});

Utilizzo di un hook di mutation

Esegua il destructuring di [trigger, result] dall'hook di mutation. Chiami trigger() con l'argomento della mutation. result contiene isLoading, isSuccess e isError.
const [updateUser, { isLoading }] = useUpdateUserMutation();

const handleSave = async () => {
  await updateUser({ id: 1, name: 'Alice' });
};

Tag della cache per l'invalidazione

I tag collegano i dati delle query memorizzati nella cache alle mutation. Definisca `providesTags` sulle query e `invalidatesTags` sulle mutation. Quando viene eseguita una mutation, RTK Query recupera automaticamente tutti i dati delle query che avevano fornito i tag invalidati.
endpoints: (builder) => ({
  getUsers: builder.query({
    query: () => '/users',
    providesTags: ['User'],
  }),
  deleteUser: builder.mutation({
    query: (id) => ({ url: '/users/' + id, method: 'DELETE' }),
    invalidatesTags: ['User'],
  }),
})

Invalidazione granulare dei tag

Utilizzi oggetti tag con id per un'invalidazione più precisa. Fornisca il tag dell'utente specifico in getUser e invalidi solo la cache di quell'utente in updateUser.
providesTags: (result, error, id) => [{ type: 'User', id }],
invalidatesTags: (result, error, { id }) => [{ type: 'User', id }]

Aggiornamenti ottimistici con onQueryStarted

Utilizzi onQueryStarted in una mutation per aggiornare immediatamente la cache prima che il server risponda, quindi esegua il rollback se la mutation fallisce.
updateUser: builder.mutation({
  query: (user) => ({ url: '/users/' + user.id, method: 'PUT', body: user }),
  async onQueryStarted(user, { dispatch, queryFulfilled }) {
    const patch = dispatch(
      userApi.util.updateQueryData('getUser', user.id, draft => {
        Object.assign(draft, user);
      })
    );
    try { await queryFulfilled; }
    catch { patch.undo(); } // roll back on error
  },
})

Invalidazione di tutte le istanze di un tipo di tag

Utilizzare `{ type: 'User', id: 'LIST' }` come tag per le query di elenco consente di invalidare l'intero elenco senza invalidare le singole voci utente.
providesTags: result =>
  result ? [
    ...result.map(({ id }) => ({ type: 'User', id })),
    { type: 'User', id: 'LIST' },
  ] : [{ type: 'User', id: 'LIST' }]

Invalidazione manuale della cache

Invalidi programmaticamente tag specifici con dispatch(api.util.invalidateTags(['User'])). È utile nei gestori di eventi che si trovano al di fuori dei componenti.
dispatch(userApi.util.invalidateTags(['User']));

Aggiornamenti pessimistici e ottimistici

Ottimistico: aggiorna la cache prima della risposta del server (interfaccia immediata, rollback in caso di errore). Pessimistico: attende il server e poi aggiorna (più sicuro, ma più lento). Scelga in base al rischio di errore della mutation.

Quando utilizzare i tag o il recupero manuale

Utilizzi i tag quando sa esattamente quali query invalidare. Utilizzi refetch() da un hook di query per aggiornamenti manuali occasionali. I tag sono più automatici e scalabili per API di grandi dimensioni.

Verifica rapida

In RTK Query, che cosa fa invalidatesTags su un endpoint di mutation?

Riepilogo

Definisca le mutation con builder.mutation. Utilizzi providesTags sulle query e invalidatesTags sulle mutation per riattivare automaticamente il recupero dei dati. Utilizzi onQueryStarted con updateQueryData per gli aggiornamenti ottimistici e undo() per il rollback.

Corso completato

Congratulazioni! Ha completato **Redux Toolkit & RTK Query**. Ora può creare slice Redux, gestire la logica asincrona con createAsyncThunk e gestire lo stato del server con il caching e gli aggiornamenti ottimistici di RTK Query.

Domande Frequenti

La lezione «Aggiornamenti ottimistici e invalidazione della cache» è gratuita?

Sì — il testo completo di «Aggiornamenti ottimistici e invalidazione della cache» è 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 React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Aggiornamenti ottimistici e invalidazione della cache»?

Aggiorni immediatamente l'interfaccia durante una mutation e invalidi i dati memorizzati nella cache tramite i tag. Eserciti React 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 React Academy?

Non è richiesta alcuna esperienza precedente. React 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 «Aggiornamenti ottimistici e invalidazione della cache»?

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 React Academy?

Sì. Ogni lezione React 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. Slice di Redux Toolkit e createSlice
  2. Logica asincrona con createAsyncThunk
  3. RTK Query: endpoint e caching automatico
  4. Aggiornamenti ottimistici e invalidazione della cache
← Torna a React Academy