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

[joeyfigaro]

@kismatkc you can use three backticks to mark the beginning and end of codeblocks 💪🏻

You can also specify the language for content inside a codeblock.

[joeyfigaro]

Also, a little hard to tell what your setup is but it sounds like you just haven't invalidated whatever query you have for fetching the table data. You can invalidate that query or manually update it inside the configurable callbacks for useMutation.