From 1729970836371051cc40b1906d3bc31e0583b3cf Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Sat, 5 Jul 2025 01:23:18 +0530
Subject: [PATCH] Fix circular structure error in
 useFetchMoreRecordsWithPagination (#13042)

Fixes:
TypeError: Converting circular structure to JSON crashing opportunities
pagination.

Issue:
useFetchMoreRecordsWithPagination was putting an Apollo client object in
React's dependency array. React tried to serialize it for memoization,
hit circular refs in InMemoryCache, and was throwing the error.

Fix:
Removed unnecessary Apollo client import. The fetchMore from the
original useQuery is already bound to the correct client.

before:


https://github.com/user-attachments/assets/0422c57b-5cd2-4c0f-9828-fb7bbd7f94c1

after:



https://github.com/user-attachments/assets/20112fb7-3990-4c34-bf39-8c53b7b48e45
---
 .../src/modules/apollo/components/ApolloProvider.tsx        | 2 +-
 .../object-metadata/components/ApolloCoreProvider.tsx       | 6 +-----
 .../hooks/useFetchMoreRecordsWithPagination.ts              | 6 ------
 3 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/packages/twenty-front/src/modules/apollo/components/ApolloProvider.tsx b/packages/twenty-front/src/modules/apollo/components/ApolloProvider.tsx
index b263900a6..a14a5e9f6 100644
--- a/packages/twenty-front/src/modules/apollo/components/ApolloProvider.tsx
+++ b/packages/twenty-front/src/modules/apollo/components/ApolloProvider.tsx
@@ -12,7 +12,7 @@ export const ApolloProvider = ({ children }: React.PropsWithChildren) => {
 
   const apolloClient = useApolloFactory({
     uri: `${REACT_APP_SERVER_BASE_URL}/metadata`,
-    connectToDevTools: true,
+    connectToDevTools: true, // should this be default , ie dependant on IS_DEBUG_MODE?
     extraLinks: [captchaRefreshLink],
   });
 
diff --git a/packages/twenty-front/src/modules/object-metadata/components/ApolloCoreProvider.tsx b/packages/twenty-front/src/modules/object-metadata/components/ApolloCoreProvider.tsx
index d616697ef..0b210d235 100644
--- a/packages/twenty-front/src/modules/object-metadata/components/ApolloCoreProvider.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/components/ApolloCoreProvider.tsx
@@ -1,5 +1,4 @@
 import { useApolloFactory } from '@/apollo/hooks/useApolloFactory';
-import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 import { ApolloCoreClientContext } from '../contexts/ApolloCoreClientContext';
 
@@ -8,10 +7,7 @@ export const ApolloCoreProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const apolloCoreClient = useApolloFactory({
-    uri: `${REACT_APP_SERVER_BASE_URL}/graphql`,
-    connectToDevTools: true, // @Felix I am not sure if this is correct, should be false?
-  });
+  const apolloCoreClient = useApolloFactory();
 
   return (
     <ApolloCoreClientContext.Provider value={apolloCoreClient}>
diff --git a/packages/twenty-front/src/modules/object-record/hooks/useFetchMoreRecordsWithPagination.ts b/packages/twenty-front/src/modules/object-record/hooks/useFetchMoreRecordsWithPagination.ts
index 47401f65a..9cf3d8207 100644
--- a/packages/twenty-front/src/modules/object-record/hooks/useFetchMoreRecordsWithPagination.ts
+++ b/packages/twenty-front/src/modules/object-record/hooks/useFetchMoreRecordsWithPagination.ts
@@ -24,7 +24,6 @@ import { OnFindManyRecordsCompleted } from '@/object-record/types/OnFindManyReco
 import { filterUniqueRecordEdgesByCursor } from '@/object-record/utils/filterUniqueRecordEdgesByCursor';
 import { getQueryIdentifier } from '@/object-record/utils/getQueryIdentifier';
 
-import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
 import { capitalize, isDefined } from 'twenty-shared/utils';
 import { cursorFamilyState } from '../states/cursorFamilyState';
 import { hasNextPageFamilyState } from '../states/hasNextPageFamilyState';
@@ -77,8 +76,6 @@ export const useFetchMoreRecordsWithPagination = <
   objectMetadataItem,
   onCompleted,
 }: UseFindManyRecordsStateParams<T>) => {
-  const apolloCoreClient = useApolloCoreClient();
-
   const queryIdentifier = getQueryIdentifier({
     objectNameSingular,
     filter,
@@ -124,14 +121,12 @@ export const useFetchMoreRecordsWithPagination = <
                 lastCursor: isNonEmptyString(lastCursorLocal)
                   ? lastCursorLocal
                   : undefined,
-                client: apolloCoreClient,
               },
               updateQuery: (prev, { fetchMoreResult }) => {
                 const previousEdges =
                   prev?.[objectMetadataItem.namePlural]?.edges;
                 const nextEdges =
                   fetchMoreResult?.[objectMetadataItem.namePlural]?.edges;
-
                 let newEdges: RecordGqlEdge[] = previousEdges ?? [];
 
                 if (isNonEmptyArray(nextEdges)) {
@@ -207,7 +202,6 @@ export const useFetchMoreRecordsWithPagination = <
       onCompleted,
       handleFindManyRecordsError,
       queryIdentifier,
-      apolloCoreClient,
     ],
   );