Upgrade Apollo Client to v4 and refactor error handling (#18584)

## Summary
This PR upgrades Apollo Client from v3.10.0 to v4 and refactors error
handling patterns across the codebase to use a new centralized
`useSnackBarOnQueryError` hook.

## Key Changes

- **Dependency Update**: Upgraded `@apollo/client` from `^3.10.0` to
`^3.11.0` in root package.json
- **New Hook**: Added `useSnackBarOnQueryError` hook for centralized
Apollo query error handling with snack bar notifications
- **Error Handling Refactor**: Updated 100+ files to use the new error
handling pattern:
  - Removed direct `ApolloError` imports where no longer needed
- Replaced manual error handling logic with `useSnackBarOnQueryError`
hook
- Simplified error handling in hooks and components across multiple
modules
- **GraphQL Codegen**: Updated codegen configuration files to work with
Apollo Client v3.11.0
- **Type Definitions**: Added TypeScript declaration file for
`apollo-upload-client` module
- **Test Updates**: Updated test files to reflect new error handling
patterns

## Notable Implementation Details

- The new `useSnackBarOnQueryError` hook provides a consistent way to
handle Apollo query errors with automatic snack bar notifications
- Changes span across multiple feature areas: auth, object records,
settings, workflows, billing, and more
- All changes maintain backward compatibility while improving code
maintainability and reducing duplication
- Jest configuration updated to work with the new Apollo Client version

https://claude.ai/code/session_019WGZ6Rd7sEHuBg9sTrXRqJ

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Félix Malfait
2026-03-13 14:59:46 +01:00
committed by GitHub
parent 172bbd01bc
commit b470cb21a1
386 changed files with 3482 additions and 13593 deletions
@@ -1,9 +1,12 @@
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import { renderHook } from '@testing-library/react';
import { type ComputeStepOutputSchemaInput } from '~/generated/graphql';
import { useComputeStepOutputSchema } from '@/workflow/hooks/useComputeStepOutputSchema';
jest.mock('@apollo/client');
jest.mock('@apollo/client/react', () => ({
...jest.requireActual('@apollo/client/react'),
useMutation: jest.fn(),
}));
jest.mock('@/object-metadata/hooks/useApolloCoreClient', () => ({
useApolloCoreClient: () => ({}),
}));
@@ -16,7 +19,7 @@ describe('useComputeStepOutputSchema', () => {
};
const mockMutate = jest.fn().mockResolvedValue(mockResponse);
(useMutation as jest.Mock).mockReturnValue([mockMutate]);
(useMutation as unknown as jest.Mock).mockReturnValue([mockMutate]);
const { result } = renderHook(() => useComputeStepOutputSchema());
const response = await result.current.computeStepOutputSchema(
@@ -1,4 +1,4 @@
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import { triggerUpdateRecordOptimisticEffect } from '@/apollo/optimistic-effect/utils/triggerUpdateRecordOptimisticEffect';
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
@@ -64,15 +64,18 @@ export const useActivateWorkflowVersion = () => {
},
});
const cacheSnapshot = apolloCoreClient.cache.extract();
const cacheSnapshot = apolloCoreClient.cache.extract() as Record<
string,
Record<string, unknown>
>;
const allWorkflowVersions: Array<WorkflowVersion> = Object.values(
cacheSnapshot,
const allWorkflowVersions = (
Object.values(cacheSnapshot) as Array<Record<string, unknown>>
).filter(
(item) =>
item.__typename === 'WorkflowVersion' &&
item.workflowId === workflowId,
);
) as Array<WorkflowVersion>;
const previousActiveWorkflowVersions = allWorkflowVersions.filter(
(version) =>
@@ -1,6 +1,6 @@
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { COMPUTE_STEP_OUTPUT_SCHEMA } from '@/workflow/graphql/mutations/computeStepOutputSchema';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import {
type ComputeStepOutputSchemaInput,
type ComputeStepOutputSchemaMutation,
@@ -1,15 +1,16 @@
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { CoreObjectNameSingular } from 'twenty-shared/types';
import { useFindManyRecordsQuery } from '@/object-record/hooks/useFindManyRecordsQuery';
import { useMutation } from '@apollo/client/react';
import {
type CreateDraftFromWorkflowVersionInput,
useCreateDraftFromWorkflowVersionMutation,
CreateDraftFromWorkflowVersionDocument,
} from '~/generated/graphql';
export const useCreateDraftFromWorkflowVersion = () => {
const apolloCoreClient = useApolloCoreClient();
const [mutate] = useCreateDraftFromWorkflowVersionMutation({
const [mutate] = useMutation(CreateDraftFromWorkflowVersionDocument, {
client: apolloCoreClient,
});
@@ -1,4 +1,4 @@
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import { triggerUpdateRecordOptimisticEffect } from '@/apollo/optimistic-effect/utils/triggerUpdateRecordOptimisticEffect';
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
@@ -62,14 +62,17 @@ export const useDeactivateWorkflowVersion = () => {
},
});
const cacheSnapshot = apolloCoreClient.cache.extract();
const workflowVersion: WorkflowVersion | undefined = Object.values(
cacheSnapshot,
const cacheSnapshot = apolloCoreClient.cache.extract() as Record<
string,
Record<string, unknown>
>;
const workflowVersion = (
Object.values(cacheSnapshot) as Array<Record<string, unknown>>
).find(
(item) =>
item.__typename === 'WorkflowVersion' &&
item.id === workflowVersionId,
);
) as WorkflowVersion | undefined;
if (!isDefined(workflowVersion)) {
return;
@@ -1,7 +1,7 @@
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { CoreObjectNameSingular } from 'twenty-shared/types';
import { useFindManyRecordsQuery } from '@/object-record/hooks/useFindManyRecordsQuery';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import {
type DuplicateWorkflowInput,
type WorkflowVersionDto,
@@ -19,7 +19,7 @@ import { RUN_WORKFLOW_VERSION } from '@/workflow/graphql/mutations/runWorkflowVe
import { type WorkflowRun } from '@/workflow/types/Workflow';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useCallback } from 'react';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import { isDefined } from 'twenty-shared/utils';
import { v4 } from 'uuid';
import {
@@ -2,11 +2,12 @@ import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { CoreObjectNameSingular } from 'twenty-shared/types';
import { dispatchObjectRecordOperationBrowserEvent } from '@/browser-event/utils/dispatchObjectRecordOperationBrowserEvent';
import { useStopWorkflowRunMutation } from '~/generated/graphql';
import { useMutation } from '@apollo/client/react';
import { StopWorkflowRunDocument } from '~/generated/graphql';
export const useStopWorkflowRun = () => {
const apolloCoreClient = useApolloCoreClient();
const [mutate] = useStopWorkflowRunMutation({
const [mutate] = useMutation(StopWorkflowRunDocument, {
client: apolloCoreClient,
});
@@ -4,9 +4,10 @@ import { useUpdateAgentLabel } from '@/workflow/workflow-steps/hooks/useUpdateAg
const mockUpdateAgent = jest.fn();
const mockUseFindOneAgentQuery = jest.fn();
jest.mock('~/generated-metadata/graphql', () => ({
useFindOneAgentQuery: jest.fn(),
useUpdateOneAgentMutation: () => [mockUpdateAgent],
jest.mock('@apollo/client/react', () => ({
...jest.requireActual('@apollo/client/react'),
useQuery: (...args: unknown[]) => mockUseFindOneAgentQuery(...args),
useMutation: () => [mockUpdateAgent],
}));
describe('useUpdateAgentLabel', () => {
@@ -15,15 +16,12 @@ describe('useUpdateAgentLabel', () => {
mockUseFindOneAgentQuery.mockReturnValue({
data: undefined,
});
(
require('~/generated-metadata/graphql').useFindOneAgentQuery as jest.Mock
).mockImplementation(mockUseFindOneAgentQuery);
});
it('should skip query when agentId is undefined', () => {
renderHook(() => useUpdateAgentLabel(undefined));
expect(mockUseFindOneAgentQuery).toHaveBeenCalledWith({
expect(mockUseFindOneAgentQuery).toHaveBeenCalledWith(expect.anything(), {
variables: { id: '' },
skip: true,
});
@@ -43,7 +41,7 @@ describe('useUpdateAgentLabel', () => {
renderHook(() => useUpdateAgentLabel('agent-123'));
expect(mockUseFindOneAgentQuery).toHaveBeenCalledWith({
expect(mockUseFindOneAgentQuery).toHaveBeenCalledWith(expect.anything(), {
variables: { id: 'agent-123' },
skip: false,
});
@@ -1,5 +1,5 @@
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import {
type CreateWorkflowVersionEdgeMutation,
type CreateWorkflowVersionEdgeMutationVariables,
@@ -1,6 +1,6 @@
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { CREATE_WORKFLOW_VERSION_STEP } from '@/workflow/graphql/mutations/createWorkflowVersionStep';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import {
type CreateWorkflowVersionStepInput,
type CreateWorkflowVersionStepMutation,
@@ -1,5 +1,5 @@
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import {
type CreateWorkflowVersionEdgeInput,
type DeleteWorkflowVersionEdgeMutation,
@@ -3,7 +3,7 @@ import { CoreObjectNameSingular } from 'twenty-shared/types';
import { useFindOneRecordQuery } from '@/object-record/hooks/useFindOneRecordQuery';
import { DELETE_WORKFLOW_VERSION_STEP } from '@/workflow/graphql/mutations/deleteWorkflowVersionStep';
import { useUpdateWorkflowVersionCache } from '@/workflow/workflow-steps/hooks/useUpdateWorkflowVersionCache';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import {
type DeleteWorkflowVersionStepInput,
type DeleteWorkflowVersionStepMutation,
@@ -3,7 +3,7 @@ import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSe
import { DUPLICATE_WORKFLOW_VERSION_STEP } from '@/workflow/graphql/mutations/duplicateWorkflowVersionStep';
import { flowComponentState } from '@/workflow/states/flowComponentState';
import { useUpdateWorkflowVersionCache } from '@/workflow/workflow-steps/hooks/useUpdateWorkflowVersionCache';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import { isDefined } from 'twenty-shared/utils';
import {
type DuplicateWorkflowVersionStepInput,
@@ -1,16 +1,17 @@
import { isDefined } from 'twenty-shared/utils';
import { useQuery, useMutation } from '@apollo/client/react';
import {
useFindOneAgentQuery,
useUpdateOneAgentMutation,
FindOneAgentDocument,
UpdateOneAgentDocument,
} from '~/generated-metadata/graphql';
export const useUpdateAgentLabel = (agentId: string | undefined) => {
const { data: agentData } = useFindOneAgentQuery({
const { data: agentData } = useQuery(FindOneAgentDocument, {
variables: { id: agentId || '' },
skip: !isDefined(agentId),
});
const [updateAgent] = useUpdateOneAgentMutation();
const [updateAgent] = useMutation(UpdateOneAgentDocument);
const agent = agentData?.findOneAgent;
@@ -7,7 +7,7 @@ import { updateRecordFromCache } from '@/object-record/cache/utils/updateRecordF
import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
import { UPDATE_WORKFLOW_RUN_STEP } from '@/workflow/graphql/mutations/updateWorkflowRunStep';
import { type WorkflowStep, type WorkflowRun } from '@/workflow/types/Workflow';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import { isDefined } from 'twenty-shared/utils';
import {
type UpdateWorkflowRunStepInput,
@@ -10,7 +10,7 @@ import {
type WorkflowVersion,
type WorkflowStep,
} from '@/workflow/types/Workflow';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import { isDefined } from 'twenty-shared/utils';
import {
type UpdateWorkflowVersionStepInput,
@@ -14,7 +14,8 @@ import { useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { IconChevronLeft } from 'twenty-ui/display';
import { IconButton } from 'twenty-ui/input';
import { type Agent, useGetRolesQuery } from '~/generated-metadata/graphql';
import { useQuery } from '@apollo/client/react';
import { type Agent, GetRolesDocument } from '~/generated-metadata/graphql';
import { SidePanelSkeletonLoader } from '~/loading/components/SidePanelSkeletonLoader';
import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
@@ -96,7 +97,7 @@ export const WorkflowAiAgentPermissionsTab = ({
data: rolesData,
loading: rolesLoading,
refetch: refetchRoles,
} = useGetRolesQuery();
} = useQuery(GetRolesDocument);
const [searchQuery, setSearchQuery] = useState('');
const role = rolesData?.getRoles.find(
@@ -18,7 +18,7 @@ import { workflowAiAgentActionAgentState } from '@/workflow/workflow-steps/workf
import { workflowAiAgentPermissionsIsAddingPermissionState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentPermissionsIsAddingPermissionState';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import {
type AgentResponseSchema,
type ModelConfiguration,
@@ -27,10 +27,11 @@ import { SettingsPath } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { IconLock, IconSparkles } from 'twenty-ui/display';
import { useDebouncedCallback } from 'use-debounce';
import { useQuery, useMutation } from '@apollo/client/react';
import {
useFindOneAgentQuery,
useGetRolesQuery,
useUpdateOneAgentMutation,
FindOneAgentDocument,
GetRolesDocument,
UpdateOneAgentDocument,
} from '~/generated-metadata/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { SidePanelSkeletonLoader } from '~/loading/components/SidePanelSkeletonLoader';
@@ -64,17 +65,22 @@ export const WorkflowEditActionAiAgent = ({
const agentId = action.settings.input.agentId;
const [workflowAiAgentActionAgent, setWorkflowAiAgentActionAgent] =
useAtomState(workflowAiAgentActionAgentState);
const { loading: agentLoading, refetch: refetchAgent } = useFindOneAgentQuery(
{
variables: { id: agentId || '' },
skip: !agentId,
onCompleted: (data) => {
setWorkflowAiAgentActionAgent(data.findOneAgent);
},
},
);
const {
data: agentData,
loading: agentLoading,
refetch: refetchAgent,
} = useQuery(FindOneAgentDocument, {
variables: { id: agentId || '' },
skip: !agentId,
});
useEffect(() => {
if (agentData?.findOneAgent) {
setWorkflowAiAgentActionAgent(agentData.findOneAgent);
}
}, [agentData, setWorkflowAiAgentActionAgent]);
useResetWorkflowAiAgentPermissionsStateOnSidePanelClose();
const [updateAgent] = useUpdateOneAgentMutation();
const [updateAgent] = useMutation(UpdateOneAgentDocument);
const aiModelOptions = useAiModelOptions();
const { updateWorkflowVersionStep } = useUpdateWorkflowVersionStep();
const flow = useFlowOrThrow();
@@ -208,7 +214,7 @@ export const WorkflowEditActionAiAgent = ({
(activeTabId as WorkflowAiAgentTabId) ?? WORKFLOW_AI_AGENT_TABS.PROMPT;
const navigateSettings = useNavigateSettings();
const { data: rolesData } = useGetRolesQuery();
const { data: rolesData } = useQuery(GetRolesDocument);
const [
workflowAiAgentPermissionsIsAddingPermission,
@@ -12,14 +12,15 @@ import { t } from '@lingui/core/macro';
import { useMemo } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { v4 } from 'uuid';
import { useMutation } from '@apollo/client/react';
import {
useAssignRoleToAgentMutation,
useCreateOneRoleMutation,
useUpsertObjectPermissionsMutation,
useUpsertPermissionFlagsMutation,
type Agent,
type ObjectPermission,
type PermissionFlagType,
AssignRoleToAgentDocument,
CreateOneRoleDocument,
UpsertObjectPermissionsDocument,
UpsertPermissionFlagsDocument,
} from '~/generated-metadata/graphql';
type UseWorkflowAiAgentPermissionActionsParams = {
@@ -54,10 +55,12 @@ export const useWorkflowAiAgentPermissionActions = ({
workflowAiAgentPermissionsIsAddingPermissionState,
);
const [createRole] = useCreateOneRoleMutation();
const [assignRoleToAgent] = useAssignRoleToAgentMutation();
const [upsertObjectPermissions] = useUpsertObjectPermissionsMutation();
const [upsertPermissionFlags] = useUpsertPermissionFlagsMutation();
const [createRole] = useMutation(CreateOneRoleDocument);
const [assignRoleToAgent] = useMutation(AssignRoleToAgentDocument);
const [upsertObjectPermissions] = useMutation(
UpsertObjectPermissionsDocument,
);
const [upsertPermissionFlags] = useMutation(UpsertPermissionFlagsDocument);
const roleId = workflowAiAgentActionAgent?.roleId;
@@ -2,7 +2,7 @@ import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient
import { CoreObjectNameSingular } from 'twenty-shared/types';
import { useFindOneRecordQuery } from '@/object-record/hooks/useFindOneRecordQuery';
import { SUBMIT_FORM_STEP } from '@/workflow/workflow-steps/workflow-actions/form-action/graphql/mutations/submitFormStep';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import {
type SubmitFormStepInput,
type SubmitFormStepMutation,
@@ -1,14 +1,14 @@
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { type HttpRequestFormData } from '@/workflow/workflow-steps/workflow-actions/http-request-action/constants/HttpRequest';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import { act, renderHook } from '@testing-library/react';
import React from 'react';
import { resolveInput } from 'twenty-shared/utils';
import { useTestHttpRequest } from '@/workflow/workflow-steps/workflow-actions/http-request-action/hooks/useTestHttpRequest';
// Mock Apollo Client
jest.mock('@apollo/client', () => ({
...jest.requireActual('@apollo/client'),
jest.mock('@apollo/client/react', () => ({
...jest.requireActual('@apollo/client/react'),
useMutation: jest.fn(),
}));
@@ -91,7 +91,7 @@ describe('useTestHttpRequest', () => {
beforeEach(() => {
jest.clearAllMocks();
(useApolloCoreClient as jest.Mock).mockReturnValue(mockApolloClient);
(useMutation as jest.Mock).mockReturnValue([mockMutate]);
(useMutation as unknown as jest.Mock).mockReturnValue([mockMutate]);
});
it('should initialize with correct default values', () => {
@@ -7,7 +7,7 @@ import { TEST_HTTP_REQUEST } from '@/workflow/workflow-steps/workflow-actions/ht
import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
import { useSetAtomFamilyState } from '@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState';
import { httpRequestTestDataFamilyState } from '@/workflow/workflow-steps/workflow-actions/http-request-action/states/httpRequestTestDataFamilyState';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import { t } from '@lingui/core/macro';
import { isObject, isString } from '@sniptt/guards';
import { useState } from 'react';
@@ -1,6 +1,6 @@
import { type WorkflowVersion } from '@/workflow/types/Workflow';
import { type WorkflowDiagram } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
import { useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client/react';
import { isDefined } from 'twenty-shared/utils';
import {
type UpdateWorkflowVersionPositionsMutation,