diff --git a/packages/query-core/src/queriesObserver.ts b/packages/query-core/src/queriesObserver.ts index ea0ca7b02a..600317ec29 100644 --- a/packages/query-core/src/queriesObserver.ts +++ b/packages/query-core/src/queriesObserver.ts @@ -175,21 +175,30 @@ export class QueriesObserver< return this.#combineResult(r ?? result, combine) }, () => { - return matches.map((match, index) => { - const observerResult = result[index]! - return !match.defaultedQueryOptions.notifyOnChangeProps - ? match.observer.trackResult(observerResult, (accessedProp) => { - // track property on all observers to ensure proper (synchronized) tracking (#7000) - matches.forEach((m) => { - m.observer.trackProp(accessedProp) - }) - }) - : observerResult - }) + return this.#trackResult(result, queries) }, ] } + #trackResult( + result: Array, + queries: Array, + ) { + const matches = this.#findMatchingObservers(queries) + + return matches.map((match, index) => { + const observerResult = result[index]! + return !match.defaultedQueryOptions.notifyOnChangeProps + ? match.observer.trackResult(observerResult, (accessedProp) => { + // track property on all observers to ensure proper (synchronized) tracking (#7000) + matches.forEach((m) => { + m.observer.trackProp(accessedProp) + }) + }) + : observerResult + }) + } + #combineResult( input: Array, combine: CombineFn | undefined, @@ -267,7 +276,7 @@ export class QueriesObserver< if (this.hasListeners()) { const previousResult = this.#combinedResult const newResult = this.#combineResult( - this.#result, + this.#trackResult(this.#result, this.#queries), this.#options?.combine, ) diff --git a/packages/react-query/src/__tests__/useQueries.test.tsx b/packages/react-query/src/__tests__/useQueries.test.tsx index 788864e8c6..95a358d37b 100644 --- a/packages/react-query/src/__tests__/useQueries.test.tsx +++ b/packages/react-query/src/__tests__/useQueries.test.tsx @@ -1548,4 +1548,77 @@ describe('useQueries', () => { // one with pending, one with foo expect(renders).toBe(2) }) + + it('should track properties correctly with combine', async () => { + const key1 = queryKey() + const key2 = queryKey() + const key3 = queryKey() + + const client = new QueryClient() + + function Page() { + const data = useQueries( + { + queries: [ + { + queryKey: [key1], + queryFn: async () => { + await sleep(10) + return 'first result' + }, + }, + { + queryKey: [key2], + queryFn: async () => { + await sleep(15) + return 'second result' + }, + }, + { + queryKey: [key3], + queryFn: async () => { + await sleep(20) + return 'third result' + }, + }, + ], + combine: (results) => { + if (results.find((r) => r.isPending)) { + return 'pending' + } + return results.map((r) => r.data).join(', ') + }, + }, + client, + ) + + return ( +
+
data: {data}
+ +
+ ) + } + + const rendered = render() + + await waitFor(() => rendered.getByText('data: pending')) + await waitFor(() => + rendered.getByText('data: first result, second result, third result'), + ) + + fireEvent.click(rendered.getByRole('button', { name: /update/i })) + + await waitFor(() => + rendered.getByText( + 'data: first result updated, second result, third result', + ), + ) + }) }) diff --git a/packages/react-query/src/__tests__/useSuspenseQueries.test.tsx b/packages/react-query/src/__tests__/useSuspenseQueries.test.tsx index c97f01f12e..85f4e970e4 100644 --- a/packages/react-query/src/__tests__/useSuspenseQueries.test.tsx +++ b/packages/react-query/src/__tests__/useSuspenseQueries.test.tsx @@ -556,7 +556,6 @@ describe('useSuspenseQueries 2', () => { queryKey: key, queryFn: async () => { count++ - console.log('queryFn') throw new Error('Query failed') }, gcTime: 0,