Immediate UI Update Issue in TanStack Table v8 with React Query Deletions

[kismatkc]

When using TanStack Table (v8) with React Query to fetch and display data, the table UI does not immediately update after deleting rows. The deleted rows are removed from the backend, but the changes are not reflected in the UI until a manual refresh or another action triggers a re-render.

Compenent fetching and passing data to the table
`"use client";
import { Button } from "@/components/ui/button";
import {
Card,
CardTitle,
CardDescription,
CardContent,
CardHeader,
CardFooter,
} from "@/components/ui/card";
import { Loader2, Plus } from "lucide-react";
import React, { useEffect, useState } from "react";
import useAddNewAccountModal from "@/hooks/accounts/add-new-account-modal";

import { Account, columns } from "./columns";
import { useQuery } from "@tanstack/react-query";
import API from "@/app/axios";
import { DataTable } from "@/components/data-table";
import { Skeleton } from "@/components/ui/skeleton";
import useDeleteAccount from "@/hooks/accounts/delete-account-hook";

const fetchAccounts = async(): Promise<Account[]>=>{
const response =await API.get('/account');
return response.data;
}

//fetch data
const AccountsPage = () => {
const {data: Account,isLoading} = useQuery({
queryKey: ["accounts"],
queryFn: fetchAccounts,
});

const { onOpen } = useAddNewAccountModal();
const deleteAccounts = useDeleteAccount();

if(isLoading) {
return (

);
}
return (

Accounts page

Add new

<DataTable onDelete={(data)=>{
let jsonData = {data}
deleteAccounts.mutate(jsonData)
}} columns={columns} data={Account || [{id: "0",name: "defualt"}]} filter="name" />

);
};

export default AccountsPage;

`

delete hook
`

import API
from "@/app/axios";

import { toast } from "sonner"
import { useMutation, useQueryClient } from "@tanstack/react-query"

const deleteUser = async (data: {data: string[]}) => {
const response = await API.post("/account/delete", data);
return response.data;
}
import useAddNewAccountModal from "@/hooks/accounts/add-new-account-modal";

const useDeleteAccount = () => {
const { onClose } = useAddNewAccountModal();
const queryClient = useQueryClient();
return useMutation({
mutationFn: deleteUser,
onSuccess: () => {
console.log("refetching")
toast("Account has been deleted")
queryClient.invalidateQueries({
queryKey: ['accounts']
})
onClose()

},
onError: (err) => {
    console.log(err)
    toast("Account not deleted please try again")
}

})
}

export default useDeleteAccount;`

i am positive that deletion is done successfully however i have to manually reload to see the changes.Thanks for your help

[KevinVandy]

Follow the react query optimistic updates examples

[kismatkc]

Thanks for the reply. I did look at the documentation and found it very useful. However, I just want to confirm one thing about my existing code. My expectation was that as soon as I invalidate the queries upon mutation success (in my case, on delete), the data would be updated, and the updated data would be passed from the AccountsPage to the DataTable component. But it’s not doing so. I’m really confused about this behavior of React Query. The invalidateQueries did run, and I received my toast notification, and the data deletion is successful. Do I need to manually trigger a re-render of databke or reset it like we do for rowselection, or am I doing something wrong? I apologize if this is something easily found in the documentation.

Let me know if you need any further adjustments!

[KevinVandy]

How are you calling the setQuerData? That's what is responsible for the immediate optimistic update. Invalidate queries just causes a new fetch after the fact.

[kismatkc]

Thank you finally after a whole day of trying.The youtuber i was following didnt use this i am clueless how in his code it was working but with mind after i used this worked flawlessly.