useQueries

更新于 2026-11-02 Solid 查看英文原文 ↗

TypeScript

1function useQueries<T extends any[], TCombinedResult extends 2  | []3  | [4  | QueryObserverRefetchErrorResult<unknown, Error>5  | QueryObserverSuccessResult<unknown, Error>6  | QueryObserverLoadingErrorResult<unknown, Error>7  | QueryObserverLoadingResult<unknown, Error>8  | QueryObserverPendingResult<unknown, Error>9  | QueryObserverPlaceholderResult<unknown, Error>10  | QueryObserverRefetchErrorResult<unknown, unknown>11  | QueryObserverSuccessResult<unknown, unknown>12  | QueryObserverLoadingErrorResult<unknown, unknown>13  | QueryObserverLoadingResult<unknown, unknown>14  | QueryObserverPendingResult<unknown, unknown>15  | QueryObserverPlaceholderResult<unknown, unknown>]16  | (17  | QueryObserverRefetchErrorResult<unknown, Error>18  | QueryObserverSuccessResult<unknown, Error>19  | QueryObserverLoadingErrorResult<unknown, Error>20  | QueryObserverLoadingResult<unknown, Error>21  | QueryObserverPendingResult<unknown, Error>22  | QueryObserverPlaceholderResult<unknown, Error>23  | QueryObserverRefetchErrorResult<unknown, unknown>24  | QueryObserverSuccessResult<unknown, unknown>25  | QueryObserverLoadingErrorResult<unknown, unknown>26  | QueryObserverLoadingResult<unknown, unknown>27  | QueryObserverPendingResult<unknown, unknown>28  | QueryObserverPlaceholderResult<unknown, unknown>)[] = T extends [] ? [] : T extends [Head] ? [GetResults<Head>] : T extends [Head, ...Tail[]] ? [...Tail[]] extends [] ? [] : [...Tail[]] extends [Head] ? [GetResults<Head>, GetResults<Head>] : [...Tail[]] extends [Head, ...Tail[]] ? [...Tail[]] extends [] ? [] : [...Tail[]] extends [Head] ? [GetResults<Head>, GetResults<Head>, GetResults<Head>] : [...Tail[]] extends [Head, ...Tail[]] ? [...(...)[]] extends [] ? [] : ... extends ... ? ... : ... : [...{ [K in (...)]: (...) }[]] : [...{ [K in string | number | symbol]: GetResults<Tail[K]> }[]] : { [K in string | number | symbol]: GetResults<T[K]> }>(queriesOptions: Accessor<{29  combine?: (result: T extends [] ? [] : T extends [Head] ? [GetResults<Head>] : T extends [Head, ...Tail[]] ? [...Tail[]] extends [] ? [] : [...Tail[]] extends [Head] ? [GetResults<...>, GetResults<...>] : [...(...)[]] extends [..., ...(...)[]] ? ... extends ... ? ... : ... : [...(...)[]] : { [K in string | number | symbol]: GetResults<T[K]> }) => TCombinedResult;30  queries:   | readonly [T extends [] ? [] : T extends [Head] ? [GetOptions<Head>] : T extends [Head, ...Tail[]] ? [...Tail[]] extends [] ? [] : [...Tail[]] extends [Head] ? [GetOptions<...>, GetOptions<...>] : [...(...)[]] extends [..., ...(...)[]] ? ... extends ... ? ... : ... : ... extends ... ? ... : ... : readonly unknown[] extends T ? T : T extends UseQueryOptionsForUseQueries<..., ..., ..., ...>[] ? UseQueryOptionsForUseQueries<..., ..., ..., ...>[] : UseQueryOptionsForUseQueries<..., ..., ..., ...>[]]31     | readonly [{ [K in string | number | symbol]: GetOptions<T[K]> }];32}>, queryClient?: Accessor<QueryClient>): TCombinedResult;

定义于：packages/solid-query/src/useQueries.ts:272

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

queries 选项接受一个查询选项对象数组，其结构与 useQuery 所用对象基本相同——二者唯一区别见下方 placeholderData。自定义 QueryClient 仅需提供一次，作为 useQueries 自身顶层的第二个参数，而非为每个查询单独提供。

若在查询对象数组中多次使用相同的查询键，可能导致部分数据在多个查询间共享。为避免此问题，建议先对查询去重，再将结果映射回所需结构。

combine 选项可用于将各查询结果合并为单一值。该结果在结构上保持共享，以尽可能维持引用稳定性。

placeholderData 在此处同样受支持，但与 useQuery 不同，它不会接收先前已渲染查询的信息，因为每次渲染时查询数量可能不同。

类型参数

T

T extends any[]

TCombinedResult

TCombinedResult extends | [] | [ | QueryObserverRefetchErrorResult<unknown, Error> | QueryObserverSuccessResult<unknown, Error> | QueryObserverLoadingErrorResult<unknown, Error> | QueryObserverLoadingResult<unknown, Error> | QueryObserverPendingResult<unknown, Error> | QueryObserverPlaceholderResult<unknown, Error> | QueryObserverRefetchErrorResult<unknown, unknown> | QueryObserverSuccessResult<unknown, unknown> | QueryObserverLoadingErrorResult<unknown, unknown> | QueryObserverLoadingResult<unknown, unknown> | QueryObserverPendingResult<unknown, unknown> | QueryObserverPlaceholderResult<unknown, unknown>] | ( | QueryObserverRefetchErrorResult<unknown, Error> | QueryObserverSuccessResult<unknown, Error> | QueryObserverLoadingErrorResult<unknown, Error> | QueryObserverLoadingResult<unknown, Error> | QueryObserverPendingResult<unknown, Error> | QueryObserverPlaceholderResult<unknown, Error> | QueryObserverRefetchErrorResult<unknown, unknown> | QueryObserverSuccessResult<unknown, unknown> | QueryObserverLoadingErrorResult<unknown, unknown> | QueryObserverLoadingResult<unknown, unknown> | QueryObserverPendingResult<unknown, unknown> | QueryObserverPlaceholderResult<unknown, unknown>)[] = T extends [] ? [] : T extends [Head] ? [GetResults<Head>] : T extends [Head, ...Tail[]] ? [...Tail[]] extends [] ? [] : [...Tail[]] extends [Head] ? [GetResults<Head>, GetResults<Head>] : [...Tail[]] extends [Head, ...Tail[]] ? [...(...)[]] extends [] ? [] : ... extends ... ? ... : ... : [...{ [K in (...)]: (...) }[]] : [...{ [K in string | number | symbol]: GetResults<Tail[K]> }[]] : { [K in string | number | symbol]: GetResults<T[K]> }

参数

queriesOptions

Accessor<{ combine?: (result: T extends [] ? [] : T extends [Head] ? [GetResults<Head>] : T extends [Head, ...Tail[]] ? [...Tail[]] extends [] ? [] : [...Tail[]] extends [Head] ? [GetResults<...>, GetResults<...>] : [...(...)[]] extends [..., ...(...)[]] ? ... extends ... ? ... : ... : [...(...)[]] : { [K in string | number | symbol]: GetResults<T[K]> }) => TCombinedResult; queries: | readonly [T extends [] ? [] : T extends [Head] ? [GetOptions<Head>] : T extends [Head, ...Tail[]] ? [...Tail[]] extends [] ? [] : [...Tail[]] extends [Head] ? [GetOptions<...>, GetOptions<...>] : [...(...)[]] extends [..., ...(...)[]] ? ... extends ... ? ... : ... : ... extends ... ? ... : ... : readonly unknown[] extends T ? T : T extends UseQueryOptionsForUseQueries<..., ..., ..., ...>[] ? UseQueryOptionsForUseQueries<..., ..., ..., ...>[] : UseQueryOptionsForUseQueries<..., ..., ..., ...>[]] | readonly [{ [K in string | number | symbol]: GetOptions<T[K]> }]; }>

一个返回待执行 queries 数组的访问器，以及一个可选的 combine 函数。

queryClient?

Accessor<QueryClient>

一个用于获取自定义 QueryClient 的访问器。若未提供，则使用离当前作用域最近的上下文中的 QueryClient。

返回值

TCombinedResult

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

示例

TypeScript

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

将结果合并为单一值：

TypeScript

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