分页查询 / 滞后查询

1const projectsQuery = injectQuery(() => ({2  queryKey: ['projects', page()],3  queryFn: fetchProjects,4}))

1@Component({2  selector: 'pagination-example',3  template: `4    <div>5      <p>6        In this example, each page of data remains visible as the next page is7        fetched. The buttons and capability to proceed to the next page are also8        suppressed until the next page cursor is known. Each page is cached as a9        normal query too, so when going to previous pages, you'll see them10        instantaneously while they are also re-fetched invisibly in the11        background.12      </p>13      @if (projectsQuery.status() === 'pending') {14        <div>Loading...</div>15      } @else if (projectsQuery.status() === 'error') {16        <div>Error: {{ projectsQuery.error().message }}</div>17      } @else {18        <!-- 'data' will either resolve to the latest page's data -->19        <!-- or if fetching a new page, the last successful page's data -->20        <div>21          @for (project of projectsQuery.data().projects; track project.id) {22            <p>{{ project.name }}</p>23          }24        </div>25      }26 27      <div>Current Page: {{ page() + 1 }}</div>28      <button (click)="previousPage()" [disabled]="page() === 0">29        Previous Page30      </button>31      <button32        (click)="nextPage()"33        [disabled]="34          projectsQuery.isPlaceholderData() || !projectsQuery.data()?.hasMore35        "36      >37        Next Page38      </button>39      <!-- Since the last page's data potentially sticks around between page requests, -->40      <!-- we can use 'isFetching' to show a background loading -->41      <!-- indicator since our status === 'pending' state won't be triggered -->42      @if (projectsQuery.isFetching()) {43        <span> Loading...</span>44      }45    </div>46  `,47})48export class PaginationExampleComponent {49  page = signal(0)50  readonly #queryClient = inject(QueryClient)51 52  readonly projectsQuery = injectQuery(() => ({53    queryKey: ['projects', this.page()],54    queryFn: () => lastValueFrom(fetchProjects(this.page())),55    placeholderData: keepPreviousData,56    staleTime: 5 * 1000,57  }))58 59  constructor() {60    effect(() => {61      // Prefetch the next page!62      if (63        !this.projectsQuery.isPlaceholderData() &&64        this.projectsQuery.data()?.hasMore65      ) {66        void this.#queryClient67          .query({68            queryKey: ['projects', this.page() + 1],69            queryFn: () => lastValueFrom(fetchProjects(this.page() + 1)),70          })71          .catch(noop)72      }73    })74  }75 76  previousPage() {77    this.page.update((old) => Math.max(old - 1, 0))78  }79 80  nextPage() {81    this.page.update((old) =>82      this.projectsQuery.data()?.hasMore ? old + 1 : old,83    )84  }85}