React Academy · Leçon

Mises à jour optimistes et invalidation du cache

Mettez l’interface à jour instantanément lors d’une mutation et invalidez les données en cache avec des balises.

Mises à jour optimistes et invalidation du cache est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous construirez des points de terminaison de mutation dans RTK Query, mettrez instantanément l'interface à jour grâce aux mises à jour optimistes et invaliderez les entrées obsolètes du cache à l'aide d'étiquettes.

Points de terminaison de mutation

Définissez des mutations avec builder.mutation(). Les mutations modifient les données du serveur (POST, PUT, DELETE) et renvoient une fonction useMutation.

export const userApi = createApi({
  /* ... */
  endpoints: (builder) => ({
    updateUser: builder.mutation({
      query: ({ id, ...body }) => ({
        url: '/users/' + id,
        method: 'PUT',
        body,
      }),
    }),
  }),
});

Utiliser une fonction de mutation

Déstructurez [déclencheur, résultat] depuis la fonction de mutation. Appelez la fonction avec l'argument de la mutation. Le résultat contient isLoading, isSuccess et isError.

const [updateUser, { isLoading }] = useUpdateUserMutation();

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

Étiquettes de cache pour l'invalidation

Les étiquettes relient les données de requête mises en cache aux mutations. Définissez `providesTags` sur les requêtes et `invalidatesTags` sur les mutations. Lorsqu'une mutation s'exécute, RTK Query relance automatiquement toutes les requêtes qui ont fourni les étiquettes invalidées.

endpoints: (builder) => ({
  getUsers: builder.query({
    query: () => '/users',
    providesTags: ['User'],
  }),
  deleteUser: builder.mutation({
    query: (id) => ({ url: '/users/' + id, method: 'DELETE' }),
    invalidatesTags: ['User'],
  }),
})

Invalidation précise des étiquettes

Utilisez des objets d'étiquette avec un identifiant pour une invalidation précise. Fournissez l'étiquette de l'utilisateur concerné sur getUser et invalidez uniquement le cache de cet utilisateur lors de updateUser.

providesTags: (result, error, id) => [{ type: 'User', id }],
invalidatesTags: (result, error, { id }) => [{ type: 'User', id }]

Mises à jour optimistes avec onQueryStarted

Utilisez onQueryStarted dans une mutation pour mettre immédiatement le cache à jour avant la réponse du serveur, puis annulez la mise à jour si la mutation échoue.

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
  },
})

Invalider toutes les instances d'un type d'étiquette

Utiliser `{ type: 'User', id: 'LIST' }` comme étiquette pour les requêtes de liste vous permet d'invalider la liste complète sans invalider les entrées individuelles des utilisateurs.

providesTags: result =>
  result ? [
    ...result.map(({ id }) => ({ type: 'User', id })),
    { type: 'User', id: 'LIST' },
  ] : [{ type: 'User', id: 'LIST' }]

Invalidation manuelle du cache

Invalidez des étiquettes précises par programmation avec dispatch(api.util.invalidateTags(['User'])). Cette approche est utile dans les gestionnaires d'événements situés en dehors des composants.

dispatch(userApi.util.invalidateTags(['User']));

Mises à jour pessimistes ou optimistes

Optimiste : mettez le cache à jour avant la réponse du serveur (interface instantanée, annulation en cas d'erreur). Pessimiste : attendez le serveur, puis mettez à jour (plus sûr, mais plus lent). Choisissez selon le risque d'échec de la mutation.

Quand utiliser les étiquettes ou la nouvelle récupération manuelle

Utilisez les étiquettes lorsque vous savez exactement quelles requêtes invalider. Utilisez la fonction de relance d'une fonction de requête pour les actualisations manuelles ponctuelles. Les étiquettes sont plus automatiques et évoluent mieux pour les grandes API.

Vérification rapide

Dans RTK Query, que fait invalidatesTags sur un point de terminaison de mutation ?

Récapitulatif

Définissez les mutations avec builder.mutation. Utilisez providesTags sur les requêtes et invalidatesTags sur les mutations pour relancer automatiquement les requêtes. Utilisez onQueryStarted avec updateQueryData pour les mises à jour optimistes et undo() pour revenir en arrière.

Cours terminé

Félicitations ! Vous avez terminé **Redux Toolkit et RTK Query**. Vous pouvez maintenant créer des modules Redux, gérer la logique asynchrone avec createAsyncThunk et gérer l'état du serveur grâce à la mise en cache et aux mises à jour optimistes de RTK Query.

Questions Fréquemment Posées

La leçon « Mises à jour optimistes et invalidation du cache » est-elle gratuite ?

Oui — le texte complet de « Mises à jour optimistes et invalidation du cache » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Mises à jour optimistes et invalidation du cache » ?

Mettez l’interface à jour instantanément lors d’une mutation et invalidez les données en cache avec des balises. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Mises à jour optimistes et invalidation du cache » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Parties Redux Toolkit et createSlice
Logique asynchrone avec createAsyncThunk
RTK Query : points d’accès et mise en cache automatique
Mises à jour optimistes et invalidation du cache

← Retour à React Academy