twenty
twenty copied to clipboard
Fix message thread pagination
On a company or person's detail page, go to the emails tab.
You will see the frontend does two request to GetTimelineThreadsFromCompanyId
.
It seems it only stops doing request when it finds an empty array.
Instead, it should rely on the count returned in totalNumberOfThreads
variables.
If that count it inferior to the total number of records we ask for, then we already know we don't have to ask for a second page.
To fix the issue with unnecessary requests in message thread pagination, you need to adjust the logic in the EmailThreads
component to stop fetching more records when the total number of threads is less than or equal to the number of records already fetched. Here's a specific implementation step:
- Modify the
fetchMoreRecords
function insideEmailThreads.tsx
to check if the total number of threads (totalNumberOfThreads
) is less than or equal to the number of records already fetched. If so, do not perform any more fetch requests.
const fetchMoreRecords = () => {
const alreadyFetchedRecords = timelineThreads.length;
if (totalNumberOfThreads <= alreadyFetchedRecords) {
return; // Stop fetching more records
}
// Existing logic to fetch more records
};
This change ensures that additional data is only requested when the total number of threads exceeds the number of threads already fetched, effectively using the totalNumberOfThreads
variable to control pagination.
References
twentyhq/twenty/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx twentyhq/twenty/packages/twenty-front/src/modules/activities/emails/queries/getTimelineThreadsFromCompanyId.ts twentyhq/twenty/packages/twenty-server/src/core/messaging/timeline-messaging.resolver.ts twentyhq/twenty/packages/twenty-server/src/core/messaging/timeline-messaging.service.ts
To address the issue of unnecessary requests for message thread pagination, you'll need to modify the logic within the EmailThreads.tsx
component to utilize the totalNumberOfThreads
variable more effectively. Here's a step-by-step guide to implement the fix:
-
Modify Fetch Logic: In
EmailThreads.tsx
, adjust thefetchMoreRecords
function or its equivalent logic to check if the current page number multiplied by the page size is greater than or equal tototalNumberOfThreads
. If true, this indicates that all records have been fetched, and no further requests are necessary. -
Implement the Check: Before calling
fetchMoreRecords
, add a condition to verify whether additional data needs to be fetched. This can be done by comparing thetotalNumberOfThreads
with the product of the current page number andTIMELINE_THREADS_DEFAULT_PAGE_SIZE
. -
Adjust the UseEffect or Fetching Logic: Ensure that the logic which triggers the data fetching (possibly within a
useEffect
hook or a similar lifecycle method) respects this new condition to prevent unnecessary fetch calls.
Here's a pseudo-code snippet to illustrate the concept:
if ((currentPage * TIMELINE_THREADS_DEFAULT_PAGE_SIZE) < totalNumberOfThreads) {
fetchMoreRecords();
} else {
// All records have been fetched, do not make more requests
}
This adjustment ensures that the component only requests additional pages when the total number of threads exceeds the number of threads already fetched, effectively reducing unnecessary network requests and improving the performance of the emails tab on detail pages.
References
twentyhq/twenty/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx twentyhq/twenty/packages/twenty-front/src/modules/activities/emails/queries/getTimelineThreadsFromCompanyId.ts twentyhq/twenty/packages/twenty-server/src/core/messaging/timeline-messaging.resolver.ts twentyhq/twenty/packages/twenty-server/src/core/messaging/timeline-messaging.service.ts
To address the issue of unnecessary requests in the pagination of message threads, you need to modify the logic in the EmailThreads
component to stop making additional requests based on the totalNumberOfThreads
variable rather than waiting for an empty array response. Here's a specific implementation approach:
-
In
/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
, update the logic inside theEmailThreads
component that triggersfetchMoreRecords
. Instead of relying solely on the presence of threads to continue fetching, compare thetotalNumberOfThreads
with the number of threads already fetched. -
Modify the
fetchMoreRecords
function or its calling condition to check if the total number of threads already fetched is less thantotalNumberOfThreads
. If true, then proceed to fetch more; otherwise, do not make additional requests. -
Specifically, you can adjust the condition around the
FetchMoreLoader
component'sonLastRowVisible
prop. Ensure that it also considers whether the total fetched threads are less thantotalNumberOfThreads
before deciding to fetch more. -
Here's a pseudo-code snippet for the adjusted condition:
const hasMoreThreadsToFetch = timelineThreads.length < totalNumberOfThreads;
<FetchMoreLoader
loading={isFetchingMore || firstQueryLoading}
onLastRowVisible={hasMoreThreadsToFetch ? fetchMoreRecords : () => {}}
/>
This approach ensures that additional network requests are only made when necessary, based on the actual count of available threads, improving the efficiency of data fetching on the emails tab.
References
twentyhq/twenty/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx twentyhq/twenty/packages/twenty-front/src/modules/activities/emails/queries/getTimelineThreadsFromCompanyId.ts twentyhq/twenty/packages/twenty-server/src/core/messaging/timeline-messaging.service.ts twentyhq/twenty/packages/twenty-server/src/core/messaging/timeline-messaging.resolver.ts
I'll look into this issue. Can you assign me to it?
@orinamio Let's leave this one to someone else while you work on the others? Happy to assign it after. Thanks again!!!
- Similarly Calendar is making [GetTimelineCalendarEventsFromCompanyId] even all records are fetched, fixed in #6814 🙏🏻