added keyfactory for where mutations exist (#307)

* added key factory for tests

* added key factory for interactions

* added keyfactory for traineeInfo

Author: zalexa19

client/src/features/trainee-profile/education/tests/TestsComponent.tsx

@@ -6,7 +6,6 @@ import { ConfirmationDialog } from '../../../../components/ConfirmationDialog';
 import { Test } from '../../../../data/types/Trainee';
 import { TestDetailsModal } from './TestDetailsModal';
 import { TestsList } from './TestsList';
-import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useTraineeProfileContext } from '../../context/useTraineeProfileContext';
 
@@ -23,9 +22,7 @@ export const TestsComponent = () => {
   const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
 
   const [idToDelete, setIdToDelete] = useState<string>('');
-  const queryClient = useQueryClient();
   const handleSuccess = () => {
-    queryClient.invalidateQueries({ queryKey: ['tests', traineeId] });
     setIsModalOpen(false);
     setInitialTest(null);
   };
@@ -91,7 +88,6 @@ export const TestsComponent = () => {
     deleteTest(idToDelete, {
       onSuccess: () => {
         setIsConfirmationDialogOpen(false);
-        queryClient.invalidateQueries({ queryKey: ['tests', traineeId] });
       },
     });
   };

client/src/features/trainee-profile/education/tests/data/keys.ts

@@ -0,0 +1,5 @@
+const TESTS_QUERY_KEY = 'tests';
+
+export const testsQueryKeys = {
+  list: (traineeId: string) => [TESTS_QUERY_KEY, 'list', traineeId] as const,
+};

client/src/features/trainee-profile/education/tests/data/test-queries.ts

@@ -1,15 +1,21 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { addTest, deleteTest, editTest, getTests } from '../api/api';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
 import { Test } from '../../../../../data/types/Trainee';
-import { getTests, addTest, deleteTest, editTest } from '../api/api';
+import { testsQueryKeys } from './keys';
 
 /**
  * Hook to add a test to a trainee.
  * @param {string} traineeId the id of the trainee to add the test to.
  * @param {Test} test the test to add.
  */
 export const useAddTest = (traineeId: string) => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: (test: Test) => addTest(traineeId, test),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: testsQueryKeys.list(traineeId) });
+    },
   });
 };
 
@@ -20,7 +26,7 @@ export const useAddTest = (traineeId: string) => {
  */
 export const useGetTests = (traineeId: string) => {
   return useQuery({
-    queryKey: ['tests', traineeId],
+    queryKey: testsQueryKeys.list(traineeId),
     queryFn: async () => {
       const data = await getTests(traineeId);
       return orderTestsByDateDesc(data);
@@ -38,8 +44,12 @@ export const useGetTests = (traineeId: string) => {
  * */
 
 export const useDeleteTest = (traineeId: string) => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: (testId: string) => deleteTest(traineeId, testId),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: testsQueryKeys.list(traineeId) });
+    },
   });
 };
 
@@ -48,8 +58,12 @@ export const useDeleteTest = (traineeId: string) => {
  * @param {string} traineeId the id of the trainee to edit the test of.
  */
 export const useEditTest = (traineeId: string) => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: (test: Test) => editTest(traineeId, test),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: testsQueryKeys.list(traineeId) });
+    },
   });
 };
 

client/src/features/trainee-profile/interactions/data/interaction-queries.ts

@@ -1,6 +1,8 @@
+import { addInteraction, deleteInteraction, editInteraction, getInteractions } from '../api/api';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
 import { Interaction } from '../Interactions';
-import { getInteractions, addInteraction, deleteInteraction, editInteraction } from '../api/api';
+import { interactionsQueryKeys } from './keys';
 
 /**
  * gets all interactions for a trainee
@@ -9,7 +11,7 @@ import { getInteractions, addInteraction, deleteInteraction, editInteraction } f
  */
 export const useGetInteractions = (traineeId: string) => {
   return useQuery({
-    queryKey: ['interactions', traineeId],
+    queryKey: interactionsQueryKeys.list(traineeId),
     queryFn: async () => {
       const interactions = await getInteractions(traineeId);
       return orderInteractionsByDateDesc(interactions);
@@ -34,8 +36,8 @@ export const useAddInteraction = (traineeId: string) => {
   // partial because not all fields are sent to the backend
   return useMutation({
     mutationFn: (interaction: Partial<Interaction>) => addInteraction(traineeId, interaction),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['interactions', traineeId] });
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: interactionsQueryKeys.list(traineeId) });
     },
   });
 };
@@ -50,8 +52,8 @@ export const useDeleteInteraction = (traineeId: string) => {
 
   return useMutation({
     mutationFn: (interactionId: string) => deleteInteraction(traineeId, interactionId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['interactions', traineeId] });
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: interactionsQueryKeys.list(traineeId) });
     },
   });
 };
@@ -65,8 +67,8 @@ export const useEditInteraction = (traineeId: string) => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: (interaction: Interaction) => editInteraction(traineeId, interaction),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['interactions', traineeId] });
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: interactionsQueryKeys.list(traineeId) });
     },
   });
 };

client/src/features/trainee-profile/interactions/data/keys.ts

@@ -0,0 +1,5 @@
+const INTERACTIONS_QUERY_KEY = 'interactions';
+
+export const interactionsQueryKeys = {
+  list: (traineeId: string) => [INTERACTIONS_QUERY_KEY, 'list', traineeId] as const,
+};

client/src/features/trainee-profile/personal-info/data/keys.ts

@@ -0,0 +1,5 @@
+const TRAINEE_QUERY_KEY = 'traineeInfo';
+
+export const traineeQueryKeys = {
+  details: (traineeId: string) => [TRAINEE_QUERY_KEY, 'details', traineeId] as const,
+};

client/src/features/trainee-profile/personal-info/data/useTraineeInfoData.tsx

@@ -1,8 +1,9 @@
 import { getTrainee, updateTrainee } from '../api/api';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { Trainee } from '../../../../data/types/Trainee';
 import { UpdateTraineeRequestData } from '../api/types';
+import { traineeQueryKeys } from './keys';
 
 /**
  * A React Query hook that fetches trainee information data form api.
@@ -11,7 +12,7 @@ import { UpdateTraineeRequestData } from '../api/types';
  */
 export const useTraineeInfoData = (traineeId: string) => {
   return useQuery<Trainee, Error>({
-    queryKey: ['traineeInfo', traineeId],
+    queryKey: traineeQueryKeys.details(traineeId),
     queryFn: () => getTrainee(traineeId),
     enabled: !!traineeId,
     //Added because it keeps rendering
@@ -27,8 +28,12 @@ export const useTraineeInfoData = (traineeId: string) => {
  * @param {string} traineeId trainee id
  */
 export const useSaveTraineeInfo = (traineeId: string) => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: (dataToSave: UpdateTraineeRequestData) => updateTrainee(traineeId, dataToSave),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: traineeQueryKeys.details(traineeId) });
+    },
   });
 };
 

client/src/features/trainee-profile/profile/components/TraineeProfile.tsx

@@ -16,7 +16,6 @@ import PersonalInfo from '../../personal-info/PersonalInfo';
 import ProfileNav from './ProfileNav';
 import ProfileSidebar from '../ProfileSidebar';
 import { Trainee } from '../../../../data/types/Trainee';
-import { useQueryClient } from '@tanstack/react-query';
 import { useTraineeProfileContext } from '../../context/useTraineeProfileContext';
 
 interface TraineeProfileProps {
@@ -35,7 +34,6 @@ const TraineeProfile = ({ id }: TraineeProfileProps) => {
   const { data: traineeData } = useTraineeInfoData(id);
   const { isPending: isSaveLoading, mutate } = useSaveTraineeInfo(id);
   const { isEditMode, setTrainee, setIsEditMode, getTraineeInfoChanges } = useTraineeProfileContext();
-  const queryClient = useQueryClient();
 
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [snackbarSeverity, setSnackbarSeverity] = useState<'success' | 'error'>('success');
@@ -68,8 +66,6 @@ const TraineeProfile = ({ id }: TraineeProfileProps) => {
         setSnackbarSeverity('success');
         setSnackbarMessage('Trainee data saved successfully');
         setTrainee(data);
-
-        queryClient.invalidateQueries({ queryKey: ['traineeInfo', id] });
         setIsEditMode(false);
       },
       onError: (error: Error) => {