[Comp-792-2] Invalidate cached queries on frontend (#714)

Author: tolkamps1

compliance-web/src/components/App/Staff/StaffModal.tsx

@@ -14,7 +14,6 @@ import { Position } from "@/models/Position";
 import { StaffAPIData, StaffFormData, StaffUser } from "@/models/Staff";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { DialogContent } from "@mui/material";
-import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import * as yup from "yup";
@@ -49,7 +48,6 @@ const initFormData: StaffFormData = {
 };
 
 const StaffModal: React.FC<StaffModalProps> = ({ onSubmit, staff }) => {
-  const queryClient = useQueryClient();
 
   const { data: usersList } = useAuthUsersData();
   const { data: positionsList } = usePositionsData();
@@ -117,9 +115,6 @@ const StaffModal: React.FC<StaffModalProps> = ({ onSubmit, staff }) => {
     } else {
       addStaff(staffData);
     }
-    queryClient.invalidateQueries({
-      queryKey: ["staff-users"],
-    });
   };
 
   return (

compliance-web/src/hooks/useStaff.tsx

@@ -3,7 +3,7 @@ import { Permission } from "@/models/Permission";
 import { Position } from "@/models/Position";
 import { StaffAPIData, StaffUser } from "@/models/Staff";
 import { OnSuccessType, request, requestAuthAPI } from "@/utils/axiosUtils";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useStaticQuery } from "@/hooks/useCustomQueries";
 import { STAFF_USER_POSITION } from "@/utils/constants";
 
@@ -80,14 +80,65 @@ export const usePermissionsData = () => {
   });
 };
 
-export const useAddStaff = (onSuccess: OnSuccessType) => {
-  return useMutation({ mutationFn: addStaff, onSuccess });
-};
+export const useAddStaff = (onSuccess?: OnSuccessType) => {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: addStaff,
+    onSuccess: async (data) => {
+      // Invalidate all staff-users queries
+      await queryClient.invalidateQueries({ 
+        queryKey: ["staff-users"],
+        refetchType: 'active'
+      });
 
-export const useUpdateStaff = (onSuccess: OnSuccessType) => {
-  return useMutation({ mutationFn: updateStaff, onSuccess });
+      // Call the provided callback if it exists
+      if (onSuccess) {
+        onSuccess(data);
+      }
+    },
+  });
 };
 
-export const useDeleteStaff = (onSuccess: OnSuccessType) => {
-  return useMutation({ mutationFn: deleteStaff, onSuccess });
+export const useUpdateStaff = (onSuccess?: OnSuccessType) => {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: updateStaff,
+    onSuccess: async (data) => {
+      // Invalidate all staff-users queries
+      await queryClient.invalidateQueries({ 
+        queryKey: ["staff-users"],
+        refetchType: 'active'
+      });
+            
+      // Call the provided callback if it exists
+      if (onSuccess) {
+        onSuccess(data);
+      }
+    },
+  });
 };
+
+export const useDeleteStaff = (onSuccess?: OnSuccessType) => {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: deleteStaff,
+    onSuccess: async (data, ) => {
+      // Invalidate all staff-users queries
+      await queryClient.invalidateQueries({ 
+        queryKey: ["staff-users"],
+        refetchType: 'active'
+      });
+      
+      // Invalidate validation
+      queryClient.invalidateQueries({ queryKey: ["staff-user-validation"] });
+      
+      // Call the provided callback if it exists
+      if (onSuccess) {
+        onSuccess(data,);
+      }
+    },
+  });
+};

compliance-web/src/routes/_authenticated/admin/staff.tsx

@@ -9,7 +9,6 @@ import { useModal } from "@/store/modalStore";
 import { notify } from "@/store/snackbarStore";
 import { DeleteOutlineRounded, EditOutlined } from "@mui/icons-material";
 import { Box, Chip, IconButton } from "@mui/material";
-import { useQueryClient } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { BCDesignTokens } from "epic.theme";
 import { MRT_ColumnDef } from "material-react-table";
@@ -35,7 +34,6 @@ function AuthorizedStaffComponent() {
 const STAFF_MODAL_WIDTH = "520px";
 
 export function Staff() {
-  const queryClient = useQueryClient();
   const { setOpen, setClose } = useModal();
   const { data: staffUsersList, isLoading } = useStaffUsersData({
     isActive: false,
@@ -77,7 +75,6 @@ export function Staff() {
   }, [staffUsersList]);
 
   const handleOnSubmit = (submitMsg: string) => {
-    queryClient.invalidateQueries({ queryKey: ["staff-users"] });
     setClose();
     notify.success(submitMsg);
   };
@@ -99,8 +96,6 @@ export function Staff() {
   /** Staff Deletion START */
 
   const onDeleteSuccess = () => {
-    queryClient.invalidateQueries({ queryKey: ["staff-users"] });
-    queryClient.invalidateQueries({ queryKey: ["staff-user-validation"] });
     setClose();
     notify.success("Staff deleted successfully!");
   };