Query Integration

YaYaw Table now requires a shared QueryClient.

There is no implicit internal QueryClient anymore. This avoids isolated caches where invalidations did not refresh table data.

Required architecture

Use exactly one app-level client:

"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>
  );
}

What invalidate/refetch should do

When row or bulk actions succeed, YaYaw Table invalidates:

["tableData", tableId]

Then active queries refetch and the table updates with fresh server data.

Correct invalidation from custom code

When you run custom mutations outside YaYaw Table, invalidate the same key:

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

Guardrails added by YaYaw Table

• 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 duplication is prevented.