T
TanStack•17mo ago
rare-sapphire

[SOLVED] Want to pass a refetch from an useQuery to an action in a column helper.

I have an useQuery in a parent component that I destruct refetch() from. i now want to pass it to the table so i can use it in my column definition. so far this is what i have:
// parent /w the useQuery above
{data && (
<BookingTable
refetch={refetch}
filterDate={filter}
columns={bookingColumns}
data={data}
/>
)}

// type
declare module '@tanstack/react-table' {
interface TableMeta<TData extends RowData> {
refetch?: () => void;
}
}

// column definition
{
id: 'actions',
cell: ({ row, table }) => {
const booking = row.original;
return (
<BookingDropdown
refetch={table.options.meta?.refetch!}
booking={booking}
/>
);
},
},

//table
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
meta: {
refetch: () => {
refetch();
},
},
});
// parent /w the useQuery above
{data && (
<BookingTable
refetch={refetch}
filterDate={filter}
columns={bookingColumns}
data={data}
/>
)}

// type
declare module '@tanstack/react-table' {
interface TableMeta<TData extends RowData> {
refetch?: () => void;
}
}

// column definition
{
id: 'actions',
cell: ({ row, table }) => {
const booking = row.original;
return (
<BookingDropdown
refetch={table.options.meta?.refetch!}
booking={booking}
/>
);
},
},

//table
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
meta: {
refetch: () => {
refetch();
},
},
});
however, when i run refetch() nothing happens. it never gets invoked. anyone know what it might be?
1 Reply
rare-sapphire
rare-sapphireOP•17mo ago
never mind i figured it out! i never called refetch() inside my BookingDropdown 😅, doing so solved it!

Did you find this page helpful?