Required architecture
Use exactly one app-level client: "use client"; const queryClient = new QueryClient(); export default function ProductsPage()
Guide
Shared QueryClient architecture, invalidation, and refetch behavior
Use exactly one app-level client: "use client"; const queryClient = new QueryClient(); export default function ProductsPage()
When row or bulk actions succeed, YaYaw Table invalidates: ["tableData", tableId] Then active queries refetch and the table updates with fresh server data.
When you run custom mutations outside YaYaw Table, invalidate the same key: await queryClient.invalidateQueries( queryKey: ["tableData", "products"], );
What this page covers
The original MDX source has been condensed into CMS-native cards so the page can be edited and republished from the control plane.
Use exactly one app-level client: "use client"; const queryClient = new QueryClient(); export default function ProductsPage()
When row or bulk actions succeed, YaYaw Table invalidates: ["tableData", tableId] Then active queries refetch and the table updates with fresh server data.
When you run custom mutations outside YaYaw Table, invalidate the same key: await queryClient.invalidateQueries( queryKey: ["tableData", "products"], );
If no QueryClient is available, YaYaw Table throws an explicit runtime error. If both a provider and a queryClient prop are set with different instances, YaYaw Table throws an explicit runtime error. Silent cache duplic...
Implementation notes
Confirmation flow and callback contract for copy, delete, edit, and export
$ "use client";
$ const queryClient = new QueryClient();
$ export default function ProductsPage() {
$ return (
$ <QueryClientProvider client={queryClient}>