fix(svelte-query): Make combine work for createQueries

packages/svelte-query/src/__tests__/CreateQueries.svelte

@@ -1,21 +1,27 @@
 <script lang="ts">
-  import { QueryClient } from '@tanstack/query-core'
-  import { setQueryClientContext } from '../context'
   import { createQueries } from '../createQueries'
-  import type { QueriesOptions } from '../createQueries'
+  import type { QueryClient } from '@tanstack/query-core'
+  import type { QueriesOptions, QueriesResults } from '../createQueries'
 
-  export let options: { queries: [...QueriesOptions<any>] }
+  export let options: {
+    queries: [...QueriesOptions<any>]
+    combine?: (result: QueriesResults<Array<any>>) => any
+  }
+  export let queryClient: QueryClient
 
-  const queryClient = new QueryClient()
-  setQueryClientContext(queryClient)
-
-  const queries = createQueries(options)
+  const queries = createQueries(options, queryClient)
 </script>
 
-{#each $queries as query, index}
-  {#if query.isPending}
-    <p>Loading {index + 1}</p>
-  {:else if query.isSuccess}
-    <p>{query.data}</p>
-  {/if}
-{/each}
+{#if Array.isArray($queries)}
+  {#each $queries as query, index}
+    {#if query.isPending}
+      <p>Loading {index + 1}</p>
+    {:else if query.isSuccess}
+      <p>{query.data}</p>
+    {/if}
+  {/each}
+{:else if $queries.isPending}
+  <p>Loading</p>
+{:else if $queries.isSuccess}
+  <p>{$queries.data}</p>
+{/if}

packages/svelte-query/src/__tests__/createQueries.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { render, waitFor } from '@testing-library/svelte'
+import { QueryClient } from '@tanstack/query-core'
 import CreateQueries from './CreateQueries.svelte'
 import { sleep } from './utils'
 
@@ -25,6 +26,7 @@ describe('createQueries', () => {
             },
           ],
         },
+        queryClient: new QueryClient(),
       },
     })
 
@@ -38,4 +40,38 @@ describe('createQueries', () => {
       expect(rendered.getByText('Success 2')).toBeInTheDocument()
     })
   })
+
+  it('should combine queries', async () => {
+    const ids = [1, 2, 3]
+
+    const rendered = render(CreateQueries, {
+      props: {
+        options: {
+          queries: ids.map((id) => ({
+            queryKey: [id],
+            queryFn: async () => {
+              await sleep(10)
+              return id
+            },
+          })),
+          combine: (results) => {
+            return {
+              isPending: results.some((result) => result.isPending),
+              isSuccess: results.every((result) => result.isSuccess),
+              data: results.map((res) => res.data).join(','),
+            }
+          },
+        },
+        queryClient: new QueryClient(),
+      },
+    })
+
+    await waitFor(() => {
+      expect(rendered.getByText('Loading')).toBeInTheDocument()
+    })
+
+    await waitFor(() => {
+      expect(rendered.getByText('1,2,3')).toBeInTheDocument()
+    })
+  })
 })

packages/svelte-query/src/createQueries.ts

@@ -229,40 +229,24 @@ export function createQueries<
     )
   })
 
-  const [, getCombinedResult, trackResult] = observer.getOptimisticResult(
-    get(defaultedQueriesStore),
-  )
+  const result = derived([isRestoring], ([$isRestoring], set) => {
+    const unsubscribe = $isRestoring
+      ? () => undefined
+      : observer.subscribe(notifyManager.batchCalls(set))
 
-  const result = derived<
-    typeof isRestoring,
-    | Parameters<Parameters<typeof observer.subscribe>[0]>[0]
-    | ReturnType<typeof getCombinedResult>
-  >(
-    isRestoring,
-    ($isRestoring, set) => {
-      const unsubscribe = $isRestoring
-        ? () => undefined
-        : observer.subscribe(notifyManager.batchCalls(set))
-
-      return () => unsubscribe()
-    },
-    getCombinedResult(trackResult()),
-  )
+    return () => unsubscribe()
+  })
 
   const { subscribe } = derived(
     [result, defaultedQueriesStore],
-    ([$result, $defaultedQueries]) => {
-      $result = observer.getOptimisticResult($defaultedQueries)[0]
-      const observers = observer.getObservers()
-      return $defaultedQueries.map((query, index) =>
-        query.notifyOnChangeProps
-          ? // @ts-expect-error TCombinedResult should be an array
-            $result[index]
-          : // @ts-expect-error TCombinedResult should be an array
-            observers[index]!.trackResult($result[index]),
-      )
+    // @ts-ignore svelte-check thinks this is unused
+    ([$result, $defaultedQueriesStore]) => {
+      const [rawResult, combineResult, trackResult] =
+        observer.getOptimisticResult($defaultedQueriesStore)
+      $result = rawResult
+      return combineResult(trackResult())
     },
   )
-  // @ts-expect-error TCombinedResult should be an array
+
   return { subscribe }
 }