본문으로 건너뛰기

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&lt;TQueryFnData, unknown>

TQueryKey​

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam​

TPageParam = unknown

매개변수​

host​

ReactiveControllerHost

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

옵션​

Accessor&lt;CreateInfiniteQueryOptions&lt;TQueryFnData, TError, TData, TQueryKey, TPageParam>>

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

queryClient?​

QueryClient

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

반환값​

InfiniteQueryResultAccessor&lt;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>
    `
  }
}