Javascript – Why my React Query does not instant update UI after delete? USING SUPABASE

Whenever delete is performed, supabase database is updated instantly but not in UI, If manually refreshed then updated list is shown to the UI… what to do please help!!

I have added EntryTable, inside it I am rendering EntryRow, that is where I am performing delete function through my react query

here useEntrys is fetching all the data from the database.

Entry Table

import React, { useState } from "react";
import { useEntrys } from "../entry/useEntry";
import Spinner from "./Spinner";
import Empty from "./Empty";
import Menus from "./Menus";
import Table from "./Table";
import EntryRow from "../entry/EntryRow";
import AddEntry from "../entry/AddEntry";

const EntryTable = () => {
  const { isLoading, entrys } = useEntrys();

  if (isLoading) return <Spinner />;

  if (!entrys.length) return <Empty resourceName="Entrys" />;

  return (
    <div>
      <Menus>
        <Table>
          <Table.Header>
            <div>Employee ID</div>
            <div>Emp Name</div>
            <div>edit/Delete</div>
          </Table.Header>
          <div className="employeeSection">
            <Table.Body
              data={entrys}
              render={(entrys) => <EntryRow entry={entrys} key={entrys.id} />}
            ></Table.Body>
          </div>
          <div className="elem2">
            <AddEntry />
          </div>
        </Table>
      </Menus>
    </div>
  );
};

export default EntryTable;

Entry Row

import React, { useEffect, useState } from "react";
import { useDeleteEntry } from "./useDeleteEntry";
import { useCreateEntry } from "./useCreateEntry";
import Table from "../ui/Table";
import Modal from "../Modal";
import Menus from "../ui/Menus";

import { FaEye, FaPencil, FaRegTrashCan } from "react-icons/fa6";
import CreateEntryForm from "./CreateEntryForm";
import ConfirmDelete from "../ui/ConfirmDelete";
import ShowEntry from "./ShowEntry";
import { supabase } from "../supabase";

const EntryRow = ({ entry, handleDelete }) => {
  const { isDeleting, deleteEntry } = useDeleteEntry();

  const [showForm, setShowForm] = useState(false);

  const { isCreating, createEntry } = useCreateEntry();

  const [empId, setEmpId] = useState(null);

  const { emp_id, emp_name } =
    entry;

  return (
    <div className="tableRow">
      <Table.Row>
        <strong className="employeeList">
         
          <p className="emp_id">{emp_id}</p>
          <p className="empName">{emp_name}</p>
        </strong>
      </Table.Row>
      <div className="menuContainer">
        <Modal>
          <Menus.Menu>
            <Menus.Toggle id={emp_id} />
            <Menus.List id={emp_id}>
              <Modal.Open opens="edit">
                <Menus.Button icon={<FaPencil />}>Edit</Menus.Button>
              </Modal.Open>

              <Modal.Open opens="show-details">
                <Menus.Button icon={<FaEye />}>Show Details</Menus.Button>
              </Modal.Open>

              <Modal.Open opens="delete">
                <Menus.Button icon={<FaRegTrashCan />}>Delete</Menus.Button>
              </Modal.Open>
            </Menus.List>

            <Modal.Window name="edit">
              <CreateEntryForm entryToEdit={entry} />
            </Modal.Window>

            <Modal.Window name="show-details">
              <ShowEntry entry={entry} />
            </Modal.Window>
          </Menus.Menu>

          <Modal.Window name="delete">
            <ConfirmDelete
              resourceName="entrys"
              disabled={isDeleting}
              onConfirm={() => deleteEntry(emp_id)}
            />
          </Modal.Window>
        </Modal>
      </div>
    </div>
  );
};

export default EntryRow;

API supabase

export const deleteEntry = async (id) => {
  const { data, error } = await supabase
    .from("empManagement")
    .delete()
    .eq("emp_id", id)
    .select();

  if (error) {
    console.log(error);
    throw new Error("Employee entry slot couldn't be deleted");
  }

  return data;
};

Delete React Query

import { deleteEntry as deleteEntryAPI} from "../api/apiEntry";
import { useMutation, useQueryClient } from "@tanstack/react-query";

import toast from "react-hot-toast";

export const useDeleteEntry = () => {
  const queryClient = useQueryClient();

  const { isLoading: isDeleting, mutate: deleteEntry } = useMutation({
    mutationFn: deleteEntryAPI,
    onSuccess: () => {
      toast.success("Entry deleted");
      queryClient.invalidateQueries({
        queryKey: ["empManangement"],
      });
    },
    onError: (err) => toast.error(err.message),
  });
  return { isDeleting, deleteEntry };
};

If I need to pass any local state in order to update the UI, them let me know how should I pass…