YaYaw TableYaYaw Table

Architecture QueryClient partagé, invalidation et comportement de **rafraîchissement**

Intégration Query

YaYaw Table requiert maintenant un QueryClient partagé.

Il n'existe plus de QueryClient interne implicite. Cela évite les caches isolés où les invalidations ne rafraîchissaient pas les données de la table.

Architecture requise

Utilisez exactement un client au niveau app :

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { DataTable } from "@/components/ui/yayaw-table";
import { getTableActions, getTableConfig } from "./table-config";

const queryClient = new QueryClient();

export default function ProductsPage() {
  return (
    <QueryClientProvider client={queryClient}>
      <DataTable
        tableType="products"
        getTableConfig={getTableConfig}
        getTableActions={getTableActions}
      />
    </QueryClientProvider>
  );
}

Ce que invalidate/refetch doit faire

Quand des actions de ligne ou bulk réussissent, YaYaw Table invalide :

["tableData", tableId]

Ensuite les queries actives se rafraîchissent et la table se met à jour avec des données serveur fraîches.

Invalidation correcte depuis du code custom

Quand vous exécutez des mutations custom en dehors de YaYaw Table, invalidez la même clé :

await queryClient.invalidateQueries({
  queryKey: ["tableData", "products"],
});

Garde-fous ajoutés par YaYaw Table

  • Si aucun QueryClient n'est disponible : erreur runtime explicite.
  • Si un provider et la prop queryClient sont tous deux définis avec des instances différentes : erreur runtime explicite.
  • La duplication silencieuse de cache est empêchée.

On this page