fix(queriesObserver): always use latest combine function (TanStack#6651)

* fix(queriesObserver): always use latest combine function

computing the optimistic result didn't use the latest combine function, but the one set from setOptions (which runs in an effect, but is too late)

* fix: don't forget about svelte

Author: TkDodo

packages/angular-query-experimental/src/inject-queries.ts

@@ -236,8 +236,10 @@ export function injectQueries<
       )
     })
 
-    const [, getCombinedResult] =
-      observer.getOptimisticResult(defaultedQueries())
+    const [, getCombinedResult] = observer.getOptimisticResult(
+      defaultedQueries(),
+      (options as QueriesObserverOptions<TCombinedResult>).combine,
+    )
 
     const result = signal(getCombinedResult() as any)
 

packages/query-core/src/queriesObserver.ts

@@ -22,10 +22,14 @@ function replaceAt<T>(array: Array<T>, index: number, value: T): Array<T> {
 
 type QueriesObserverListener = (result: Array<QueryObserverResult>) => void
 
+type CombineFn<TCombinedResult> = (
+  result: Array<QueryObserverResult>,
+) => TCombinedResult
+
 export interface QueriesObserverOptions<
   TCombinedResult = Array<QueryObserverResult>,
 > {
-  combine?: (result: Array<QueryObserverResult>) => TCombinedResult
+  combine?: CombineFn<TCombinedResult>
 }
 
 export class QueriesObserver<
@@ -55,7 +59,7 @@ export class QueriesObserver<
 
   #setResult(value: Array<QueryObserverResult>) {
     this.#result = value
-    this.#combinedResult = this.#combineResult(value)
+    this.#combinedResult = this.#combineResult(value, this.#options?.combine)
   }
 
   protected onSubscribe(): void {
@@ -151,6 +155,7 @@ export class QueriesObserver<
 
   getOptimisticResult(
     queries: Array<QueryObserverOptions>,
+    combine: CombineFn<TCombinedResult> | undefined,
   ): [
     rawResult: Array<QueryObserverResult>,
     combineResult: (r?: Array<QueryObserverResult>) => TCombinedResult,
@@ -164,7 +169,7 @@ export class QueriesObserver<
     return [
       result,
       (r?: Array<QueryObserverResult>) => {
-        return this.#combineResult(r ?? result)
+        return this.#combineResult(r ?? result, combine)
       },
       () => {
         return matches.map((match, index) => {
@@ -177,8 +182,10 @@ export class QueriesObserver<
     ]
   }
 
-  #combineResult(input: Array<QueryObserverResult>): TCombinedResult {
-    const combine = this.#options?.combine
+  #combineResult(
+    input: Array<QueryObserverResult>,
+    combine: CombineFn<TCombinedResult> | undefined,
+  ): TCombinedResult {
     if (combine) {
       return replaceEqualDeep(this.#combinedResult, combine(input))
     }

packages/react-query/src/__tests__/useQueries.test.tsx

@@ -1167,4 +1167,46 @@ describe('useQueries', () => {
     // no further re-render because data didn't change
     expect(results.length).toBe(length)
   })
+
+  it('should not have stale closures with combine (#6648)', async () => {
+    const key = queryKey()
+
+    function Page() {
+      const [count, setCount] = React.useState(0)
+      const queries = useQueries(
+        {
+          queries: [
+            {
+              queryKey: key,
+              queryFn: () => Promise.resolve('result'),
+            },
+          ],
+          combine: (results) => {
+            return {
+              count,
+              res: results.map((res) => res.data).join(','),
+            }
+          },
+        },
+        queryClient,
+      )
+
+      return (
+        <div>
+          <div>
+            data: {String(queries.count)} {queries.res}
+          </div>
+          <button onClick={() => setCount((c) => c + 1)}>inc</button>
+        </div>
+      )
+    }
+
+    const rendered = render(<Page />)
+
+    await waitFor(() => rendered.getByText('data: 0 result'))
+
+    fireEvent.click(rendered.getByRole('button', { name: /inc/i }))
+
+    await waitFor(() => rendered.getByText('data: 1 result'))
+  })
 })

packages/react-query/src/useQueries.ts

@@ -282,7 +282,10 @@ export function useQueries<
   )
 
   const [optimisticResult, getCombinedResult, trackResult] =
-    observer.getOptimisticResult(defaultedQueries)
+    observer.getOptimisticResult(
+      defaultedQueries,
+      (options as QueriesObserverOptions<TCombinedResult>).combine,
+    )
 
   React.useSyncExternalStore(
     React.useCallback(

packages/solid-query/src/createQueries.ts

@@ -239,13 +239,23 @@ export function createQueries<
   )
 
   const [state, setState] = createStore<TCombinedResult>(
-    observer.getOptimisticResult(defaultedQueries())[1](),
+    observer.getOptimisticResult(
+      defaultedQueries(),
+      (queriesOptions() as QueriesObserverOptions<TCombinedResult>).combine,
+    )[1](),
   )
 
   createRenderEffect(
     on(
       () => queriesOptions().queries.length,
-      () => setState(observer.getOptimisticResult(defaultedQueries())[1]()),
+      () =>
+        setState(
+          observer.getOptimisticResult(
+            defaultedQueries(),
+            (queriesOptions() as QueriesObserverOptions<TCombinedResult>)
+              .combine,
+          )[1](),
+        ),
     ),
   )
 

packages/svelte-query/src/createQueries.ts

@@ -256,7 +256,10 @@ export function createQueries<
     // @ts-ignore svelte-check thinks this is unused
     ([$result, $defaultedQueriesStore]) => {
       const [rawResult, combineResult, trackResult] =
-        observer.getOptimisticResult($defaultedQueriesStore)
+        observer.getOptimisticResult(
+          $defaultedQueriesStore,
+          (options as QueriesObserverOptions<TCombinedResult>).combine,
+        )
       $result = rawResult
       return combineResult(trackResult())
     },

packages/vue-query/src/useQueries.ts

@@ -292,6 +292,7 @@ export function useQueries<
   )
   const [, getCombinedResult] = observer.getOptimisticResult(
     defaultedQueries.value,
+    (options as QueriesObserverOptions<TCombinedResult>).combine,
   )
   const state = ref(getCombinedResult()) as Ref<TCombinedResult>
 
@@ -307,12 +308,14 @@ export function useQueries<
         unsubscribe = observer.subscribe(() => {
           const [, getCombinedResultRestoring] = observer.getOptimisticResult(
             defaultedQueries.value,
+            (options as QueriesObserverOptions<TCombinedResult>).combine,
           )
           state.value = getCombinedResultRestoring()
         })
         // Subscription would not fire for persisted results
         const [, getCombinedResultPersisted] = observer.getOptimisticResult(
           defaultedQueries.value,
+          (options as QueriesObserverOptions<TCombinedResult>).combine,
         )
         state.value = getCombinedResultPersisted()
       }
@@ -329,6 +332,7 @@ export function useQueries<
       )
       const [, getCombinedResultPersisted] = observer.getOptimisticResult(
         defaultedQueries.value,
+        (options as QueriesObserverOptions<TCombinedResult>).combine,
       )
       state.value = getCombinedResultPersisted()
     },