useSuspenseInfiniteQuery

function useSuspenseInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseSuspenseInfiniteQueryResult<TData, TError>;

정의 위치: preact-query/src/useSuspenseInfiniteQuery.ts:83

useSuspenseInfiniteQuery의 옵션은 throwOnError를 제외하면 useInfiniteQuery의 옵션과 같습니다, enabled 및 placeholderData.

주의: 취소가 작동하지 않습니다.

타입 매개변수

TQueryFnData

TQueryFnData

TError

TError = Error

TData

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

매개변수

옵션

UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

사용할 UseSuspenseInfiniteQueryOptions입니다 — 위에 나열된 항목을 제외하면 useInfiniteQuery와 동일한 옵션입니다.

queryClient?

QueryClient

사용자 지정 QueryClient를 사용하려면 이를 사용합니다. 그렇지 않으면 가장 가까운 컨텍스트의 항목이 사용됩니다 사용됩니다.

반환값

UseSuspenseInfiniteQueryResult<TData, TError>

data가 정의되어 있음이 보장된다는 점을 제외하면 useInfiniteQuery와 동일한 객체입니다, isPlaceholderData가 누락되었으며, status는 success 또는 error입니다(파생 플래그가 다음과 같이 설정됨 그에 따라).

비고

동일한 컴포넌트에서 여러 suspense 쿼리 호출은 직렬로 일시 중단되어 요청을 발생시킵니다 워터폴 — 각각은 이행될 때까지 렌더링을 차단하므로, 다음 항목은 다음 시점까지 가져오기를 시작하지도 않습니다 그런 다음입니다. Suspense 아래에서는 여러 무한 쿼리를 병렬화할 방법이 없습니다. 또한 다음 사항에 유의하세요 fetchNextPage와 같은 명령형 가져오기 호출은 기본 다시 가져오기 동작을 방해할 수 있으며, 그 결과 데이터가 오래된 상태가 됩니다. 이러한 함수는 사용자 작업에 대한 응답으로만 호출하거나, 다음을 추가해야 합니다 hasNextPage && !isFetching 같은 조건입니다.

참조

이 훅의 비-Suspense 버전은 useInfiniteQuery입니다.

예시

import { Suspense } from 'preact/compat'
import { useSuspenseInfiniteQuery } from '@tanstack/preact-query'

function Projects() {
  // `data` is guaranteed to be defined here — no `isPending` check needed.
  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
    useSuspenseInfiniteQuery({
      queryKey: ['projects'],
      queryFn: ({ pageParam }) => fetchProjects(pageParam),
      initialPageParam: 0,
      getNextPageParam: (lastPage) => lastPage.nextId,
    })

  return (
    <div>
      <ul>
        {data.pages.map((page) =>
          page.projects.map((project) => <li key={project.id}>{project.name}</li>),
        )}
      </ul>
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetching}
      >
        {isFetchingNextPage
          ? 'Loading more...'
          : hasNextPage
            ? 'Load More'
            : 'Nothing more to load'}
      </button>
    </div>
  )
}

function App() {
  return (
    <Suspense fallback={<h1>Loading projects...</h1>}>
      <Projects />
    </Suspense>
  )
}