useQueries

function useQueries<T, TCombinedResult>(__namedParameters, queryClient?): TCombinedResult;

정의 위치: preact-query/src/useQueries.ts:301

useQueries 훅을 사용하여 가변 개수의 쿼리를 가져올 수 있습니다.

queries 키는 useQuery와 동일한 쿼리 옵션 객체의 배열을 허용합니다(다음은 제외: queryClient 옵션 - QueryClient를 최상위 수준에서 전달할 수 있기 때문입니다).

쿼리 객체 배열에 동일한 쿼리 키가 두 번 이상 있으면 일부 데이터가 공유될 수 있습니다 쿼리 사이에서 발생합니다. 이를 방지하려면 쿼리의 중복을 제거하고 결과를 원하는 항목에 다시 매핑하는 방안을 고려하세요 구조.

combine 옵션을 사용해 쿼리 결과를 단일 값으로 결합할 수 있습니다. 결과는 가능한 한 참조적으로 안정적이도록 구조적으로 공유됩니다.

타입 매개변수

T

T extends any[]

TCombinedResult

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

매개변수

__namedParameters

combine?

(result) => TCombinedResult

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

쿼리

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

쿼리 옵션 객체의 배열로, 대부분 useQuery와 동일하지만 queryClient 및 subscribed는 쿼리별로 허용되지 않으며(대신 여기서는 subscribed가 최상위 옵션임), placeholderData는 QueriesPlaceholderDataFunction을 받으며, 이는 previousData를 인수로 호출됩니다 그리고 previousQuery는 useQuery의 플레이스홀더 함수가 아니라 항상 undefined입니다.

subscribed?

boolean

이 observer가 쿼리 캐시 업데이트 구독을 해제하도록 하려면 이를 false로 설정합니다.

기본값

true

queryClient?

QueryClient

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

반환값

TCombinedResult

결합된 결과입니다. combine이 없으면 모든 쿼리 결과가 동일한 순서로 포함된 배열입니다 입력과 동일한 순서입니다. combine이 제공되면 대신 combine이 반환한 값입니다.

예시

import { useQueries } from '@tanstack/preact-query'

function Posts({ ids }: { ids: Array<number> }) {
  const postQueries = useQueries({
    queries: ids.map((id) => ({
      queryKey: ['post', id],
      queryFn: () => fetchPost(id),
      staleTime: Infinity,
    })),
  })

  return (
    <ul>
      {postQueries.map((query, index) => {
        if (query.isPending) return <li key={ids[index]}>Loading...</li>
        if (query.isError) return <li key={ids[index]}>Error: {query.error.message}</li>
        return <li key={ids[index]}>{query.data.title}</li>
      })}
    </ul>
  )
}

결과를 단일 값으로 결합합니다:

import { useQueries } from '@tanstack/preact-query'

function Posts({ ids }: { ids: Array<number> }) {
  const { data, isPending, isError } = useQueries({
    queries: ids.map((id) => ({
      queryKey: ['post', id],
      queryFn: () => fetchPost(id),
    })),
    combine: (postQueries) => {
      return {
        data: postQueries.map((query) => query.data),
        isPending: postQueries.some((query) => query.isPending),
        isError: postQueries.some((query) => query.isError),
      }
    },
  })

  if (isPending) return 'Loading...'
  if (isError) return 'Error loading posts'

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