= []
+
+ function Fallback() {
+ results.push('loading')
+ return loading
+ }
+
+ function Page() {
+ const queries = useQueries(() => ({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () =>
+ sleep(10).then(() => {
+ results.push('1')
+ return '1'
+ }),
+ },
+ {
+ queryKey: key2,
+ queryFn: () =>
+ sleep(20).then(() => {
+ results.push('2')
+ return '2'
+ }),
+ },
+ ],
+ }))
+
+ return (
+
+ data: {String(queries[0].data)},{String(queries[1].data)}
+
+ )
+ }
+
+ const rendered = render(() => (
+
+ }>
+
+
+
+ ))
+
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(20)
+ expect(rendered.getByText('data: 1,2')).toBeInTheDocument()
+
+ // Both queries should have resolved before the component rendered
+ // The order should be: loading -> query 1 resolves -> query 2 resolves
+ expect(results).toEqual(['loading', '1', '2'])
+ })
+
+ it('should throw error when queryKey changes and new query fails', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+ const key = queryKey()
+
+ function Page() {
+ const [fail, setFail] = createSignal(false)
+ const queries = useQueries(() => ({
+ queries: [
+ {
+ queryKey: [key, fail()],
+ queryFn: () =>
+ sleep(10).then(() => {
+ if (fail()) throw new Error('Suspense Error Bingo')
+ return 'data'
+ }),
+ retry: false,
+ throwOnError: true,
+ },
+ ],
+ }))
+
+ return (
+
+
+ data: {String(queries[0].data)}
+
+ )
+ }
+
+ const rendered = render(() => (
+
+ error boundary
}>
+
+
+
+
+
+ ))
+
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('data: data')).toBeInTheDocument()
+
+ fireEvent.click(rendered.getByText('trigger fail'))
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+
+ consoleMock.mockRestore()
+ })
+
+ it('should show error boundary even with gcTime:0', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+ const key = queryKey()
+ let count = 0
+
+ function Page() {
+ const queries = useQueries(() => ({
+ queries: [
+ {
+ queryKey: key,
+ queryFn: () =>
+ sleep(10).then(() => {
+ count++
+ throw new Error('Query failed')
+ }),
+ gcTime: 0,
+ retry: false,
+ throwOnError: true,
+ },
+ ],
+ }))
+
+ return data: {String(queries[0].data)}
+ }
+
+ const rendered = render(() => (
+
+
+ There was an error!
}>
+
+
+
+
+ ))
+
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('There was an error!')).toBeInTheDocument()
+
+ expect(count).toBe(1)
+
+ consoleMock.mockRestore()
+ })
+
+ it('should gc when unmounted while fetching with low gcTime', async () => {
+ const key = queryKey()
+
+ function Component() {
+ const queries = useQueries(() => ({
+ queries: [
+ {
+ queryKey: key,
+ queryFn: () => sleep(3000).then(() => 'data'),
+ gcTime: 1000,
+ },
+ ],
+ }))
+
+ return data: {String(queries[0].data)}
+ }
+
+ function App() {
+ const [show, setShow] = createSignal(true)
+
+ return (
+
+ page2
}>
+
+
+
+
+
+
+ )
+ }
+
+ const rendered = render(() => (
+
+
+
+ ))
+
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+
+ fireEvent.click(rendered.getByText('hide'))
+ expect(rendered.getByText('page2')).toBeInTheDocument()
+ // wait for query to be resolved
+ await vi.advanceTimersByTimeAsync(3000)
+ expect(queryClient.getQueryData(key)).toBe('data')
+ // wait for gc
+ await vi.advanceTimersByTimeAsync(1000)
+ expect(queryClient.getQueryData(key)).toBe(undefined)
+ })
+
+ it('should suspend on offline when query changes, and data should not be undefined', async () => {
+ const key = queryKey()
+
+ function Page() {
+ const [id, setId] = createSignal(0)
+
+ const queries = useQueries(() => ({
+ queries: [
+ {
+ queryKey: [...key, id()],
+ queryFn: () => sleep(10).then(() => `Data ${id()}`),
+ },
+ ],
+ }))
+
+ return (
+
+
{String(queries[0].data)}
+
+
+
+
data: {String(queries[0].data)}
+
+ q1: {String(queries[0].data)}, q2: {String(queries[1].data)}, q3:{' '}
+ {String(queries[2].data)}
+
+ )
+ }
+
+ const rendered = render(() => (
+
+
+
+
+
+ ))
+
+ // key2 and key3 are pending, so should suspend
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ // key1 had cached data, key2 resolved at 10ms, key3 still pending
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ // All resolved — key1 refetched in background so shows fresh data
+ expect(
+ rendered.getByText('q1: fresh1, q2: data2, q3: data3'),
+ ).toBeInTheDocument()
+ })
+
+ it('should suspend when queries count increases dynamically', async () => {
+ const key = queryKey()
+
+ function Page() {
+ const [count, setCount] = createSignal(2)
+
+ const queries = useQueries(() => ({
+ queries: Array.from({ length: count() }, (_, i) => ({
+ queryKey: [...key, i],
+ queryFn: () => sleep(10).then(() => `data${i}`),
+ })),
+ }))
+
+ return (
+
+
+ data: {queries.map((q) => String(q.data)).join(',')}
+
+ )
+ }
+
+ const rendered = render(() => (
+
+
+
+
+
+ ))
+
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('data: data0,data1')).toBeInTheDocument()
+
+ fireEvent.click(rendered.getByText('add'))
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('data: data0,data1,data2')).toBeInTheDocument()
+ })
+
+ it('should suspend with select option', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+
+ function Page() {
+ const queries = useQueries(() => ({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => sleep(10).then(() => ({ value: 42 })),
+ select: (data: { value: number }) => data.value * 2,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => sleep(10).then(() => 'raw'),
+ },
+ ],
+ }))
+
+ return (
+
+ q1: {String(queries[0].data)}, q2: {String(queries[1].data)}
+
+ )
+ }
+
+ const rendered = render(() => (
+
+
+
+
+
+ ))
+
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('q1: 84, q2: raw')).toBeInTheDocument()
+ })
+
+ it('should not suspend disabled queries while enabled queries suspend', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+
+ function Page() {
+ const queries = useQueries(() => ({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => sleep(10).then(() => 'enabled-data'),
+ },
+ {
+ queryKey: key2,
+ queryFn: () => sleep(10).then(() => 'disabled-data'),
+ enabled: false,
+ },
+ ],
+ }))
+
+ return (
+
+ q1: {String(queries[0].data)}, q2: {String(queries[1].data)}
+
+ )
+ }
+
+ const rendered = render(() => (
+
+
+
+
+
+ ))
+
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(
+ rendered.getByText('q1: enabled-data, q2: undefined'),
+ ).toBeInTheDocument()
+ })
+
+ it('should not re-suspend when invalidating queries with existing data', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+
+ function Page() {
+ const queries = useQueries(() => ({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => sleep(10).then(() => 'data1'),
+ },
+ {
+ queryKey: key2,
+ queryFn: () => sleep(10).then(() => 'data2'),
+ },
+ ],
+ }))
+
+ return (
+
+
+ q1: {String(queries[0].data)}, q2: {String(queries[1].data)}
+
+ )
+ }
+
+ const rendered = render(() => (
+
+
+
+
+
+ ))
+
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('q1: data1, q2: data2')).toBeInTheDocument()
+
+ // Invalidate should refetch in background, not re-suspend
+ fireEvent.click(rendered.getByText('invalidate'))
+ expect(rendered.getByText('q1: data1, q2: data2')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('q1: data1, q2: data2')).toBeInTheDocument()
+ })
+
+ it('should not suspend when all queries have staleTime: Infinity and cached data', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+
+ queryClient.setQueryData(key1, 'cached1')
+ queryClient.setQueryData(key2, 'cached2')
+
+ function Page() {
+ const queries = useQueries(() => ({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => sleep(10).then(() => 'fresh1'),
+ staleTime: Infinity,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => sleep(10).then(() => 'fresh2'),
+ staleTime: Infinity,
+ },
+ ],
+ }))
+
+ return (
+
+ q1: {String(queries[0].data)}, q2: {String(queries[1].data)}
+
+ )
+ }
+
+ const rendered = render(() => (
+
+
+
+
+
+ ))
+
+ // Should not suspend because data is cached and not stale
+ expect(rendered.queryByText('loading')).not.toBeInTheDocument()
+ expect(rendered.getByText('q1: cached1, q2: cached2')).toBeInTheDocument()
+ })
+})
diff --git a/packages/solid-query/src/useQueries.ts b/packages/solid-query/src/useQueries.ts
index 1e5592775db..d4c859e03ac 100644
--- a/packages/solid-query/src/useQueries.ts
+++ b/packages/solid-query/src/useQueries.ts
@@ -1,4 +1,4 @@
-import { QueriesObserver, noop } from '@tanstack/query-core'
+import { QueriesObserver, noop, shouldThrowError } from '@tanstack/query-core'
import { createStore, unwrap } from 'solid-js/store'
import {
batch,
@@ -232,56 +232,133 @@ export function useQueries<
createRenderEffect(
on(
() => queriesOptions().queries.length,
- () =>
- setState(
- observer.getOptimisticResult(
- defaultedQueries(),
- (queriesOptions() as QueriesObserverOptions)
- .combine,
- )[1](),
- ),
+ () => {
+ const optimisticResult = observer.getOptimisticResult(
+ defaultedQueries(),
+ (queriesOptions() as QueriesObserverOptions).combine,
+ )
+ // When queries are paused (e.g. offline), skip state update to
+ // keep showing previous data instead of showing undefined.
+ const hasPaused = optimisticResult[0].some(
+ (r) => r.fetchStatus === 'paused',
+ )
+ if (!hasPaused) {
+ setState(optimisticResult[1]())
+ }
+ },
),
)
- const dataResources = createMemo(
- on(
- () => state.length,
- () =>
- state.map((queryRes) => {
- const dataPromise = () =>
- new Promise((resolve) => {
- if (queryRes.isFetching && queryRes.isLoading) return
- resolve(unwrap(queryRes.data))
- })
- return createResource(dataPromise)
- }),
- ),
- )
+ let observerResults = observer.getOptimisticResult(
+ defaultedQueries(),
+ (queriesOptions() as QueriesObserverOptions).combine,
+ )[0]
- batch(() => {
- const dataResources_ = dataResources()
- for (let index = 0; index < dataResources_.length; index++) {
- const dataResource = dataResources_[index]!
- dataResource[1].mutate(() => unwrap(state[index]!.data))
- dataResource[1].refetch()
- }
- })
+ // Single resolver for the unified suspense resource.
+ // Modeled after useBaseQuery: one resource, re-triggered via refetch().
+ let resolver: {
+ resolve: (value: any) => void
+ reject: (reason: any) => void
+ } | null = null
+
+ const needsSuspend = () =>
+ observerResults.some((r) => r.isFetching && r.isLoading)
+
+ // Single resource created once. Re-triggered via refetch() on query changes.
+ // Follows the same pattern as useBaseQuery's createResource.
+ const [queryResource, { refetch }] = createResource<
+ Array | undefined
+ >(
+ () => {
+ return new Promise((resolve, reject) => {
+ if (needsSuspend()) {
+ resolver = { resolve, reject }
+ return
+ }
+ // Check if any query has a throwable error
+ for (let i = 0; i < observerResults.length; i++) {
+ const result = observerResults[i]!
+ if (
+ result.isError &&
+ !result.isFetching &&
+ shouldThrowError(defaultedQueries()[i]?.throwOnError, [
+ result.error,
+ observer.getQueries()[i]!,
+ ])
+ ) {
+ resolver = null
+ reject(result.error)
+ return
+ }
+ }
+ resolver = null
+ resolve(observerResults)
+ })
+ },
+ needsSuspend() ? {} : { initialValue: observerResults },
+ )
let taskQueue: Array<() => void> = []
const subscribeToObserver = () =>
observer.subscribe((result) => {
+ const allFinished = result.every((r) => !(r.isFetching && r.isLoading))
+
+ if (allFinished) {
+ observerResults = [...result]
+ }
+
taskQueue.push(() => {
- batch(() => {
- const dataResources_ = dataResources()
- for (let index = 0; index < dataResources_.length; index++) {
- const dataResource = dataResources_[index]!
- const unwrappedResult = { ...unwrap(result[index]) }
- // @ts-expect-error typescript pedantry regarding the possible range of index
- setState(index, unwrap(unwrappedResult))
- dataResource[1].mutate(() => unwrap(state[index]!.data))
- dataResource[1].refetch()
+ if (allFinished) {
+ // When queries are paused (e.g. offline), skip state update to
+ // keep showing previous data instead of showing undefined.
+ const hasPaused = result.some((r) => r.fetchStatus === 'paused')
+ if (!hasPaused) {
+ // Update with combine-aware result when all queries are done
+ const optimisticResult = observer.getOptimisticResult(
+ defaultedQueries(),
+ (queriesOptions() as QueriesObserverOptions)
+ .combine,
+ )
+ setState(optimisticResult[1]())
}
- })
+ } else {
+ // Intermediate update for non-Suspense usage
+ batch(() => {
+ for (let index = 0; index < result.length; index++) {
+ const queryResult = result[index]!
+ const unwrappedResult = { ...unwrap(queryResult) }
+ // @ts-expect-error typescript pedantry regarding the possible range of index
+ setState(index, unwrap(unwrappedResult))
+ }
+ })
+ return
+ }
+
+ // Resolve or reject the single suspense resource
+ if (resolver) {
+ // Check for throwable errors first
+ for (let i = 0; i < result.length; i++) {
+ const queryResult = result[i]!
+ if (
+ queryResult.isError &&
+ shouldThrowError(defaultedQueries()[i]?.throwOnError, [
+ queryResult.error,
+ observer.getQueries()[i]!,
+ ])
+ ) {
+ resolver.reject(queryResult.error)
+ resolver = null
+ return
+ }
+ }
+ resolver.resolve(observerResults)
+ resolver = null
+ } else {
+ // No resolver means resource was already resolved (e.g. cached data).
+ // Schedule refetch to update the resource value, following
+ // the same pattern as useBaseQuery's subscriber.
+ queueMicrotask(() => refetch())
+ }
})
queueMicrotask(() => {
@@ -298,7 +375,14 @@ export function useQueries<
// cleanup needs to be scheduled after synchronous effects take place
return () => queueMicrotask(unsubscribe)
})
- onCleanup(unsubscribe)
+ onCleanup(() => {
+ unsubscribe()
+ // Resolve pending resource on unmount to prevent Suspense hanging
+ if (resolver) {
+ resolver.resolve(observerResults)
+ resolver = null
+ }
+ })
onMount(() => {
observer.setQueries(
@@ -311,33 +395,72 @@ export function useQueries<
)
})
- createComputed(() => {
- observer.setQueries(
- defaultedQueries(),
- queriesOptions().combine
- ? ({
- combine: queriesOptions().combine,
- } as QueriesObserverOptions)
- : undefined,
- )
- })
+ createComputed(
+ on(
+ defaultedQueries,
+ () => {
+ observer.setQueries(
+ defaultedQueries(),
+ queriesOptions().combine
+ ? ({
+ combine: queriesOptions().combine,
+ } as QueriesObserverOptions)
+ : undefined,
+ )
+
+ const optimisticResult = observer.getOptimisticResult(
+ defaultedQueries(),
+ (queriesOptions() as QueriesObserverOptions).combine,
+ )
+ observerResults = optimisticResult[0]
+
+ // When queries are paused (e.g. offline), skip state update to
+ // keep showing previous data instead of showing undefined.
+ const hasPaused = observerResults.some(
+ (r) => r.fetchStatus === 'paused',
+ )
+ if (!hasPaused) {
+ setState(optimisticResult[1]())
+ }
+
+ // Only refetch (re-trigger Suspense) if queries actually need to suspend.
+ // This prevents unnecessary Suspense fallback when offline or when
+ // queries don't need fetching.
+ if (needsSuspend()) {
+ refetch()
+ }
+ },
+ { defer: true },
+ ),
+ )
const handler = (index: number) => ({
get(target: QueryObserverResult, prop: keyof QueryObserverResult): any {
if (prop === 'data') {
- return dataResources()[index]![0]()
+ // If data exists in state, return it directly (no Suspense trigger)
+ if (target.data !== undefined) {
+ return target.data
+ }
+ // When query is paused (e.g. offline), don't suspend - return undefined
+ // to keep showing previous content without triggering Suspense fallback
+ if (observerResults[index]?.fetchStatus === 'paused') {
+ return undefined
+ }
+ // Reading queryResource() triggers Suspense when pending
+ queryResource()
+ return undefined
}
return Reflect.get(target, prop)
},
})
- const getProxies = () =>
- state.map((s, index) => {
- return new Proxy(s, handler(index))
- })
-
- const [proxyState, setProxyState] = createStore(getProxies())
- createRenderEffect(() => setProxyState(getProxies()))
-
- return proxyState as TCombinedResult
+ return new Proxy(state, {
+ get(target, prop, receiver) {
+ const index = typeof prop === 'string' ? Number(prop) : NaN
+ if (!Number.isNaN(index) && index >= 0 && index < target.length) {
+ return new Proxy(target[index]!, handler(index))
+ }
+ return Reflect.get(target, prop, receiver)
+ },
+ })
}