무한 쿼리

무한 쿼리는 하나의 캐시 항목에 더 많은 데이터를 불러오는 목록에 사용합니다. createInfiniteQueryController를 사용합니다.

무한 쿼리 결과에는 다음이 포함됩니다:

• data.pages: 가져온 페이지
• data.pageParams: 해당 페이지에 사용된 페이지 매개변수
• fetchNextPage 및 fetchPreviousPage
• hasNextPage 및 hasPreviousPage
• isFetchingNextPage 및 isFetchingPreviousPage

더 불러오기 예제

import { LitElement, html } from 'lit'
import { createInfiniteQueryController } from '@tanstack/lit-query'

class ProjectsList extends LitElement {
  private readonly projects = createInfiniteQueryController(this, {
    queryKey: ['projects'],
    queryFn: ({ pageParam }) => fetchProjectsPage(pageParam),
    initialPageParam: 1,
    getNextPageParam: (lastPage) =>
      lastPage.hasMore ? lastPage.page + 1 : undefined,
  })

  render() {
    const query = this.projects()

    if (query.isPending) return html`Loading...`
    if (query.isError) return html`Error: ${query.error.message}`

    return html`
      ${query.data.pages.map(
        (page) => html`
          ${page.projects.map((project) => html`<p>${project.name}</p>`)}
        `,
      )}

      <button
        ?disabled=${!query.hasNextPage || query.isFetching}
        @click=${() => this.projects.fetchNextPage()}
      >
        ${query.isFetchingNextPage
          ? 'Loading more...'
          : query.hasNextPage
            ? 'Load More'
            : 'Nothing more to load'}
      </button>
    `
  }
}

페이지 매개변수

initialPageParam은 필수입니다. getNextPageParam은 다른 페이지가 존재하는지와 다음 쿼리 함수 호출에 pageParam으로 어떤 값을 전달할지를 결정합니다.

createInfiniteQueryController(this, {
  queryKey: ['projects'],
  queryFn: ({ pageParam }) => fetchProjectsPage(pageParam),
  initialPageParam: 1,
  getNextPageParam: (lastPage) =>
    lastPage.hasMore ? lastPage.page + 1 : undefined,
})

undefined 또는 null을 반환하면 다음 페이지가 없다는 의미입니다.

가져오기 중첩 방지

무한 쿼리 캐시 항목에는 진행 중인 가져오기 작업이 하나 있습니다. 백그라운드 다시 가져오기가 실행 중일 때 fetchNextPage를 호출하면 데이터를 덮어쓸 수 있습니다. 더 불러오기 전에 버튼을 비활성화하거나 !query.isFetching을 확인하세요:

if (query.hasNextPage && !query.isFetching) {
  this.projects.fetchNextPage()
}

페이지네이션 대안

UI가 한 번에 한 페이지를 표시한다면 key에 페이지가 포함된 일반 쿼리가 더 적합할 수 있습니다. Pagination 예제에서는 createQueryController, placeholderData: keepPreviousData, 프리페치 및 뮤테이션을 사용하여 해당 패턴을 보여 줍니다.