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:
+7
-18
@@ -1,8 +1,9 @@
|
||||
import { ApolloError, useApolloClient } from '@apollo/client';
|
||||
import { useApolloClient } from '@apollo/client/react';
|
||||
import { CombinedGraphQLErrors } from '@apollo/client/errors';
|
||||
import { type GraphQLFormattedError } from 'graphql';
|
||||
import { useCallback } from 'react';
|
||||
import { useStore } from 'jotai';
|
||||
import { isDefined, isNonEmptyArray } from 'twenty-shared/utils';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
|
||||
import { frontComponentApplicationTokenPairComponentState } from '@/front-components/states/frontComponentApplicationTokenPairComponentState';
|
||||
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
|
||||
@@ -76,6 +77,8 @@ export const useRequestApplicationTokenRefresh = ({
|
||||
// If the refresh token itself is expired, fall back to refetching
|
||||
// the front component which issues a fresh token pair server-side.
|
||||
try {
|
||||
// With the default errorPolicy ('none'), client.mutate() rejects on
|
||||
// GraphQL/network errors, so error handling happens in the catch block.
|
||||
const renewResult = await apolloClient.mutate<
|
||||
RenewApplicationTokenMutation,
|
||||
RenewApplicationTokenMutationVariables
|
||||
@@ -87,20 +90,6 @@ export const useRequestApplicationTokenRefresh = ({
|
||||
},
|
||||
});
|
||||
|
||||
if (isNonEmptyArray(renewResult.errors)) {
|
||||
if (
|
||||
hasApplicationRefreshTokenInvalidOrExpiredSubCode(renewResult.errors)
|
||||
) {
|
||||
return await refetchFrontComponentForNewTokenPair();
|
||||
}
|
||||
|
||||
const errorMessage = renewResult.errors
|
||||
.map((error) => error.message)
|
||||
.join(', ');
|
||||
|
||||
throw new Error(`Token renewal failed: ${errorMessage}`);
|
||||
}
|
||||
|
||||
const renewedTokenPair = renewResult.data?.renewApplicationToken;
|
||||
|
||||
if (!isDefined(renewedTokenPair)) {
|
||||
@@ -112,8 +101,8 @@ export const useRequestApplicationTokenRefresh = ({
|
||||
return renewedTokenPair.applicationAccessToken.token;
|
||||
} catch (error) {
|
||||
if (
|
||||
error instanceof ApolloError &&
|
||||
hasApplicationRefreshTokenInvalidOrExpiredSubCode(error.graphQLErrors)
|
||||
CombinedGraphQLErrors.is(error) &&
|
||||
hasApplicationRefreshTokenInvalidOrExpiredSubCode(error.errors)
|
||||
) {
|
||||
return await refetchFrontComponentForNewTokenPair();
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
import { type MetadataOperationBrowserEventDetail } from '@/browser-event/types/MetadataOperationBrowserEventDetail';
|
||||
import { useApolloClient } from '@apollo/client';
|
||||
import { useApolloClient } from '@apollo/client/react';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import {
|
||||
FindOneFrontComponentDocument,
|
||||
|
||||
Reference in New Issue
Block a user