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
This commit is contained in:
@ -12,7 +12,7 @@ export const ApolloProvider = ({ children }: React.PropsWithChildren) => {
|
|||||||
|
|
||||||
const apolloClient = useApolloFactory({
|
const apolloClient = useApolloFactory({
|
||||||
uri: `${REACT_APP_SERVER_BASE_URL}/metadata`,
|
uri: `${REACT_APP_SERVER_BASE_URL}/metadata`,
|
||||||
connectToDevTools: true,
|
connectToDevTools: true, // should this be default , ie dependant on IS_DEBUG_MODE?
|
||||||
extraLinks: [captchaRefreshLink],
|
extraLinks: [captchaRefreshLink],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import { useApolloFactory } from '@/apollo/hooks/useApolloFactory';
|
import { useApolloFactory } from '@/apollo/hooks/useApolloFactory';
|
||||||
import { REACT_APP_SERVER_BASE_URL } from '~/config';
|
|
||||||
|
|
||||||
import { ApolloCoreClientContext } from '../contexts/ApolloCoreClientContext';
|
import { ApolloCoreClientContext } from '../contexts/ApolloCoreClientContext';
|
||||||
|
|
||||||
@ -8,10 +7,7 @@ export const ApolloCoreProvider = ({
|
|||||||
}: {
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) => {
|
}) => {
|
||||||
const apolloCoreClient = useApolloFactory({
|
const apolloCoreClient = useApolloFactory();
|
||||||
uri: `${REACT_APP_SERVER_BASE_URL}/graphql`,
|
|
||||||
connectToDevTools: true, // @Felix I am not sure if this is correct, should be false?
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ApolloCoreClientContext.Provider value={apolloCoreClient}>
|
<ApolloCoreClientContext.Provider value={apolloCoreClient}>
|
||||||
|
|||||||
@ -24,7 +24,6 @@ import { OnFindManyRecordsCompleted } from '@/object-record/types/OnFindManyReco
|
|||||||
import { filterUniqueRecordEdgesByCursor } from '@/object-record/utils/filterUniqueRecordEdgesByCursor';
|
import { filterUniqueRecordEdgesByCursor } from '@/object-record/utils/filterUniqueRecordEdgesByCursor';
|
||||||
import { getQueryIdentifier } from '@/object-record/utils/getQueryIdentifier';
|
import { getQueryIdentifier } from '@/object-record/utils/getQueryIdentifier';
|
||||||
|
|
||||||
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
|
|
||||||
import { capitalize, isDefined } from 'twenty-shared/utils';
|
import { capitalize, isDefined } from 'twenty-shared/utils';
|
||||||
import { cursorFamilyState } from '../states/cursorFamilyState';
|
import { cursorFamilyState } from '../states/cursorFamilyState';
|
||||||
import { hasNextPageFamilyState } from '../states/hasNextPageFamilyState';
|
import { hasNextPageFamilyState } from '../states/hasNextPageFamilyState';
|
||||||
@ -77,8 +76,6 @@ export const useFetchMoreRecordsWithPagination = <
|
|||||||
objectMetadataItem,
|
objectMetadataItem,
|
||||||
onCompleted,
|
onCompleted,
|
||||||
}: UseFindManyRecordsStateParams<T>) => {
|
}: UseFindManyRecordsStateParams<T>) => {
|
||||||
const apolloCoreClient = useApolloCoreClient();
|
|
||||||
|
|
||||||
const queryIdentifier = getQueryIdentifier({
|
const queryIdentifier = getQueryIdentifier({
|
||||||
objectNameSingular,
|
objectNameSingular,
|
||||||
filter,
|
filter,
|
||||||
@ -124,14 +121,12 @@ export const useFetchMoreRecordsWithPagination = <
|
|||||||
lastCursor: isNonEmptyString(lastCursorLocal)
|
lastCursor: isNonEmptyString(lastCursorLocal)
|
||||||
? lastCursorLocal
|
? lastCursorLocal
|
||||||
: undefined,
|
: undefined,
|
||||||
client: apolloCoreClient,
|
|
||||||
},
|
},
|
||||||
updateQuery: (prev, { fetchMoreResult }) => {
|
updateQuery: (prev, { fetchMoreResult }) => {
|
||||||
const previousEdges =
|
const previousEdges =
|
||||||
prev?.[objectMetadataItem.namePlural]?.edges;
|
prev?.[objectMetadataItem.namePlural]?.edges;
|
||||||
const nextEdges =
|
const nextEdges =
|
||||||
fetchMoreResult?.[objectMetadataItem.namePlural]?.edges;
|
fetchMoreResult?.[objectMetadataItem.namePlural]?.edges;
|
||||||
|
|
||||||
let newEdges: RecordGqlEdge[] = previousEdges ?? [];
|
let newEdges: RecordGqlEdge[] = previousEdges ?? [];
|
||||||
|
|
||||||
if (isNonEmptyArray(nextEdges)) {
|
if (isNonEmptyArray(nextEdges)) {
|
||||||
@ -207,7 +202,6 @@ export const useFetchMoreRecordsWithPagination = <
|
|||||||
onCompleted,
|
onCompleted,
|
||||||
handleFindManyRecordsError,
|
handleFindManyRecordsError,
|
||||||
queryIdentifier,
|
queryIdentifier,
|
||||||
apolloCoreClient,
|
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user