createInfiniteQuery
1const createInfiniteQuery: {2<TQueryFnData, TError, TData, TQueryKey, TPageParam> (options: DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: Accessor<QueryClient>): DefinedUseInfiniteQueryResult<TData, TError>;3<TQueryFnData, TError, TData, TQueryKey, TPageParam> (options: UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: Accessor<QueryClient>): UseInfiniteQueryResult<TData, TError>;4} = useInfiniteQuery;定义于：packages/solid-query/src/index.ts:72
调用签名
1<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: Accessor<QueryClient>): DefinedUseInfiniteQueryResult<TData, TError>;useInfiniteQuery 的选项与 useQuery 完全相同，额外增加了 initialPageParam、getNextPageParam、getPreviousPageParam 和 maxPages。
当 initialData 已知被定义时，将选用此重载。
类型参数
TQueryFnData
TQueryFnData
TError
TError = Error
TData
TData = InfiniteData<TQueryFnData, unknown>
TQueryKey
TQueryKey extends readonly unknown[] = readonly unknown[]
TPageParam
TPageParam = unknown
参数
options
DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>
一个返回所用 DefinedInitialDataInfiniteOptions 的访问器 —— 即所有可传给 useInfiniteQuery 的选项，且 initialData 已知被定义。
queryClient?
Accessor<QueryClient>
一个自定义 QueryClient 的访问器。否则，将使用最近上下文中的 QueryClient。
返回值
DefinedUseInfiniteQueryResult<TData, TError>
与 useQuery 相同的属性，并额外增加了 fetchNextPage、fetchPreviousPage、hasNextPage、hasPreviousPage、isFetchingNextPage 和 isFetchingPreviousPage。只要 select 未将 TData 修改为偏离其默认 InfiniteData<TQueryFnData> 形状，也会添加 data.pages 和 data.pageParams。
备注
请注意，命令式拉取调用（例如 fetchNextPage）可能会干扰默认的重新拉取行为，导致数据过期。请确保仅在响应用户操作时调用这些函数，或添加类似 hasNextPage && !isFetching 的条件。
参见
infiniteQueryOptions 可用于在 useInfiniteQuery 与 queryClient.infiniteQuery 等命令式 API 之间共享这些选项。
示例
1import { For } from 'solid-js'2import { useInfiniteQuery } from '@tanstack/solid-query'3 4function Projects() {5 // `projectsQuery.data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the6 // list stays visible alongside the error.7 const projectsQuery = useInfiniteQuery(() => ({8 queryKey: ['projects'],9 queryFn: ({ pageParam }) => fetchProjects(pageParam),10 initialPageParam: 0,11 getNextPageParam: (lastPage) => lastPage.nextId,12 initialData: { pages: [], pageParams: [] },13 }))14 15 return (16 <div>17 {projectsQuery.isError ? <span>Error: {projectsQuery.error.message}</span> : null}18 <ul>19 <For each={projectsQuery.data.pages}>20 {(page) => <For each={page.projects}>{(p) => <li>{p.name}</li>}</For>}21 </For>22 </ul>23 </div>24 )25}调用签名
1<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: Accessor<QueryClient>): UseInfiniteQueryResult<TData, TError>;useInfiniteQuery 的选项与 useQuery 完全相同，额外增加了 initialPageParam、getNextPageParam、getPreviousPageParam 和 maxPages。
类型参数
TQueryFnData
TQueryFnData
TError
TError = Error
TData
TData = InfiniteData<TQueryFnData, unknown>
TQueryKey
TQueryKey extends readonly unknown[] = readonly unknown[]
TPageParam
TPageParam = unknown
参数
options
UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>
一个返回所用 UndefinedInitialDataInfiniteOptions 的访问器 —— 即所有可传给 useInfiniteQuery 的选项。
queryClient?
Accessor<QueryClient>
一个自定义 QueryClient 的访问器。否则，将使用最近上下文中的 QueryClient。
返回值
UseInfiniteQueryResult<TData, TError>
与 useQuery 相同的属性，并额外增加了 fetchNextPage、fetchPreviousPage、hasNextPage、hasPreviousPage、isFetchingNextPage 和 isFetchingPreviousPage。只要 select 未将 TData 修改为偏离其默认 InfiniteData<TQueryFnData> 形状，也会添加 data.pages 和 data.pageParams。
备注
请注意，命令式拉取调用（例如 fetchNextPage）可能会干扰默认的重新拉取行为，导致数据过期。请确保仅在响应用户操作时调用这些函数，或添加类似 hasNextPage && !isFetching 的条件。
参见
infiniteQueryOptions 可用于在 useInfiniteQuery 与 queryClient.infiniteQuery 等命令式 API 之间共享这些选项。
示例
通过“加载更多”按钮点击获取下一页：
1import { For, Match, Switch } from 'solid-js'2import { useInfiniteQuery } from '@tanstack/solid-query'3 4function Projects() {5 const projectsQuery = useInfiniteQuery(() => ({6 queryKey: ['projects'],7 queryFn: ({ pageParam }) => fetchProjects(pageParam),8 initialPageParam: 0,9 getNextPageParam: (lastPage) => lastPage.nextId,10 }))11 12 return (13 <Switch>14 <Match when={projectsQuery.isPending}>Loading...</Match>15 <Match when={projectsQuery.isError}>Error: {projectsQuery.error.message}</Match>16 <Match when={projectsQuery.isSuccess}>17 <ul>18 <For each={projectsQuery.data.pages}>19 {(page) => <For each={page.projects}>{(p) => <li>{p.name}</li>}</For>}20 </For>21 </ul>22 <button23 onClick={() => projectsQuery.fetchNextPage()}24 disabled={!projectsQuery.hasNextPage || projectsQuery.isFetching}25 >26 {projectsQuery.isFetchingNextPage27 ? 'Loading more...'28 : projectsQuery.hasNextPage29 ? 'Load More'30 : 'Nothing more to load'}31 </button>32 </Match>33 </Switch>34 )35}使用 IntersectionObserver 在列表末尾的哨兵元素上，随用户滚动自动获取下一页：
1import { For, Match, Switch, createEffect, onCleanup } from 'solid-js'2import { useInfiniteQuery } from '@tanstack/solid-query'3 4function Projects() {5 const projectsQuery = useInfiniteQuery(() => ({6 queryKey: ['projects'],7 queryFn: ({ pageParam }) => fetchProjects(pageParam),8 initialPageParam: 0,9 getNextPageParam: (lastPage) => lastPage.nextId,10 }))11 12 let sentinelRef: HTMLDivElement | undefined13 14 createEffect(() => {15 if (sentinelRef == null || !projectsQuery.hasNextPage || projectsQuery.isFetching) return16 17 const observer = new IntersectionObserver(([entry]) => {18 if (entry?.isIntersecting) projectsQuery.fetchNextPage()19 })20 observer.observe(sentinelRef)21 22 onCleanup(() => observer.disconnect())23 })24 25 return (26 <Switch>27 <Match when={projectsQuery.isPending}>Loading...</Match>28 <Match when={projectsQuery.isError}>Error: {projectsQuery.error.message}</Match>29 <Match when={projectsQuery.isSuccess}>30 <ul>31 <For each={projectsQuery.data.pages}>32 {(page) => <For each={page.projects}>{(p) => <li>{p.name}</li>}</For>}33 </For>34 </ul>35 <div ref={sentinelRef}>{projectsQuery.isFetchingNextPage ? 'Loading more...' : null}</div>36 </Match>37 </Switch>38 )39}