useSuspenseQuery

function useSuspenseQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): UseSuspenseQueryResult<TData, TError>;

정의 위치: preact-query/src/useSuspenseQuery.ts:57

useSuspenseQuery의 옵션은 throwOnError, enabled 및 다음 항목을 제외하면 useQuery의 옵션과 동일합니다: placeholderData.

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

타입 매개변수

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

매개변수

옵션

UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>

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

queryClient?

QueryClient

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

반환값

UseSuspenseQueryResult<TData, TError>

useQuery와 동일한 객체이지만, data가 정의되어 있음이 보장됩니다, isPlaceholderData 누락되어 있으며, status는 success 또는 error입니다(파생 플래그도 그에 따라 설정됩니다).

비고

동일한 컴포넌트에서 여러 번 호출한 useSuspenseQuery는 직렬로 일시 중단되어 요청이 워터폴 — 각각이 이행될 때까지 렌더링을 차단하므로 그때까지 다음 항목은 가져오기를 시작조차 하지 않습니다. 컴포넌트에 suspense를 사용하는 쿼리가 둘 이상 있어 이들이 다음과 같이 되도록 하려면 대신 useSuspenseQueries를 사용합니다. 병렬로 가져옵니다.

예시

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

function Posts() {
  // `data` is guaranteed to be defined here — no `isPending` check needed.
  const { data, isFetching } = useSuspenseQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  })

  return (
    <div>
      <h1>Posts {isFetching ? '(refreshing...)' : null}</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  )
}

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