본문으로 건너뛰기

useSuspenseQueries

호출 시그니처​

function useSuspenseQueries<T, TCombinedResult>(options, queryClient?): TCombinedResult;

정의 위치: preact-query/src/useSuspenseQueries.ts:292

useSuspenseQueries의 옵션은 useQueries의 옵션과 동일하지만, 각 query는 가질 수 없습니다 throwOnError, enabled, or placeholderData.

타입 매개변수​

T​

T extends any[]

TCombinedResult​

TCombinedResult = T extends [] ? [] : T extends [Head] ? [GetUseSuspenseQueryResult<Head>] : T extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...Tails[]] extends [Head] ? [GetUseSuspenseQueryResult<Head>, GetUseSuspenseQueryResult<Head>] : [...Tails[]] extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...Tails[]] extends [Head] ? [GetUseSuspenseQueryResult<Head>, GetUseSuspenseQueryResult<Head>, GetUseSuspenseQueryResult<Head>] : [...Tails[]] extends [Head, ...Tails[]] ? [...(...)[]] extends [] ? [] : ... extends ... ? ... : ... : [...{ [K in (...)]: (...) }[]] : [...{ [K in string | number | symbol]: GetUseSuspenseQueryResult<Tails[K<(...)>]> }[]] : { [K in string | number | symbol]: GetUseSuspenseQueryResult<T[K<K>]> }

매개변수​

옵션​

Suspense에서 실행할 queries 배열과 선택적 combine 함수입니다.

combine?​

(result) => TCombinedResult

쿼리 결과를 단일 값으로 결합하려면 이를 사용합니다. 결과는 구조적으로 공유된 값이 최대한 참조적으로 안정되도록 합니다.

쿼리​

| readonly [T extends [] ? [] : T extends [Head] ? [GetUseSuspenseQueryOptions<Head>] : T extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...Tails[]] extends [Head] ? [GetUseSuspenseQueryOptions<Head>, GetUseSuspenseQueryOptions<Head>] : [...Tails[]] extends [Head, ...Tails[]] ? [...(...)[]] extends [] ? [] : ... extends ... ? ... : ... : ...[] extends [...(...)[]] ? [...(...)[]] : ... extends ... ? ... : ... : unknown[] extends T ? T : T extends UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[] ? UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[] : UseSuspenseQueryOptions<unknown, Error, unknown, readonly ...[]>[]] | readonly [{ [K in string | number | symbol]: GetUseSuspenseQueryOptions<T[K<K>]> }]

useSuspenseQuery와 동일한 쿼리 옵션 객체의 배열입니다.

queryClient?​

QueryClient

이를 사용하여 사용자 지정 QueryClient를 제공합니다. 그렇지 않으면 가장 가까운 context의 것을 사용합니다 사용됩니다.

반환값​

TCombinedResult

useQueries와 동일한 구조이지만, 각 query에서 data는 다음임이 보장됩니다 정의되어 있고, isPlaceholderData가 누락되었으며, status가 success 또는 error인 경우(파생된 플래그가 그에 맞게 설정됨).

주의: 모든 쿼리의 로딩이 완료된 후에만 컴포넌트가 다시 마운트됩니다. 따라서 쿼리가 다음 상태가 되었다면 모든 쿼리가 완료되는 데 걸린 시간 동안 stale 상태가 되었다면 다시 마운트할 때 다시 가져옵니다. 이를 방지하려면 이를 위해 staleTime을 충분히 높게 설정해야 합니다. 취소는 작동하지 않습니다.

예시​

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

function Posts({ ids }: { ids: Array<number> }) {
  // Every result is guaranteed to be defined — no per-query `isPending` check needed.
  const postQueries = useSuspenseQueries({
    queries: ids.map((id) => ({
      queryKey: ['post', id],
      queryFn: () => fetchPost(id),
    })),
  })

  return (
    <ul>
      {postQueries.map((query) => (
        <li key={query.data.id}>{query.data.title}</li>
      ))}
    </ul>
  )
}

function App() {
  return (
    <Suspense fallback={<h1>Loading posts...</h1>}>
      <Posts ids={[1, 2, 3]} />
    </Suspense>
  )
}

여러 개의 서로 다른 쿼리 — 여러 번 useSuspenseQuery 호출하는 대신 useSuspenseQueries를 사용합니다. 그러면 하나씩 차례로 일시 중단하는 대신 병렬로 가져옵니다:

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

function Dashboard() {
  const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({
    queries: [
      { queryKey: ['users'], queryFn: fetchUsers },
      { queryKey: ['teams'], queryFn: fetchTeams },
      { queryKey: ['projects'], queryFn: fetchProjects },
    ],
  })

  return (
    <div>
      <UserList users={usersQuery.data} />
      <TeamList teams={teamsQuery.data} />
      <ProjectList projects={projectsQuery.data} />
    </div>
  )
}

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

combine하여 결과를 단일 boolean으로 만들므로, 해당 boolean이 변경될 때만 Refresh가 다시 렌더링되며, 각 개별 쿼리 업데이트마다가 아닙니다. 이 오버로드만 combine을 허용합니다:

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

function Refresh() {
  const anyFetching = useSuspenseQueries({
    queries: [
      { queryKey: ['users'], queryFn: fetchUsers },
      { queryKey: ['teams'], queryFn: fetchTeams },
    ],
    combine: (results) => results.some((result) => result.isFetching),
  })

  return anyFetching ? <span>Refreshing…</span> : null
}

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

호출 시그니처​

function useSuspenseQueries<T, TCombinedResult>(options, queryClient?): TCombinedResult;

정의 위치: preact-query/src/useSuspenseQueries.ts:393

useSuspenseQueries의 옵션은 useQueries의 옵션과 동일하지만, 각 query는 가질 수 없습니다 throwOnError, enabled, or placeholderData.

타입 매개변수​

T​

T extends any[]

TCombinedResult​

TCombinedResult = T extends [] ? [] : T extends [Head] ? [GetUseSuspenseQueryResult<Head>] : T extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...Tails[]] extends [Head] ? [GetUseSuspenseQueryResult<Head>, GetUseSuspenseQueryResult<Head>] : [...Tails[]] extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...Tails[]] extends [Head] ? [GetUseSuspenseQueryResult<Head>, GetUseSuspenseQueryResult<Head>, GetUseSuspenseQueryResult<Head>] : [...Tails[]] extends [Head, ...Tails[]] ? [...(...)[]] extends [] ? [] : ... extends ... ? ... : ... : [...{ [K in (...)]: (...) }[]] : [...{ [K in string | number | symbol]: GetUseSuspenseQueryResult<Tails[K<(...)>]> }[]] : { [K in string | number | symbol]: GetUseSuspenseQueryResult<T[K<K>]> }

매개변수​

옵션​

Suspense에서 실행할 queries 배열과 선택적 combine 함수입니다.

combine?​

(result) => TCombinedResult

쿼리 결과를 단일 값으로 결합하려면 이를 사용합니다. 결과는 구조적으로 공유된 값이 최대한 참조적으로 안정되도록 합니다.

쿼리​

readonly [T extends [] ? [] : T extends [Head] ? [GetUseSuspenseQueryOptions<Head>] : T extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...Tails[]] extends [Head] ? [GetUseSuspenseQueryOptions<Head>, GetUseSuspenseQueryOptions<Head>] : [...Tails[]] extends [Head, ...Tails[]] ? [...Tails[]] extends [] ? [] : [...(...)[]] extends [...] ? [..., ..., ...] : ... extends ... ? ... : ... : unknown[] extends [...Tails[]] ? [...Tails[]] : [...(...)[]] extends ...[] ? ...[] : ...[] : unknown[] extends T ? T : T extends UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[] ? UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[] : UseSuspenseQueryOptions<unknown, Error, unknown, readonly unknown[]>[]]

useSuspenseQuery와 동일한 쿼리 옵션 객체의 배열입니다.

queryClient?​

QueryClient

이를 사용하여 사용자 지정 QueryClient를 제공합니다. 그렇지 않으면 가장 가까운 context의 것을 사용합니다 사용됩니다.

반환값​

TCombinedResult

useQueries와 동일한 구조이지만, 각 query에서 data는 다음임이 보장됩니다 정의되어 있고, isPlaceholderData가 누락되었으며, status가 success 또는 error인 경우(파생된 플래그가 그에 맞게 설정됨).

주의: 모든 쿼리의 로딩이 완료된 후에만 컴포넌트가 다시 마운트됩니다. 따라서 쿼리가 다음 상태가 되었다면 모든 쿼리가 완료되는 데 걸린 시간 동안 stale 상태가 되었다면 다시 마운트할 때 다시 가져옵니다. 이를 방지하려면 이를 위해 staleTime을 충분히 높게 설정해야 합니다. 취소는 작동하지 않습니다.

예시​

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

function Posts({ ids }: { ids: Array<number> }) {
  // Every result is guaranteed to be defined — no per-query `isPending` check needed.
  const postQueries = useSuspenseQueries({
    queries: ids.map((id) => ({
      queryKey: ['post', id],
      queryFn: () => fetchPost(id),
    })),
  })

  return (
    <ul>
      {postQueries.map((query) => (
        <li key={query.data.id}>{query.data.title}</li>
      ))}
    </ul>
  )
}

function App() {
  return (
    <Suspense fallback={<h1>Loading posts...</h1>}>
      <Posts ids={[1, 2, 3]} />
    </Suspense>
  )
}

여러 개의 서로 다른 쿼리 — 여러 번 useSuspenseQuery 호출하는 대신 useSuspenseQueries를 사용합니다. 그러면 하나씩 차례로 일시 중단하는 대신 병렬로 가져옵니다:

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

function Dashboard() {
  const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({
    queries: [
      { queryKey: ['users'], queryFn: fetchUsers },
      { queryKey: ['teams'], queryFn: fetchTeams },
      { queryKey: ['projects'], queryFn: fetchProjects },
    ],
  })

  return (
    <div>
      <UserList users={usersQuery.data} />
      <TeamList teams={teamsQuery.data} />
      <ProjectList projects={projectsQuery.data} />
    </div>
  )
}

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