Fix record show page request errors (#6345)

- Removed getCursorFromRecordId
- Get cursor from request
- Fixed problem with navigation and optimistic rendering

packages/twenty-front/src/modules/object-record/record-show/hooks/useFindRecordCursorFromFindManyCacheRootQuery.ts

@@ -1,34 +0,0 @@
-import { RecordGqlRefEdge } from '@/object-record/cache/types/RecordGqlRefEdge';
-import { useApolloClient } from '@apollo/client';
-import { createApolloStoreFieldName } from '~/utils/createApolloStoreFieldName';
-
-export const useFindRecordCursorFromFindManyCacheRootQuery = ({
-  objectNamePlural,
-  fieldVariables,
-}: {
-  objectNamePlural: string;
-  fieldVariables: {
-    filter: any;
-    orderBy: any;
-  };
-}) => {
-  const apollo = useApolloClient();
-
-  const testsFieldNameOnRootQuery = createApolloStoreFieldName({
-    fieldName: objectNamePlural,
-    fieldVariables: fieldVariables,
-  });
-
-  const findCursorInCache = (recordId: string) => {
-    const extractedCache = apollo.cache.extract() as any;
-
-    const edgesInCache =
-      extractedCache?.['ROOT_QUERY']?.[testsFieldNameOnRootQuery]?.edges ?? [];
-
-    return edgesInCache.find(
-      (edge: RecordGqlRefEdge) => edge.node?.__ref.split(':')[1] === recordId,
-    )?.cursor;
-  };
-
-  return { findCursorInCache };
-};

packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts

@@ -11,7 +11,6 @@ import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPag
 import { buildIndexTablePageURL } from '@/object-record/record-table/utils/buildIndexTableURL';
 import { useQueryVariablesFromActiveFieldsOfViewOrDefaultView } from '@/views/hooks/useQueryVariablesFromActiveFieldsOfViewOrDefaultView';
 import { isNonEmptyString } from '@sniptt/guards';
-import { getRelayCursorFromRecordId } from '~/utils/getRelayCursorFromRecordId';
 import { capitalize } from '~/utils/string/capitalize';
 
 export const useRecordShowPagePagination = (
@@ -47,19 +46,32 @@ export const useRecordShowPagePagination = (
       viewId: viewIdQueryParam,
     });
 
-  const cursor = getRelayCursorFromRecordId(objectRecordId);
+  const { loading: loadingCursor, pageInfo: currentRecordsPageInfo } =
+    useFindManyRecords({
+      filter: {
+        id: { eq: objectRecordId },
+      },
+      orderBy,
+      limit: 1,
+      objectNameSingular,
+      recordGqlFields,
+    });
+
+  const cursorFromRequest = currentRecordsPageInfo?.endCursor;
 
   const {
     loading: loadingRecordBefore,
     records: recordsBefore,
     totalCount: totalCountBefore,
   } = useFindManyRecords({
+    skip: loadingCursor,
+    fetchPolicy: 'network-only',
     filter,
     orderBy,
-    cursorFilter: isNonEmptyString(cursor)
+    cursorFilter: isNonEmptyString(cursorFromRequest)
       ? {
           cursorDirection: 'before',
-          cursor: cursor,
+          cursor: cursorFromRequest,
           limit: 1,
         }
       : undefined,
@@ -72,12 +84,14 @@ export const useRecordShowPagePagination = (
     records: recordsAfter,
     totalCount: totalCountAfter,
   } = useFindManyRecords({
+    skip: loadingCursor,
     filter,
+    fetchPolicy: 'network-only',
     orderBy,
-    cursorFilter: cursor
+    cursorFilter: cursorFromRequest
       ? {
           cursorDirection: 'after',
-          cursor: cursor,
+          cursor: cursorFromRequest,
           limit: 1,
         }
       : undefined,
@@ -87,7 +101,7 @@ export const useRecordShowPagePagination = (
 
   const totalCount = Math.max(totalCountBefore ?? 0, totalCountAfter ?? 0);
 
-  const loading = loadingRecordAfter || loadingRecordBefore;
+  const loading = loadingRecordAfter || loadingRecordBefore || loadingCursor;
 
   const isThereARecordBefore = recordsBefore.length > 0;
   const isThereARecordAfter = recordsAfter.length > 0;

packages/twenty-front/src/modules/views/utils/getQueryVariablesFromView.ts

@@ -20,8 +20,8 @@ export const getQueryVariablesFromView = ({
 }) => {
   if (!isDefined(view)) {
     return {
-      filter: {},
+      filter: undefined,
-      orderBy: [],
+      orderBy: undefined,
     };
   }
 

packages/twenty-front/src/utils/getRelayCursorFromRecordId.ts

@@ -1,3 +0,0 @@
-export const getRelayCursorFromRecordId = (recordId: string) => {
-  return btoa(`[1, "${recordId}"]`);
-};