feat: schema version header check (#4563)

closes https://github.com/twentyhq/twenty/issues/4479

tried to catch the error inside various places including
https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/integrations/exception-handler/exception-handler.service.ts
but it seems like the error never reaches the GraphQL module 😮

any idea where we could intercept such an error `Cannot query field`?

---------

Co-authored-by: Jérémy Magrin <jeremy.magrin@gmail.com>

packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -1,8 +1,9 @@
 import { useMemo, useRef } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { InMemoryCache, NormalizedCacheObject } from '@apollo/client';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { previousUrlState } from '@/auth/states/previousUrlState';
 import { tokenPairState } from '@/auth/states/tokenPairState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
@@ -17,6 +18,7 @@ import { ApolloFactory, Options } from '../services/apollo.factory';
 export const useApolloFactory = (options: Partial<Options<any>> = {}) => {
   // eslint-disable-next-line @nx/workspace-no-state-useref
   const apolloRef = useRef<ApolloFactory<NormalizedCacheObject> | null>(null);
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const [isDebugMode] = useRecoilState(isDebugModeState);
 
   const navigate = useNavigate();
@@ -29,6 +31,11 @@ export const useApolloFactory = (options: Partial<Options<any>> = {}) => {
     apolloRef.current = new ApolloFactory({
       uri: `${REACT_APP_SERVER_BASE_URL}/graphql`,
       cache: new InMemoryCache(),
+      headers: {
+        ...(currentWorkspace?.currentCacheVersion && {
+          'X-Schema-Version': currentWorkspace.currentCacheVersion,
+        }),
+      },
       defaultOptions: {
         query: {
           fetchPolicy: 'cache-first',
@@ -60,7 +67,7 @@ export const useApolloFactory = (options: Partial<Options<any>> = {}) => {
 
     return apolloRef.current.getClient();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setTokenPair, isDebugMode, setPreviousUrl]);
+  }, [setTokenPair, isDebugMode, currentWorkspace?.currentCacheVersion, setPreviousUrl]);
 
   useUpdateEffect(() => {
     if (isDefined(apolloRef.current)) {

packages/twenty-front/src/modules/apollo/services/apollo.factory.ts

@@ -60,6 +60,7 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
         return {
           headers: {
             ...headers,
+            ...options.headers,
             authorization: this.tokenPair?.accessToken.token
               ? `Bearer ${this.tokenPair?.accessToken.token}`
               : '',

packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts

@@ -13,6 +13,7 @@ export type CurrentWorkspace = Pick<
   | 'subscriptionStatus'
   | 'activationStatus'
   | 'currentBillingSubscription'
+  | 'currentCacheVersion'
 >;
 
 export const currentWorkspaceState = createState<CurrentWorkspace | null>({

packages/twenty-front/src/modules/users/graphql/queries/getCurrentUser.ts

@@ -35,6 +35,7 @@ export const GET_CURRENT_USER = gql`
           value
           workspaceId
         }
+        currentCacheVersion
         currentBillingSubscription {
           status
           interval