injectPages

{
  "items": [
    { "id": 1, "title": "Post 1" },
    { "id": 2, "title": "Post 2" }
  ],
  "meta": { "page": 1, "hasMore": true }
}

@Component({
  selector: "app-post-list",
  template: `
    @if (posts.loading()) {
      <div>Loading...</div>
    } @else {
      @for (post of posts.data(); track post.id) {
        <app-post-card [post]="post" />
      }

      @if (posts.canFetchNext()) {
        <button (click)="posts.fetchNext()" [disabled]="posts.fetchingNext()">
          {{ posts.fetchingNext() ? "Loading..." : "Load More" }}
        </button>
      }
    }
  `,
})
export class PostListComponent {
  posts = injectPages(
    (api) => api("posts").GET({ query: { page: 1, limit: 20 } }),
    {
      canFetchNext: ({ lastPage }) => lastPage?.data?.meta.hasMore ?? false,
      nextPageRequest: ({ lastPage }) => ({
        query: { page: (lastPage?.data?.meta.page ?? 0) + 1 },
      }),
      merger: (pages) => pages.flatMap((p) => p.data?.items ?? []),
    }
  );
}

// For canFetchNext and nextPageRequest
type NextContext<TData, TRequest> = {
  lastPage: InfinitePage<TData> | undefined;
  pages: InfinitePage<TData>[];
  request: TRequest;
};

// For canFetchPrev and prevPageRequest
type PrevContext<TData, TRequest> = {
  firstPage: InfinitePage<TData> | undefined;
  pages: InfinitePage<TData>[];
  request: TRequest;
};

// Each page in the pages array
type InfinitePage<TData> = {
  status: "pending" | "loading" | "success" | "error" | "stale";
  data?: TData;
  error?: TError;
  meta?: TMeta;
  input?: { query?; params?; body? };
};