React Query Integration for Server State Sync in Clinet #245
@ -7,6 +7,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import showToast from "../services/toastService";
|
||||
import {useSelector} from "react-redux";
|
||||
import {store} from "../store/store";
|
||||
import {queryClient} from "../layouts/AuthLayout";
|
||||
|
||||
|
||||
// export const useAllEmployees = (showInactive) => {
|
||||
@ -397,7 +398,8 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
|
||||
};
|
||||
|
||||
// ManageEmployee.jsx
|
||||
export const useEmployeeProfile = (employeeId) => {
|
||||
export const useEmployeeProfile = ( employeeId ) =>
|
||||
{
|
||||
const isEnabled = !!employeeId;
|
||||
|
||||
const {
|
||||
@ -412,6 +414,11 @@ export const useEmployeeProfile = (employeeId) => {
|
||||
return res.data;
|
||||
},
|
||||
enabled: isEnabled,
|
||||
// initialData: () => {
|
||||
// if (!queryClient) return null;
|
||||
// return queryClient.getQueryData(['employeeProfile', employeeId]) || null;
|
||||
// },
|
||||
|
||||
});
|
||||
|
||||
return {
|
||||
@ -429,19 +436,19 @@ export const useEmployeeProfile = (employeeId) => {
|
||||
export const useUpdateEmployee = () =>
|
||||
{
|
||||
const selectedProject = useSelector((store)=>store.localVariables.projectId)
|
||||
const queryClient = useQueryClient();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (employeeData) => EmployeeRepository.manageEmployee(employeeData),
|
||||
onSuccess: (_, variables) => {
|
||||
const id = variables.id || variables.employeeId;
|
||||
|
||||
const isAllEmployee = variables.IsAllEmployee;
|
||||
// Cache invalidation
|
||||
queryClient.invalidateQueries( ['allEmployee',false]);
|
||||
queryClient.invalidateQueries(['employeeProfile', id]);
|
||||
queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
|
||||
queryClient.invalidateQueries( [ 'allEmployee', isAllEmployee ] );
|
||||
// queryClient.invalidateQueries(['employeeProfile', id]);
|
||||
// queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
|
||||
|
||||
queryClient.invalidateQueries( [ 'employeeListByProject' ,selectedProject] );
|
||||
// queryClient.invalidateQueries( [ 'employeeListByProject' ,selectedProject] );
|
||||
showToast( `Employee ${ id ? 'updated' : 'created' } successfully`, 'success' );
|
||||
},
|
||||
onError: (error) => {
|
||||
@ -465,7 +472,7 @@ export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing })
|
||||
onSuccess: () => {
|
||||
showToast("Employee deleted successfully.", "success");
|
||||
|
||||
queryClient.invalidateQueries( ['allEmployee',false]);
|
||||
// queryClient.invalidateQueries( ['allEmployee',false]);
|
||||
queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
|
||||
queryClient.invalidateQueries( [ 'employeeListByProject' ,selectedProject] );
|
||||
|
||||
|
@ -79,7 +79,7 @@ export const useProfile = () => {
|
||||
return response.data;
|
||||
},
|
||||
initialData: loggedUser || undefined,
|
||||
enabled: true,
|
||||
enabled: !loggedUser,
|
||||
staleTime: 10 * 60 * 1000,
|
||||
});
|
||||
|
||||
|
@ -6,8 +6,8 @@ export const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 5 * 60 * 1000, // 5 min: data considered fresh
|
||||
refetchOnWindowFocus: false, // refresh on tab switch
|
||||
refetchOnReconnect: false, // re-fetch if network was lost
|
||||
refetchOnWindowFocus: true, // refresh on tab switch
|
||||
refetchOnReconnect: true, // re-fetch if network was lost
|
||||
retry: false,
|
||||
},
|
||||
},
|
||||
|
Loading…
x
Reference in New Issue
Block a user