createQueries

1const createQueries: <T, TCombinedResult>(queriesOptions: Accessor<{2  combine?: (result: T extends [] ? [] : T extends [Head] ? [GetResults<Head>] : T extends [Head, ...Tail[]] ? [...Tail[]] extends [] ? [] : [...(...)[]] extends [...] ? [..., ...] : ... extends ... ? ... : ... : { [K in string | number | symbol]: GetResults<(...)[(...)]> }) => TCombinedResult;3  queries:   | readonly [T extends [] ? [] : T extends [Head] ? [GetOptions<Head>] : T extends [Head, ...Tail[]] ? [...Tail[]] extends [] ? [] : [...(...)[]] extends [...] ? [..., ...] : ... extends ... ? ... : ... : readonly unknown[] extends T ? T : T extends ...[] ? ...[] : ...[]]4     | readonly [{ [K in string | number | symbol]: GetOptions<T[K]> }];5}>, queryClient?: Accessor<QueryClient>) => TCombinedResult = useQueries;

定义于：packages/solid-query/src/index.ts:86

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[]] ? [...Tail[]] extends [] ? [] : [...Tail[]] extends [Head] ? [GetResults<...>, GetResults<...>, GetResults<...>] : [...(...)[]] extends [..., ...(...)[]] ? ... extends ... ? ... : ... : [...(...)[]] : [...{ [K in string | number | symbol]: GetResults<(...)[(...)]> }[]] : { [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 [] ? [] : [...(...)[]] extends [...] ? [..., ...] : ... extends ... ? ... : ... : { [K in string | number | symbol]: GetResults<(...)[(...)]> }) => TCombinedResult; queries: | readonly [T extends [] ? [] : T extends [Head] ? [GetOptions<Head>] : T extends [Head, ...Tail[]] ? [...Tail[]] extends [] ? [] : [...(...)[]] extends [...] ? [..., ...] : ... extends ... ? ... : ... : readonly unknown[] extends T ? T : T extends ...[] ? ...[] : ...[]] | readonly [{ [K in string | number | symbol]: GetOptions<T[K]> }]; }>

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

queryClient?

Accessor<QueryClient>

一个用于获取自定义 QueryClient 的访问器。否则将使用最近上下文中的 QueryClient。

返回值

TCombinedResult

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

示例

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}

将结果合并为单个值：

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}