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/object-metadata/contexts/ApolloCoreClientContext.ts
+2 -3
View File
@@ -1,5 +1,4 @@
import { createContext } from 'react';
import { type ApolloClient, type NormalizedCacheObject } from '@apollo/client';
import { type ApolloClient } from '@apollo/client';
export const ApolloCoreClientContext =
createContext<ApolloClient<NormalizedCacheObject> | null>(null);
export const ApolloCoreClientContext = createContext<ApolloClient | null>(null);
packages/twenty-front/src/modules/object-metadata/hooks/__mocks__/useCreateOneObjectMetadataItem.ts
+6 -56
View File
@@ -1,61 +1,11 @@
import { gql } from '@apollo/client';
import {
CreateOneObjectMetadataItemDocument,
FindManyCoreViewsDocument,
} from '~/generated-metadata/graphql';
export const query = gql`
mutation CreateOneObjectMetadataItem($input: CreateOneObjectInput!) {
createOneObject(input: $input) {
id
nameSingular
namePlural
labelSingular
labelPlural
description
icon
isCustom
isActive
isSearchable
createdAt
updatedAt
labelIdentifierFieldMetadataId
imageIdentifierFieldMetadataId
isLabelSyncedWithName
}
}
`;
export const query = CreateOneObjectMetadataItemDocument;
export const findManyViewsQuery = gql`
query FindManyViews(
$filter: ViewFilterInput
$orderBy: [ViewOrderByInput]
$lastCursor: String
$limit: Int
) {
views(
filter: $filter
orderBy: $orderBy
first: $limit
after: $lastCursor
) {
edges {
node {
__typename
id
objectMetadataId
type
createdAt
name
updatedAt
}
cursor
}
pageInfo {
hasNextPage
startCursor
endCursor
}
totalCount
}
}
`;
export const findManyCoreViewsQuery = FindManyCoreViewsDocument;
export const variables = {
input: {
packages/twenty-front/src/modules/object-metadata/hooks/__mocks__/useFieldMetadataItem.ts
+5 -24
View File
@@ -1,34 +1,15 @@
import { gql } from '@apollo/client';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import {
DeleteOneFieldMetadataItemDocument,
FieldMetadataType,
} from '~/generated-metadata/graphql';
export const FIELD_METADATA_ID = '2c43466a-fe9e-4005-8d08-c5836067aa6c';
export const FIELD_RELATION_METADATA_ID =
'4da0302d-358a-45cd-9973-9f92723ed3c1';
export const queries = {
deleteMetadataField: gql`
mutation DeleteOneFieldMetadataItem($idToDelete: UUID!) {
deleteOneField(input: { id: $idToDelete }) {
id
type
name
label
description
icon
isCustom
isActive
isUnique
isNullable
createdAt
updatedAt
settings
applicationId
object {
id
}
}
}
`,
deleteMetadataField: DeleteOneFieldMetadataItemDocument,
activateMetadataField: gql`
mutation UpdateOneFieldMetadataItem(
$idToUpdate: UUID!
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useCreateOneObjectMetadataItem.test.tsx
+6 -14
View File
@@ -4,7 +4,7 @@ import { useCreateOneObjectMetadataItem } from '@/object-metadata/hooks/useCreat
import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
import {
findManyViewsQuery,
findManyCoreViewsQuery,
query,
responseData,
variables,
@@ -52,22 +52,14 @@ const mocks = [
},
{
request: {
query: findManyViewsQuery,
variables: {},
query: findManyCoreViewsQuery,
variables: {
objectMetadataId: responseData.id,
},
},
result: jest.fn(() => ({
data: {
views: {
__typename: 'ViewConnection',
totalCount: 0,
pageInfo: {
__typename: 'PageInfo',
hasNextPage: false,
startCursor: '',
endCursor: '',
},
edges: [],
},
getCoreViews: [],
},
})),
},
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useFieldMetadataItem.test.tsx
+34
View File
@@ -36,6 +36,40 @@ jest.mock('@/object-metadata/hooks/useUpdateOneFieldMetadataItem', () => ({
}),
}));
jest.mock('@/object-metadata/hooks/useCreateOneFieldMetadataItem', () => ({
useCreateOneFieldMetadataItem: () => ({
createOneFieldMetadataItem: jest.fn().mockResolvedValue({
status: 'successful',
response: {
data: {
createOneField: responseData.createMetadataField,
},
},
}),
}),
}));
jest.mock('@/object-metadata/hooks/useDeleteOneFieldMetadataItem', () => ({
useDeleteOneFieldMetadataItem: () => ({
deleteOneFieldMetadataItem: jest
.fn()
.mockImplementation(({ idToDelete }) => {
const data =
idToDelete === FIELD_RELATION_METADATA_ID
? responseData.fieldRelation
: responseData.default;
return Promise.resolve({
status: 'successful',
response: {
data: {
deleteOneField: data,
},
},
});
}),
}),
}));
const fieldMetadataItem: FieldMetadataItem = {
id: FIELD_METADATA_ID,
universalIdentifier: FIELD_METADATA_ID,
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useFilteredObjectMetadataItems.test.tsx
+2 -4
View File
@@ -1,4 +1,4 @@
import { MockedProvider } from '@apollo/client/testing';
import { MockedProvider } from '@apollo/client/testing/react';
import { act, renderHook } from '@testing-library/react';
import { Provider as JotaiProvider } from 'jotai';
import { type ReactNode } from 'react';
@@ -35,9 +35,7 @@ const Wrapper = ({ children }: { children: ReactNode }) => {
return (
<JotaiProvider store={jotaiStore}>
<MockedProvider mocks={mocks} addTypename={false}>
{children}
</MockedProvider>
<MockedProvider mocks={mocks}>{children}</MockedProvider>
</JotaiProvider>
);
};
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useFindManyObjectMetadataItems.test.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { MockedProvider } from '@apollo/client/testing';
import { MockedProvider } from '@apollo/client/testing/react';
import { renderHook } from '@testing-library/react';
import { type ReactNode } from 'react';
@@ -24,7 +24,7 @@ const mocks = [
];
const Wrapper = ({ children }: { children: ReactNode }) => (
<MockedProvider mocks={mocks} addTypename={false}>
<MockedProvider mocks={mocks}>
<SnackBarComponentInstanceContext.Provider
value={{ instanceId: 'snack-bar-manager' }}
>
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetRelationMetadata.test.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { MockedProvider } from '@apollo/client/testing';
import { MockedProvider } from '@apollo/client/testing/react';
import { renderHook } from '@testing-library/react';
import { type ReactNode } from 'react';
import { Provider as JotaiProvider } from 'jotai';
@@ -10,7 +10,7 @@ import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockO
const Wrapper = ({ children }: { children: ReactNode }) => (
<JotaiProvider store={jotaiStore}>
<MockedProvider addTypename={false}>{children}</MockedProvider>
<MockedProvider>{children}</MockedProvider>
</JotaiProvider>
);
packages/twenty-front/src/modules/object-metadata/hooks/useApolloCoreClient.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { ApolloCoreClientContext } from '@/object-metadata/contexts/ApolloCoreClientContext';
import { useApolloClient } from '@apollo/client';
import { useApolloClient } from '@apollo/client/react';
import { useContext } from 'react';
export const useApolloCoreClient = () => {
packages/twenty-front/src/modules/object-metadata/hooks/useCreateOneFieldMetadataItem.ts
+7 -5
View File
@@ -1,6 +1,7 @@
import { useMutation } from '@apollo/client/react';
import {
type CreateFieldInput,
useCreateOneFieldMetadataItemMutation,
CreateOneFieldMetadataItemDocument,
} from '~/generated-metadata/graphql';
import { useMetadataErrorHandler } from '@/metadata-error-handler/hooks/useMetadataErrorHandler';
@@ -8,7 +9,7 @@ import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefres
import { type MetadataRequestResult } from '@/object-metadata/types/MetadataRequestResult.type';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useRefreshCoreViewsByObjectMetadataId } from '@/views/hooks/useRefreshCoreViewsByObjectMetadataId';
import { ApolloError } from '@apollo/client';
import { CombinedGraphQLErrors } from '@apollo/client/errors';
import { t } from '@lingui/core/macro';
import { CrudOperationType } from 'twenty-shared/types';
@@ -16,8 +17,9 @@ export const useCreateOneFieldMetadataItem = () => {
const { refreshObjectMetadataItems } =
useRefreshObjectMetadataItems('network-only');
const [createOneFieldMetadataItemMutation] =
useCreateOneFieldMetadataItemMutation();
const [createOneFieldMetadataItemMutation] = useMutation(
CreateOneFieldMetadataItemDocument,
);
const { refreshCoreViewsByObjectMetadataId } =
useRefreshCoreViewsByObjectMetadataId();
@@ -50,7 +52,7 @@ export const useCreateOneFieldMetadataItem = () => {
response,
};
} catch (error) {
if (error instanceof ApolloError) {
if (CombinedGraphQLErrors.is(error)) {
handleMetadataError(error, {
primaryMetadataName: 'fieldMetadata',
operationType: CrudOperationType.CREATE,
packages/twenty-front/src/modules/object-metadata/hooks/useCreateOneObjectMetadataItem.ts
+7 -5
View File
@@ -1,6 +1,7 @@
import { useMutation } from '@apollo/client/react';
import {
type CreateObjectInput,
useCreateOneObjectMetadataItemMutation,
CreateOneObjectMetadataItemDocument,
} from '~/generated-metadata/graphql';
import { useMetadataErrorHandler } from '@/metadata-error-handler/hooks/useMetadataErrorHandler';
@@ -8,7 +9,7 @@ import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefres
import { type MetadataRequestResult } from '@/object-metadata/types/MetadataRequestResult.type';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useRefreshCoreViewsByObjectMetadataId } from '@/views/hooks/useRefreshCoreViewsByObjectMetadataId';
import { ApolloError } from '@apollo/client';
import { CombinedGraphQLErrors } from '@apollo/client/errors';
import { t } from '@lingui/core/macro';
import { CrudOperationType } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
@@ -19,8 +20,9 @@ export const useCreateOneObjectMetadataItem = () => {
const { refreshCoreViewsByObjectMetadataId } =
useRefreshCoreViewsByObjectMetadataId();
const [createOneObjectMetadataItemMutation] =
useCreateOneObjectMetadataItemMutation();
const [createOneObjectMetadataItemMutation] = useMutation(
CreateOneObjectMetadataItemDocument,
);
const { handleMetadataError } = useMetadataErrorHandler();
const { enqueueErrorSnackBar } = useSnackBar();
@@ -52,7 +54,7 @@ export const useCreateOneObjectMetadataItem = () => {
response: createdObjectMetadata,
};
} catch (error) {
if (error instanceof ApolloError) {
if (CombinedGraphQLErrors.is(error)) {
handleMetadataError(error, {
primaryMetadataName: 'objectMetadata',
operationType: CrudOperationType.CREATE,
packages/twenty-front/src/modules/object-metadata/hooks/useDeleteOneFieldMetadataItem.ts
+7 -5
View File
@@ -1,4 +1,5 @@
import { useDeleteOneFieldMetadataItemMutation } from '~/generated-metadata/graphql';
import { useMutation } from '@apollo/client/react';
import { DeleteOneFieldMetadataItemDocument } from '~/generated-metadata/graphql';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { useMetadataErrorHandler } from '@/metadata-error-handler/hooks/useMetadataErrorHandler';
@@ -11,13 +12,14 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { useRefreshCoreViewsByObjectMetadataId } from '@/views/hooks/useRefreshCoreViewsByObjectMetadataId';
import { ApolloError } from '@apollo/client';
import { CombinedGraphQLErrors } from '@apollo/client/errors';
import { t } from '@lingui/core/macro';
import { CrudOperationType } from 'twenty-shared/types';
export const useDeleteOneFieldMetadataItem = () => {
const [deleteOneFieldMetadataItemMutation] =
useDeleteOneFieldMetadataItemMutation();
const [deleteOneFieldMetadataItemMutation] = useMutation(
DeleteOneFieldMetadataItemDocument,
);
const { refreshObjectMetadataItems } =
useRefreshObjectMetadataItems('network-only');
@@ -81,7 +83,7 @@ export const useDeleteOneFieldMetadataItem = () => {
response,
};
} catch (error) {
if (error instanceof ApolloError) {
if (CombinedGraphQLErrors.is(error)) {
handleMetadataError(error, {
primaryMetadataName: 'fieldMetadata',
operationType: CrudOperationType.DELETE,
packages/twenty-front/src/modules/object-metadata/hooks/useDeleteOneObjectMetadataItem.ts
+7 -5
View File
@@ -1,17 +1,19 @@
import { useDeleteOneObjectMetadataItemMutation } from '~/generated-metadata/graphql';
import { useMutation } from '@apollo/client/react';
import { DeleteOneObjectMetadataItemDocument } from '~/generated-metadata/graphql';
import { useMetadataErrorHandler } from '@/metadata-error-handler/hooks/useMetadataErrorHandler';
import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItems';
import { type MetadataRequestResult } from '@/object-metadata/types/MetadataRequestResult.type';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useRefreshAllCoreViews } from '@/views/hooks/useRefreshAllCoreViews';
import { ApolloError } from '@apollo/client';
import { CombinedGraphQLErrors } from '@apollo/client/errors';
import { t } from '@lingui/core/macro';
import { CrudOperationType } from 'twenty-shared/types';
export const useDeleteOneObjectMetadataItem = () => {
const [deleteOneObjectMetadataItemMutation] =
useDeleteOneObjectMetadataItemMutation();
const [deleteOneObjectMetadataItemMutation] = useMutation(
DeleteOneObjectMetadataItemDocument,
);
const { refreshObjectMetadataItems } =
useRefreshObjectMetadataItems('network-only');
@@ -43,7 +45,7 @@ export const useDeleteOneObjectMetadataItem = () => {
response,
};
} catch (error) {
if (error instanceof ApolloError) {
if (CombinedGraphQLErrors.is(error)) {
handleMetadataError(error, {
primaryMetadataName: 'objectMetadata',
operationType: CrudOperationType.DELETE,
packages/twenty-front/src/modules/object-metadata/hooks/useFindManyObjectMetadataItems.ts
+4 -12
View File
@@ -1,13 +1,11 @@
import { useQuery } from '@apollo/client';
import { useQuery } from '@apollo/client/react';
import { useMemo } from 'react';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useSnackBarOnQueryError } from '@/apollo/hooks/useSnackBarOnQueryError';
import {
type ObjectMetadataItemsQuery,
type ObjectMetadataItemsQueryVariables,
} from '~/generated-metadata/graphql';
import { logError } from '~/utils/logError';
import { enrichObjectMetadataItemsWithPermissions } from '@/object-metadata/utils/enrichObjectMetadataItemsWithPermissions';
import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
import { FIND_MANY_OBJECT_METADATA_ITEMS } from '@/object-metadata/graphql/queries';
@@ -18,8 +16,6 @@ export const useFindManyObjectMetadataItems = ({
}: {
skip?: boolean;
} = {}) => {
const { enqueueErrorSnackBar } = useSnackBar();
const { objectPermissionsByObjectMetadataId } = useObjectPermissions();
const { data, loading, error, refetch } = useQuery<
@@ -27,14 +23,10 @@ export const useFindManyObjectMetadataItems = ({
ObjectMetadataItemsQueryVariables
>(FIND_MANY_OBJECT_METADATA_ITEMS, {
skip,
onError: (error) => {
logError('useFindManyObjectMetadataItems error : ' + error);
enqueueErrorSnackBar({
apolloError: error,
});
},
});
useSnackBarOnQueryError(error);
const objectMetadataItems = useMemo(() => {
const objectMetadataItemsArray =
mapPaginatedObjectMetadataItemsToObjectMetadataItems({
packages/twenty-front/src/modules/object-metadata/hooks/useRefreshObjectMetadataItems.ts
+2 -1
View File
@@ -5,7 +5,8 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { enrichObjectMetadataItemsWithPermissions } from '@/object-metadata/utils/enrichObjectMetadataItemsWithPermissions';
import { mapPaginatedObjectMetadataItemsToObjectMetadataItems } from '@/object-metadata/utils/mapPaginatedObjectMetadataItemsToObjectMetadataItems';
import { type FetchPolicy, useApolloClient } from '@apollo/client';
import { type FetchPolicy } from '@apollo/client';
import { useApolloClient } from '@apollo/client/react';
import { useCallback } from 'react';
import { type ObjectPermissions } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
packages/twenty-front/src/modules/object-metadata/hooks/useUpdateOneFieldMetadataItem.ts
+7 -5
View File
@@ -1,6 +1,7 @@
import { useMutation } from '@apollo/client/react';
import {
type UpdateOneFieldMetadataItemMutationVariables,
useUpdateOneFieldMetadataItemMutation,
UpdateOneFieldMetadataItemDocument,
} from '~/generated-metadata/graphql';
import { useMetadataErrorHandler } from '@/metadata-error-handler/hooks/useMetadataErrorHandler';
@@ -10,7 +11,7 @@ import { type MetadataRequestResult } from '@/object-metadata/types/MetadataRequ
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useRefreshCoreViewsByObjectMetadataId } from '@/views/hooks/useRefreshCoreViewsByObjectMetadataId';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { ApolloError } from '@apollo/client';
import { CombinedGraphQLErrors } from '@apollo/client/errors';
import { t } from '@lingui/core/macro';
import { CrudOperationType } from 'twenty-shared/types';
import { v4 as uuidv4 } from 'uuid';
@@ -22,8 +23,9 @@ export const useUpdateOneFieldMetadataItem = () => {
const { refreshCoreViewsByObjectMetadataId } =
useRefreshCoreViewsByObjectMetadataId();
const [updateOneFieldMetadataItemMutation] =
useUpdateOneFieldMetadataItemMutation();
const [updateOneFieldMetadataItemMutation] = useMutation(
UpdateOneFieldMetadataItemDocument,
);
const { handleMetadataError } = useMetadataErrorHandler();
@@ -78,7 +80,7 @@ export const useUpdateOneFieldMetadataItem = () => {
response,
};
} catch (error) {
if (error instanceof ApolloError) {
if (CombinedGraphQLErrors.is(error)) {
handleMetadataError(error, {
primaryMetadataName: 'fieldMetadata',
operationType: CrudOperationType.UPDATE,
packages/twenty-front/src/modules/object-metadata/hooks/useUpdateOneObjectMetadataItem.ts
+7 -5
View File
@@ -1,6 +1,7 @@
import { useMutation } from '@apollo/client/react';
import {
useUpdateOneObjectMetadataItemMutation,
type UpdateOneObjectInput,
UpdateOneObjectMetadataItemDocument,
} from '~/generated-metadata/graphql';
import { useMetadataErrorHandler } from '@/metadata-error-handler/hooks/useMetadataErrorHandler';
@@ -8,14 +9,15 @@ import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefres
import { type MetadataRequestResult } from '@/object-metadata/types/MetadataRequestResult.type';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useRefreshCoreViewsByObjectMetadataId } from '@/views/hooks/useRefreshCoreViewsByObjectMetadataId';
import { ApolloError } from '@apollo/client';
import { CombinedGraphQLErrors } from '@apollo/client/errors';
import { t } from '@lingui/core/macro';
import { CrudOperationType } from 'twenty-shared/types';
// TODO: Slice the Apollo store synchronously in the update function instead of subscribing, so we can use update after read in the same function call
export const useUpdateOneObjectMetadataItem = () => {
const [updateOneObjectMetadataItemMutation, { loading }] =
useUpdateOneObjectMetadataItemMutation();
const [updateOneObjectMetadataItemMutation, { loading }] = useMutation(
UpdateOneObjectMetadataItemDocument,
);
const { refreshObjectMetadataItems } =
useRefreshObjectMetadataItems('network-only');
@@ -53,7 +55,7 @@ export const useUpdateOneObjectMetadataItem = () => {
response,
};
} catch (error) {
if (error instanceof ApolloError) {
if (CombinedGraphQLErrors.is(error)) {
handleMetadataError(error, {
primaryMetadataName: 'objectMetadata',
operationType: CrudOperationType.UPDATE,