createInfiniteQueryController

function createInfiniteQueryController<TQueryFnData, TError, TData, TQueryKey, TPageParam>(
   host,
   options,
queryClient?): InfiniteQueryResultAccessor<TData, TError>;

정의 위치: packages/lit-query/src/createInfiniteQueryController.ts:402

호스트가 무한 쿼리를 구독하도록 하는 Lit 반응형 컨트롤러를 생성합니다. 쿼리.

반환된 접근자는 호출할 수 있으며 current, refetch도 노출합니다, fetchNextPage, fetchPreviousPage 및 destroy입니다. options가 다음과 같은 경우 함수는 호스트 업데이트 중에 다시 읽히므로 쿼리 키와 옵션이 반응형 호스트 상태를 따릅니다.

queryClient를 생략하면 컨트롤러는 다음에서 클라이언트를 확인합니다 연결된 가장 가까운 QueryClientProvider.

타입 매개변수

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

매개변수

host

ReactiveControllerHost

무한 쿼리를 소유하는 Lit 반응형 컨트롤러 host입니다 구독.

옵션

Accessor<CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>>

무한 쿼리 옵저버 옵션 또는 해당 옵션을 반환하는 getter 옵션.

queryClient?

QueryClient

선택적인 명시적 query client입니다. 다음을 위해 이를 제공하십시오 Lit 컨텍스트에서 클라이언트를 확인하면 안 되는 컨트롤러입니다.

반환값

InfiniteQueryResultAccessor<TData, TError>

페이지 헬퍼가 포함된 최신 무한 쿼리 결과의 접근자입니다. 메서드.

예시

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

class ProjectsView extends LitElement {
  private readonly projects = createInfiniteQueryController(this, {
    queryKey: ['projects'],
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  })

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

    return html`
      <button ?disabled=${!query.hasNextPage} @click=${() => this.projects.fetchNextPage()}>
        Load more
      </button>
    `
  }
}