@tanstack/solid-query 5.91.1 → 6.0.0-alpha.0

package/src/useQueries.ts

@@ -1,15 +1,11 @@
 import { QueriesObserver, noop } from '@tanstack/query-core'
-import { createStore, unwrap } from 'solid-js/store'
 import {
-  batch,
-  createComputed,
+  createEffect,
   createMemo,
-  createRenderEffect,
-  createResource,
-  mergeProps,
-  on,
+  createStore,
+  merge,
   onCleanup,
-  onMount,
+  reconcile,
 } from 'solid-js'
 import { useQueryClient } from './QueryClientProvider'
 import { useIsRestoring } from './isRestoring'
@@ -122,7 +118,7 @@ type GetResults<T> =
                   UseQueryResult
 
 /**
- * QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
+ * QueriesOptions reducer recursively snapshots function arguments to infer/enforce type param
  */
 type QueriesOptions<
   T extends Array<any>,
@@ -201,18 +197,15 @@ export function useQueries<
 
   const defaultedQueries = createMemo(() =>
     queriesOptions().queries.map((options) =>
-      mergeProps(
-        client().defaultQueryOptions(options as QueryObserverOptions),
-        {
-          get _optimisticResults() {
-            return isRestoring() ? 'isRestoring' : 'optimistic'
-          },
+      merge(client().defaultQueryOptions(options as QueryObserverOptions), {
+        get _optimisticResults() {
+          return isRestoring() ? 'isRestoring' : 'optimistic'
         },
-      ),
+      }),
     ),
   )
 
-  const observer = new QueriesObserver(
+  const observer = new QueriesObserver<TCombinedResult>(
     client(),
     defaultedQueries(),
     queriesOptions().combine
@@ -222,122 +215,63 @@ export function useQueries<
       : undefined,
   )
 
-  const [state, setState] = createStore<TCombinedResult>(
-    observer.getOptimisticResult(
-      defaultedQueries(),
-      (queriesOptions() as QueriesObserverOptions<TCombinedResult>).combine,
-    )[1](),
+  // Get initial optimistic result
+  const [, getCombinedResult] = observer.getOptimisticResult(
+    defaultedQueries(),
+    (queriesOptions() as QueriesObserverOptions<TCombinedResult>).combine,
   )
 
-  createRenderEffect(
-    on(
-      () => queriesOptions().queries.length,
-      () =>
-        setState(
-          observer.getOptimisticResult(
-            defaultedQueries(),
-            (queriesOptions() as QueriesObserverOptions<TCombinedResult>)
-              .combine,
-          )[1](),
-        ),
-    ),
-  )
+  const initialResult = getCombinedResult()
 
-  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)
-        }),
-    ),
+  // Store the combined result in a reactive store
+  const [state, setState] = createStore<Array<QueryObserverResult>>(
+    (Array.isArray(initialResult)
+      ? initialResult
+      : [initialResult]) as Array<QueryObserverResult>,
   )
 
-  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()
-    }
-  })
-
-  let taskQueue: Array<() => void> = []
-  const subscribeToObserver = () =>
-    observer.subscribe((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()
-          }
-        })
-      })
-
-      queueMicrotask(() => {
-        const taskToRun = taskQueue.pop()
-        if (taskToRun) taskToRun()
-        taskQueue = []
-      })
-    })
-
+  // Subscribe to the observer for updates reactively.
+  // When isRestoring is true (persist client is restoring), we defer
+  // subscription until restoring completes.
   let unsubscribe: () => void = noop
-  createComputed<() => void>((cleanup) => {
-    cleanup?.()
-    unsubscribe = isRestoring() ? noop : subscribeToObserver()
-    // cleanup needs to be scheduled after synchronous effects take place
-    return () => queueMicrotask(unsubscribe)
-  })
-  onCleanup(unsubscribe)
+  createEffect(
+    () => {
+      if (!isRestoring()) {
+        unsubscribe = observer.subscribe((result) => {
+          setState(
+            reconcile(
+              [...result] as Array<QueryObserverResult>,
+              // Use a key function that returns undefined so reconcile
+              // uses positional matching and recursively updates nested properties
+              () => undefined,
+            ),
+          )
+        })
+      }
+    },
+    () => {},
+  )
 
-  onMount(() => {
-    observer.setQueries(
-      defaultedQueries(),
-      queriesOptions().combine
-        ? ({
-            combine: queriesOptions().combine,
-          } as QueriesObserverOptions<TCombinedResult>)
-        : undefined,
-    )
+  onCleanup(() => {
+    unsubscribe()
   })
 
-  createComputed(() => {
+  // Update observer queries when options change reactively
+  const trackedDefaultedQueries = createMemo(() => {
+    const queries = defaultedQueries()
     observer.setQueries(
-      defaultedQueries(),
+      queries,
       queriesOptions().combine
         ? ({
             combine: queriesOptions().combine,
           } as QueriesObserverOptions<TCombinedResult>)
         : undefined,
     )
+    return queries
   })
 
-  const handler = (index: number) => ({
-    get(target: QueryObserverResult, prop: keyof QueryObserverResult): any {
-      if (prop === 'data') {
-        return dataResources()[index]![0]()
-      }
-      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()))
+  // Force read of trackedDefaultedQueries to ensure it runs
+  void trackedDefaultedQueries
 
-  return proxyState as TCombinedResult
+  return state as unknown as TCombinedResult
 }