From 950a0b77fef9a3972a0814c99fa255156d4de665 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 19 Jun 2023 17:44:05 +0200 Subject: [PATCH] Fixed refetch query for GetCommentThreadsByTargets (#336) * Fixed refetch query for GetCommentThreadsByTargets * Improvement : use apollo util getOperationName to de-hard code refetch queries arrays --- .../comments/components/CommentThread.tsx | 13 ++++++++----- .../components/CommentThreadCreateMode.tsx | 14 +++++++++++--- ...seHandleCheckableCommentThreadTargetChange.ts | 16 ++++++++++++++-- front/src/modules/companies/services/update.ts | 5 ++++- front/src/modules/people/services/update.ts | 5 ++++- .../TableActionBarButtonDeleteCompanies.tsx | 4 +++- .../table/TableActionBarButtonDeletePeople.tsx | 4 +++- 7 files changed, 47 insertions(+), 14 deletions(-) diff --git a/front/src/modules/comments/components/CommentThread.tsx b/front/src/modules/comments/components/CommentThread.tsx index 47b5476af..1a82cc6fd 100644 --- a/front/src/modules/comments/components/CommentThread.tsx +++ b/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', - 'GetCompanies', - 'GetPeople', + getOperationName(GET_COMPANIES) ?? '', + getOperationName(GET_PEOPLE) ?? '', + getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '', ], onError: (error) => { logError( diff --git a/front/src/modules/comments/components/CommentThreadCreateMode.tsx b/front/src/modules/comments/components/CommentThreadCreateMode.tsx index 6bebc7dc4..f5d82665c 100644 --- a/front/src/modules/comments/components/CommentThreadCreateMode.tsx +++ b/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: ['GetCommentThread'], + refetchQueries: [getOperationName(GET_COMMENT_THREAD) ?? ''], onError: (error) => { logError( `In handleCreateCommentThread, createCommentMutation onError, error: ${error}`, diff --git a/front/src/modules/comments/hooks/useHandleCheckableCommentThreadTargetChange.ts b/front/src/modules/comments/hooks/useHandleCheckableCommentThreadTargetChange.ts index 78aced722..0e224d00c 100644 --- a/front/src/modules/comments/hooks/useHandleCheckableCommentThreadTargetChange.ts +++ b/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( diff --git a/front/src/modules/companies/services/update.ts b/front/src/modules/companies/services/update.ts index 8e1fcd484..2c65c2d03 100644 --- a/front/src/modules/companies/services/update.ts +++ b/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; diff --git a/front/src/modules/people/services/update.ts b/front/src/modules/people/services/update.ts index 41b6979a4..449a4a092 100644 --- a/front/src/modules/people/services/update.ts +++ b/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; diff --git a/front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx b/front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx index 112a1100a..54314d5ae 100644 --- a/front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx +++ b/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() { diff --git a/front/src/pages/people/table/TableActionBarButtonDeletePeople.tsx b/front/src/pages/people/table/TableActionBarButtonDeletePeople.tsx index a3239cb73..2f0c76f08 100644 --- a/front/src/pages/people/table/TableActionBarButtonDeletePeople.tsx +++ b/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() {