Add pagination to timeline

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To add pagination to the timeline:

Update GraphQL Query: Modify getTimelineThreadsFromPersonId.ts to include pagination parameters (e.g., limit, offset).

const GET_TIMELINE_THREADS = gql`
  query GetTimelineThreads($personId: ID!, $limit: Int, $offset: Int) {
    timelineThreads(personId: $personId, limit: $limit, offset: $offset) {
      ...TimelineThreadFields
    }
  }
`;

Update Service Methods: Modify timeline-messaging.service.ts to handle pagination parameters.

async getTimelineThreads(personId: string, limit: number, offset: number): Promise<TimelineThreadsWithTotal> {
  return this.timelineThreadsRepository.find({ where: { personId }, take: limit, skip: offset });
}

Update Resolver: Modify timeline-messaging.resolver.ts to accept and pass pagination parameters.

@Query(() => TimelineThreadsWithTotal)
async timelineThreads(
  @Args('personId') personId: string,
  @Args('limit', { type: () => Int, nullable: true }) limit: number,
  @Args('offset', { type: () => Int, nullable: true }) offset: number
): Promise<TimelineThreadsWithTotal> {
  return this.timelineMessagingService.getTimelineThreads(personId, limit, offset);
}

Update DTO: Ensure timeline-threads-with-total.dto.ts includes pagination fields.

@ObjectType()
export class TimelineThreadsWithTotal {
  @Field(() => [TimelineThread])
  threads: TimelineThread[];

  @Field()
  total: number;

  @Field()
  limit: number;

  @Field()
  offset: number;
}

Update Frontend: Modify EmailThreads.tsx to fetch more records on pagination events.

const fetchMoreThreads = (limit, offset) => {
  fetchMore({
    variables: { limit, offset },
    updateQuery: (prev, { fetchMoreResult }) => {
      if (!fetchMoreResult) return prev;
      return Object.assign({}, prev, {
        timelineThreads: {
          ...fetchMoreResult.timelineThreads,
          threads: [...prev.timelineThreads.threads, ...fetchMoreResult.timelineThreads.threads],
        },
      });
    },
  });
};

twentyhq / twenty

Add pagination to timeline #5634

References