React Academy · Lección

Actualizaciones optimistas e invalidación de caché

Actualice la UI al instante durante una mutación e invalide los datos almacenados en caché mediante tags.

Lección 4 de 413 pasos

Actualizaciones optimistas e invalidación de caché es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección creará endpoints de mutación en RTK Query, actualizará la interfaz al instante con actualizaciones optimistas e invalidará las entradas obsoletas de la caché mediante etiquetas.

Endpoints de mutación

Defina mutaciones con builder.mutation(). Las mutaciones modifican los datos del servidor (POST, PUT, DELETE) y devuelven un hook useMutation.
export const userApi = createApi({
  /* ... */
  endpoints: (builder) => ({
    updateUser: builder.mutation({
      query: ({ id, ...body }) => ({
        url: '/users/' + id,
        method: 'PUT',
        body,
      }),
    }),
  }),
});

Usar un hook de mutación

Desestructure [trigger, result] del hook de mutación. Llame a trigger() con el argumento de la mutación. result contiene isLoading, isSuccess e isError.
const [updateUser, { isLoading }] = useUpdateUserMutation();

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

Etiquetas de caché para la invalidación

Las etiquetas vinculan los datos de consultas almacenados en caché con las mutaciones. Defina `providesTags` en las consultas y `invalidatesTags` en las mutaciones. Cuando se ejecuta una mutación, RTK Query vuelve a obtener automáticamente todas las consultas que proporcionaron las etiquetas invalidadas.
endpoints: (builder) => ({
  getUsers: builder.query({
    query: () => '/users',
    providesTags: ['User'],
  }),
  deleteUser: builder.mutation({
    query: (id) => ({ url: '/users/' + id, method: 'DELETE' }),
    invalidatesTags: ['User'],
  }),
})

Invalidación granular de etiquetas

Use objetos de etiqueta con id para una invalidación más precisa. Proporcione la etiqueta específica del usuario en getUser e invalide únicamente la caché de ese usuario en updateUser.
providesTags: (result, error, id) => [{ type: 'User', id }],
invalidatesTags: (result, error, { id }) => [{ type: 'User', id }]

Actualizaciones optimistas con onQueryStarted

Use onQueryStarted en una mutación para actualizar la caché inmediatamente, antes de que responda el servidor, y revierta el cambio si la mutación falla.
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
  },
})

Invalidar todas las instancias de un tipo de etiqueta

Usar `{ type: 'User', id: 'LIST' }` como etiqueta para las consultas de listas permite invalidar la lista completa sin invalidar las entradas de usuarios individuales.
providesTags: result =>
  result ? [
    ...result.map(({ id }) => ({ type: 'User', id })),
    { type: 'User', id: 'LIST' },
  ] : [{ type: 'User', id: 'LIST' }]

Invalidación manual de la caché

Invalide etiquetas específicas mediante programación con dispatch(api.util.invalidateTags(['User'])). Es útil en controladores de eventos que están fuera de los componentes.
dispatch(userApi.util.invalidateTags(['User']));

Actualizaciones pesimistas frente a optimistas

Optimista: actualiza la caché antes de que responda el servidor (interfaz instantánea y reversión en caso de error). Pesimista: espera al servidor y después actualiza (más seguro, pero más lento). Elija según el riesgo de fallo de la mutación.

Cuándo usar etiquetas frente a una nueva obtención manual

Use etiquetas cuando sepa exactamente qué consultas debe invalidar. Use refetch() desde un hook de consulta para actualizaciones manuales puntuales. Las etiquetas son más automáticas y escalables para APIs grandes.

Comprobación rápida

En RTK Query, ¿qué hace invalidatesTags en un endpoint de mutación?

Resumen

Defina mutaciones con builder.mutation. Use providesTags en las consultas e invalidatesTags en las mutaciones para volver a obtener datos automáticamente. Use onQueryStarted con updateQueryData para realizar actualizaciones optimistas y undo() para revertirlas.

Curso completado

¡Enhorabuena! Ha terminado **Redux Toolkit y RTK Query**. Ahora puede crear slices de Redux, gestionar lógica asíncrona con createAsyncThunk y administrar el estado del servidor con la caché y las actualizaciones optimistas de RTK Query.
Gratis para empezar

Aprende React con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
88
Lecciones
324

Preguntas frecuentes

¿La lección «Actualizaciones optimistas e invalidación de caché» es gratis?

Sí — el texto completo de «Actualizaciones optimistas e invalidación de caché» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Actualizaciones optimistas e invalidación de caché»?

Actualice la UI al instante durante una mutación e invalide los datos almacenados en caché mediante tags. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Actualizaciones optimistas e invalidación de caché»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Slices de Redux Toolkit y createSlice
  2. Lógica asíncrona con createAsyncThunk
  3. RTK Query: endpoints y almacenamiento automático en caché
  4. Actualizaciones optimistas e invalidación de caché
← Volver a React Academy