Fixed refetch query for GetCommentThreadsByTargets (#336)

* Fixed refetch query for GetCommentThreadsByTargets

* Improvement : use apollo util getOperationName to de-hard code refetch queries arrays

front/src/modules/comments/components/CommentThread.tsx

@@ -1,15 +1,20 @@
+import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { CommentThreadForDrawer } from '@/comments/types/CommentThreadForDrawer';
+import { GET_COMPANIES } from '@/companies/services';
+import { GET_PEOPLE } from '@/people/services';
 import { AutosizeTextInput } from '@/ui/components/inputs/AutosizeTextInput';
 import { logError } from '@/utils/logs/logError';
 import { isDefined } from '@/utils/type-guards/isDefined';
 import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString';
 import { useCreateCommentMutation } from '~/generated/graphql';
 
+import { GET_COMMENT_THREADS_BY_TARGETS } from '../services';
+
 import { CommentThreadItem } from './CommentThreadItem';
 import { CommentThreadRelationPicker } from './CommentThreadRelationPicker';
 
@@ -67,12 +72,10 @@ export function CommentThread({ commentThread }: OwnProps) {
         commentText,
         createdAt: new Date().toISOString(),
       },
-      // TODO: find a way to have this configuration dynamic and typed
-      // Also it cannot refetch queries than are not in the cache
       refetchQueries: [
-        'GetCommentThreadsByTargets',
+        getOperationName(GET_COMPANIES) ?? '',
-        'GetCompanies',
+        getOperationName(GET_PEOPLE) ?? '',
-        'GetPeople',
+        getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
       ],
       onError: (error) => {
         logError(

front/src/modules/comments/components/CommentThreadCreateMode.tsx

@@ -1,3 +1,4 @@
+import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
@@ -5,6 +6,8 @@ import { v4 } from 'uuid';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { commentableEntityArrayState } from '@/comments/states/commentableEntityArrayState';
 import { createdCommentThreadIdState } from '@/comments/states/createdCommentThreadIdState';
+import { GET_COMPANIES } from '@/companies/services';
+import { GET_PEOPLE } from '@/people/services';
 import { AutosizeTextInput } from '@/ui/components/inputs/AutosizeTextInput';
 import { useOpenRightDrawer } from '@/ui/layout/right-drawer/hooks/useOpenRightDrawer';
 import { logError } from '@/utils/logs/logError';
@@ -16,6 +19,8 @@ import {
   useGetCommentThreadQuery,
 } from '~/generated/graphql';
 
+import { GET_COMMENT_THREAD } from '../services';
+
 import { CommentThreadItem } from './CommentThreadItem';
 
 const StyledContainer = styled.div`
@@ -99,7 +104,11 @@ export function CommentThreadCreateMode() {
             }),
           ),
         },
-        refetchQueries: ['GetCommentThread', 'GetCompanies', 'GetPeople'],
+        refetchQueries: [
+          getOperationName(GET_COMPANIES) ?? '',
+          getOperationName(GET_PEOPLE) ?? '',
+          getOperationName(GET_COMMENT_THREAD) ?? '',
+        ],
         onCompleted(data) {
           setCreatedCommentThreadId(data.createOneCommentThread.id);
           openRightDrawer('comments');
@@ -114,8 +123,7 @@ export function CommentThreadCreateMode() {
           commentText,
           createdAt: new Date().toISOString(),
         },
-        // TODO: find a way to have this configuration dynamic and typed
+        refetchQueries: [getOperationName(GET_COMMENT_THREAD) ?? ''],
-        refetchQueries: ['GetCommentThread'],
         onError: (error) => {
           logError(
             `In handleCreateCommentThread, createCommentMutation onError, error: ${error}`,

front/src/modules/comments/hooks/useHandleCheckableCommentThreadTargetChange.ts

@@ -1,11 +1,15 @@
+import { getOperationName } from '@apollo/client/utilities';
 import { v4 } from 'uuid';
 
+import { GET_COMPANIES } from '@/companies/services';
+import { GET_PEOPLE } from '@/people/services';
 import {
   useAddCommentThreadTargetOnCommentThreadMutation,
   useRemoveCommentThreadTargetOnCommentThreadMutation,
 } from '~/generated/graphql';
 
 import { EntityForSelect } from '../components/MultipleEntitySelect';
+import { GET_COMMENT_THREADS_BY_TARGETS } from '../services';
 import { CommentThreadForDrawer } from '../types/CommentThreadForDrawer';
 
 export function useHandleCheckableCommentThreadTargetChange({
@@ -15,12 +19,20 @@ export function useHandleCheckableCommentThreadTargetChange({
 }) {
   const [addCommentThreadTargetOnCommentThread] =
     useAddCommentThreadTargetOnCommentThreadMutation({
-      refetchQueries: ['GetCompanies', 'GetPeople'],
+      refetchQueries: [
+        getOperationName(GET_COMPANIES) ?? '',
+        getOperationName(GET_PEOPLE) ?? '',
+        getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
+      ],
     });
 
   const [removeCommentThreadTargetOnCommentThread] =
     useRemoveCommentThreadTargetOnCommentThreadMutation({
-      refetchQueries: ['GetCompanies', 'GetPeople'],
+      refetchQueries: [
+        getOperationName(GET_COMPANIES) ?? '',
+        getOperationName(GET_PEOPLE) ?? '',
+        getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
+      ],
     });
 
   return function handleCheckItemChange(

front/src/modules/companies/services/update.ts

@@ -1,10 +1,13 @@
 import { FetchResult, gql } from '@apollo/client';
+import { getOperationName } from '@apollo/client/utilities';
 
 import { apiClient } from '~/apollo';
 
 import { UpdateCompanyMutationVariables } from '../../../generated/graphql';
 import { Company, mapToGqlCompany } from '../interfaces/company.interface';
 
+import { GET_COMPANIES } from './select';
+
 export const UPDATE_COMPANY = gql`
   mutation UpdateCompany(
     $id: String
@@ -94,7 +97,7 @@ export async function insertCompany(
   const result = await apiClient.mutate({
     mutation: INSERT_COMPANY,
     variables: mapToGqlCompany(company),
-    refetchQueries: ['GetCompanies'],
+    refetchQueries: [getOperationName(GET_COMPANIES) ?? ''],
   });
 
   return result;

front/src/modules/people/services/update.ts

@@ -1,8 +1,11 @@
 import { FetchResult, gql } from '@apollo/client';
+import { getOperationName } from '@apollo/client/utilities';
 
 import { apiClient } from '../../../apollo';
 import { mapToGqlPerson, Person } from '../interfaces/person.interface';
 
+import { GET_PEOPLE } from './select';
+
 export const UPDATE_PERSON = gql`
   mutation UpdatePeople(
     $id: String
@@ -104,7 +107,7 @@ export async function insertPerson(
   const result = await apiClient.mutate({
     mutation: INSERT_PERSON,
     variables: mapToGqlPerson(person),
-    refetchQueries: ['GetPeople'],
+    refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
   });
 
   return result;

front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx

@@ -1,5 +1,7 @@
+import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilValue } from 'recoil';
 
+import { GET_COMPANIES } from '@/companies/services';
 import { EntityTableActionBarButton } from '@/ui/components/table/action-bar/EntityTableActionBarButton';
 import { IconTrash } from '@/ui/icons/index';
 import { useResetTableRowSelection } from '@/ui/tables/hooks/useResetTableRowSelection';
@@ -12,7 +14,7 @@ export function TableActionBarButtonDeleteCompanies() {
   const resetRowSelection = useResetTableRowSelection();
 
   const [deleteCompanies] = useDeleteCompaniesMutation({
-    refetchQueries: ['GetCompanies'],
+    refetchQueries: [getOperationName(GET_COMPANIES) ?? ''],
   });
 
   async function handleDeleteClick() {

front/src/pages/people/table/TableActionBarButtonDeletePeople.tsx

@@ -1,5 +1,7 @@
+import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilValue } from 'recoil';
 
+import { GET_PEOPLE } from '@/people/services';
 import { EntityTableActionBarButton } from '@/ui/components/table/action-bar/EntityTableActionBarButton';
 import { IconTrash } from '@/ui/icons/index';
 import { useResetTableRowSelection } from '@/ui/tables/hooks/useResetTableRowSelection';
@@ -12,7 +14,7 @@ export function TableActionBarButtonDeletePeople() {
   const resetRowSelection = useResetTableRowSelection();
 
   const [deletePeople] = useDeletePeopleMutation({
-    refetchQueries: ['GetPeople'],
+    refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
   });
 
   async function handleDeleteClick() {