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:
+17
-8
@@ -6,12 +6,13 @@ import { getFrontComponentUrl } from '@/front-components/utils/getFrontComponent
|
||||
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
|
||||
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
|
||||
import { t } from '@lingui/core/macro';
|
||||
import { useCallback, useContext } from 'react';
|
||||
import { useCallback, useContext, useEffect } from 'react';
|
||||
import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-sdk/front-component-renderer';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { ThemeContext } from 'twenty-ui/theme-constants';
|
||||
import { REACT_APP_SERVER_BASE_URL } from '~/config';
|
||||
import { useFindOneFrontComponentQuery } from '~/generated-metadata/graphql';
|
||||
import { useQuery } from '@apollo/client/react';
|
||||
import { FindOneFrontComponentDocument } from '~/generated-metadata/graphql';
|
||||
|
||||
type FrontComponentRendererProps = {
|
||||
frontComponentId: string;
|
||||
@@ -46,17 +47,25 @@ export const FrontComponentRenderer = ({
|
||||
[enqueueErrorSnackBar],
|
||||
);
|
||||
|
||||
const { data, loading } = useFindOneFrontComponentQuery({
|
||||
const { data, loading, error } = useQuery(FindOneFrontComponentDocument, {
|
||||
variables: { id: frontComponentId },
|
||||
onError: handleError,
|
||||
onCompleted: (completedData) => {
|
||||
const tokenPair = completedData.frontComponent?.applicationTokenPair;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
handleError(error);
|
||||
}
|
||||
}, [error, handleError]);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const tokenPair = data.frontComponent?.applicationTokenPair;
|
||||
|
||||
if (isDefined(tokenPair)) {
|
||||
setFrontComponentApplicationTokenPair(tokenPair);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
}, [data, setFrontComponentApplicationTokenPair]);
|
||||
|
||||
useOnFrontComponentUpdated({
|
||||
frontComponentId,
|
||||
|
||||
Reference in New Issue
Block a user