injectInfiniteRead

@Component({
  selector: "app-post-list",
  template: `
    @if (canFetchPrev()) {
      <button (click)="fetchPrev()" [disabled]="fetchingPrev()">
        Load Previous
      </button>
    }

    @for (post of data(); track post.id) {
      <app-post-card [post]="post" />
    }

    @if (canFetchNext()) {
      <button (click)="fetchNext()" [disabled]="fetchingNext()">
        Load More
      </button>
    }
  `,
})
export class PostListComponent {
  private posts = injectInfiniteRead(
    (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 },
      }),
    }
  );

  data = this.posts.data;
  loading = this.posts.loading;
  canFetchNext = this.posts.canFetchNext;
  canFetchPrev = this.posts.canFetchPrev;
  fetchNext = this.posts.fetchNext;
  fetchPrev = this.posts.fetchPrev;
  fetchingNext = this.posts.fetchingNext;
  fetchingPrev = this.posts.fetchingPrev;
}

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