DataTableRecetas
Mutaciones y refresco
Refrescar tras una mutación, actualización optimista y refetch desde una celda.
Los casos reales de los sistemas FESA, resueltos con el mínimo código correcto. Cada receta asume el módulo del tutorial.
Refrescar la tabla tras una mutación
const result = await approveOrderAction(orderId);
if (result.error) return toast.error(result.error);
toast.success(result.success);
void tableRef.current?.silentRefetch(); // la tabla, sin parpadeo
router.refresh(); // SOLO si hay KPIs server-rendered en la página¿Por qué no solo router.refresh()?
Con la paginación en servidor, la tabla pide sus propios datos: un router.refresh()
re-renderiza los Server Components pero no toca lo que la tabla ya tiene cargado.
El silentRefetch() sí.
Actualización optimista (toggle de estado)
const toggleActive = useCallback((row: ProductRow) => {
tableRef.current?.updateRow(row.id, { isActive: !row.isActive }); // al instante
startTransition(async () => {
const result = await toggleProductAction(row.id, !row.isActive);
if (result.error) {
toast.error(result.error);
void tableRef.current?.silentRefetch(); // revierte con la verdad del servidor
}
});
}, []);updateRow además invalida cualquier fetch en vuelo: una respuesta vieja no pisará tu cambio.
Refetch desde una celda o un diálogo interno
// Dentro de un componente renderizado POR la tabla (celda, dialog de celda):
import { useDataTableRefetch } from "@fesa/components/datatable";
const refetch = useDataTableRefetch();
// …tras la mutación:
refetch(); // silentRefetch de la tabla contenedora, sin prop drilling