Paginação

const events = await sdk.events.list({
  page: 1,
  limit: 20,
});

interface PaginationParams {
  page?: number;
  limit?: number;
  offset?: number;
}

interface PaginatedResponse<T> {
  data: T[];
  pagination: {
    page: number;
    limit: number;
    total: number;
    totalPages: number;
    hasNext: boolean;
    hasPrev: boolean;
  };
}

async function fetchAllEvents() {
  const allEvents = [];
  let page = 1;
  let hasNext = true;
 
  while (hasNext) {
    const response = await sdk.events.list({ page, limit: 100 });
    allEvents.push(...response.data);
    hasNext = response.pagination.hasNext;
    page++;
  }
 
  return allEvents;
}

import { useEvents } from '@meaple/react-query'
 
function EventsList() {
  const [page, setPage] = useState(1)
 
  const { data, isLoading } = useEvents({
    page,
    limit: 20
  })
 
  return (
    <div>
      {data?.data.map(event => (
        <div key={event.id}>{event.name}</div>
      ))}
 
      <button
        disabled={!data?.pagination.hasPrev}
        onClick={() => setPage(p => p - 1)}
      >
        Anterior
      </button>
 
      <button
        disabled={!data?.pagination.hasNext}
        onClick={() => setPage(p => p + 1)}
      >
        Próximo
      </button>
    </div>
  )
}

import { useInfiniteQuery } from '@tanstack/react-query'
 
function InfiniteEventsList() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage
  } = useInfiniteQuery({
    queryKey: ['events'],
    queryFn: ({ pageParam = 1 }) =>
      sdk.events.list({ page: pageParam, limit: 20 }),
    getNextPageParam: (lastPage) =>
      lastPage.pagination.hasNext
        ? lastPage.pagination.page + 1
        : undefined
  })
 
  return (
    <div>
      {data?.pages.map(page =>
        page.data.map(event => (
          <div key={event.id}>{event.name}</div>
        ))
      )}
 
      {hasNextPage && (
        <button onClick={() => fetchNextPage()}>
          {isFetchingNextPage ? 'Carregando...' : 'Carregar Mais'}
        </button>
      )}
    </div>
  )
}

interface CursorParams {
  cursor?: string;
  limit?: number;
}
 
const response = await sdk.events.list({
  cursor: 'next_cursor_token',
  limit: 20,
});
 
const nextCursor = response.pagination.nextCursor;