houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
## 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
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/__tests__/useUpdateAgentLabel.test.tsx
+6 -8
View File
@@ -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,
});
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateWorkflowVersionEdge.ts
+1 -1
View File
@@ -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,
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep.ts
+1 -1
View File
@@ -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,
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useDeleteWorkflowVersionEdge.ts
+1 -1
View File
@@ -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,
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useDeleteWorkflowVersionStep.ts
+1 -1
View File
@@ -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,
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useDuplicateWorkflowVersionStep.ts
+1 -1
View File
@@ -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,
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useUpdateAgentLabel.ts
+5 -4
View File
@@ -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;
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useUpdateWorkflowRunStep.ts
+1 -1
View File
@@ -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,
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useUpdateWorkflowVersionStep.ts
+1 -1
View File
@@ -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,
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx
+3 -2
View File
@@ -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(
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowEditActionAiAgent.tsx
+21 -15
View File
@@ -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,
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useWorkflowAiAgentPermissionActions.ts
+11 -8
View File
@@ -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;
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/hooks/useSubmitFormStep.ts
+1 -1
View File
@@ -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,
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/hooks/__tests__/useTestHttpRequest.test.ts
+4 -4
View File
@@ -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', () => {
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/hooks/useTestHttpRequest.ts
+1 -1
View File
@@ -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';