useQueries

1function useQueries<T extends any[], 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]> }>(options: object, queryClient?: QueryClient): TCombinedResult;

定义于：packages/preact-query/src/useQueries.ts:304

useQueries Hook 可用于拉取数量可变的查询。

queries 参数接受一个查询选项对象数组，其结构与 useQuery 大致相同——具体差异请参见下方 queries 参数说明。自定义 QueryClient 仅需提供一次，作为 useQueries 自身的顶层第二个参数，而非为每个查询单独提供。

若在查询对象数组中多次使用相同的查询键，可能导致部分数据在多个查询之间被共享。为避免此情况，请考虑对查询进行去重，并将结果映射回所需的结构。

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[]] ? [...(...)[]] extends [] ? [] : ... extends ... ? ... : ... : [...{ [K in (...)]: (...) }[]] : [...{ [K in string | number | symbol]: GetUseQueryResult<Tails[K]> }[]] : { [K in string | number | symbol]: GetUseQueryResult<T[K]> }

参数

options

要执行的 queries 数组，以及可选的 combine 和 subscribed 选项。

combine?

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

使用此函数将多个查询的结果合并为单个值。该结果在结构上会被共享，以尽可能保持引用稳定性。

queries

| 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]> }]

一个查询选项对象数组，其结构与 useQuery 大致相同——但以下几项不支持按查询指定：queryClient 和 subscribed（其中 subscribed 是此处的顶层选项），且 placeholderData 接受一个 QueriesPlaceholderDataFunction，该函数接收 previousData，而 previousQuery 始终为 undefined，而非 useQuery 所用的占位函数。

subscribed?

boolean

将此项设为 false 可使该观察者取消订阅查询缓存的更新。

默认值

1true

queryClient?

QueryClient

使用此参数提供自定义 QueryClient。否则，将使用最近上下文中的 QueryClient。

返回值

TCombinedResult

合并后的结果。若未提供 combine，则返回一个数组，其中包含所有查询结果，顺序与输入一致；若提供了 combine，则返回 combine 的返回值。

抛出异常

首个应抛出至最近错误边界（见 throwOnError）的查询所对应的错误。在 Suspense 暂停期间，则抛出一个 Promise。

示例

1import { useQueries } from '@tanstack/preact-query'2 3function Posts({ ids }: { ids: Array<number> }) {4  const postQueries = useQueries({5    queries: ids.map((id) => ({6      queryKey: ['post', id],7      queryFn: () => fetchPost(id),8      staleTime: Infinity,9    })),10  })11 12  return (13    <ul>14      {postQueries.map((query, index) => {15        if (query.isPending) return <li key={ids[index]}>Loading...</li>16        if (query.isError) return <li key={ids[index]}>Error: {query.error.message}</li>17        return <li key={ids[index]}>{query.data.title}</li>18      })}19    </ul>20  )21}

将结果合并为单个值：

1import { useQueries } from '@tanstack/preact-query'2 3function Posts({ ids }: { ids: Array<number> }) {4  const { data, isPending, isError } = useQueries({5    queries: ids.map((id) => ({6      queryKey: ['post', id],7      queryFn: () => fetchPost(id),8    })),9    combine: (postQueries) => {10      return {11        data: postQueries.map((query) => query.data),12        isPending: postQueries.some((query) => query.isPending),13        isError: postQueries.some((query) => query.isError),14      }15    },16  })17 18  if (isPending) return 'Loading...'19  if (isError) return 'Error loading posts'20 21  return (22    <ul>23      {data.map((post) => (24        <li key={post?.id}>{post?.title}</li>25      ))}26    </ul>27  )28}