useInfiniteQuery Jump To Pagination

[bestickley]

Hi, I've got a table with pagination that uses Amplify UI's Pagination component. With this component, a user can jump to different pages in addition to clicking a next or previous button. I'm using useInfiniteQuery and I have this implementation although it's a lot of code. I'm curious if anyone else out there has done something similar in a more elegant way. Thanks!

// imports remove for brevity

export function ProductsTable(): ReactElement {
  const [pagination, setPagination] = useState<Pagination>({
    currentPage: 1,
    totalPages: 1,
    pageSize: 10,
  });
  const { data, error, fetchNextPage, hasNextPage, isLoading, isRefetching } =
    trpc.product.listMine.useInfiniteQuery(
      {
        limit: pagination.pageSize,
      },
      {
        getNextPageParam: (lastPage) => lastPage.nextCursor,
      }
    );
  const onChangePaginaion = useCallback(
    (newPagination: Pagination) => {
      const nextCursor = data?.pageParams[newPagination.currentPage - 1] as
        | number
        | undefined;
      fetchNextPage({ pageParam: nextCursor });
      setPagination(newPagination);
    },
    [data, fetchNextPage]
  );
  const totalPages = useMemo(() => {
    const pageParams = data?.pageParams as number[];
    const set = new Set<number>(pageParams);
    return set.size;
  }, [data?.pageParams]);
  const columns: Column<TableProduct>[] = [...];
  const page = data?.pages[pagination.currentPage - 1];
  const items = page?.items;
  let AlertMessage = ...
  return (
    <QueryTable
      columns={columns}
      heading="Products"
      bgLoading={isRefetching}
      loading={isLoading}
      onChangePagination={onChangePaginaion}
      pagination={{
        ...pagination,
        hasMorePages: hasNextPage,
        totalPages,
      }}
      rows={items}
      AdditionalActions={<ProductsTableActions />}
      AlertMessage={AlertMessage}
    />
  );
}