useInfiniteRead

function PostList() {
  const {
    data,
    loading,
    canFetchNext,
    canFetchPrev,
    fetchNext,
    fetchPrev,
    fetchingNext,
    fetchingPrev,
  } = useInfiniteRead(
    (api) => api("posts/paginated").GET({ query: { page: 1 } }),
    {
      canFetchNext: ({ response }) => response?.meta.hasMore ?? false,
      nextPageRequest: ({ response, request }) => ({
        query: { ...request.query, page: (response?.meta.page ?? 0) + 1 },
      }),
      merger: (allResponses) => allResponses.flatMap((r) => r.items),
      canFetchPrev: ({ response }) => (response?.meta.page ?? 1) > 1,
      prevPageRequest: ({ response, request }) => ({
        query: { ...request.query, page: (response?.meta.page ?? 2) - 1 },
      }),
    }
  );

  return (
    <div>
      {canFetchPrev && (
        <button onClick={fetchPrev} disabled={fetchingPrev}>
          Load Previous
        </button>
      )}

      {data?.map((post) => <PostCard key={post.id} post={post} />)}

      {canFetchNext && (
        <button onClick={fetchNext} disabled={fetchingNext}>
          Load More
        </button>
      )}
    </div>
  );
}

type Context<TData, TRequest> = {
  response: TData | undefined;
  allResponses: TData[];
  request: TRequest;
};