@tanstack/solid-query 5.0.0-beta.20 → 5.0.0-beta.21

package/src/createBaseQuery.ts

@@ -8,12 +8,16 @@ import {
   createComputed,
   createMemo,
   createResource,
+  createSignal,
+  mergeProps,
   on,
   onCleanup,
+  untrack,
 } from 'solid-js'
 import { createStore, reconcile, unwrap } from 'solid-js/store'
 import { useQueryClient } from './QueryClientProvider'
 import { shouldThrowError } from './utils'
+import { useIsRestoring } from './isRestoring'
 import type { CreateBaseQueryOptions } from './types'
 import type { Accessor } from 'solid-js'
 import type { QueryClient } from './QueryClient'
@@ -104,18 +108,31 @@ export function createBaseQuery<
     | QueryObserverResult<TData, TError>
 
   const client = createMemo(() => useQueryClient(queryClient?.()))
+  const isRestoring = useIsRestoring()
 
-  const defaultedOptions = client().defaultQueryOptions(options())
-  defaultedOptions._optimisticResults = 'optimistic'
-  defaultedOptions.structuralSharing = false
-  if (isServer) {
-    defaultedOptions.retry = false
-    defaultedOptions.throwOnError = true
-  }
-  const observer = new Observer(client(), defaultedOptions)
+  const defaultedOptions = createMemo(() =>
+    mergeProps(client().defaultQueryOptions(options()), {
+      get _optimisticResults() {
+        return isRestoring() ? 'isRestoring' : 'optimistic'
+      },
+      structuralSharing: false,
+      ...(isServer && { retry: false, throwOnError: true }),
+    }),
+  )
+
+  const [observer, setObserver] = createSignal(
+    new Observer(client(), untrack(defaultedOptions)),
+  )
+  // we set the value in a computed because `createMemo`
+  // returns undefined during transitions
+  createComputed(
+    on(client, (c) => setObserver(new Observer(c, defaultedOptions())), {
+      defer: true,
+    }),
+  )
 
   const [state, setState] = createStore<QueryObserverResult<TData, TError>>(
-    observer.getOptimisticResult(defaultedOptions),
+    observer().getOptimisticResult(defaultedOptions()),
   )
 
   const createServerSubscriber = (
@@ -124,9 +141,9 @@ export function createBaseQuery<
     ) => void,
     reject: (reason?: any) => void,
   ) => {
-    return observer.subscribe((result) => {
+    return observer().subscribe((result) => {
       notifyManager.batchCalls(() => {
-        const query = observer.getCurrentQuery()
+        const query = observer().getCurrentQuery()
         const unwrappedResult = hydrateableObserverResult(query, result)
 
         if (unwrappedResult.isError) {
@@ -139,32 +156,30 @@ export function createBaseQuery<
   }
 
   const createClientSubscriber = () => {
-    return observer.subscribe((result) => {
+    const obs = observer()
+    return obs.subscribe((result) => {
       notifyManager.batchCalls(() => {
         // @ts-expect-error - This will error because the reconcile option does not
         // exist on the query-core QueryObserverResult type
-        const reconcileOptions = observer.options.reconcile
+        const reconcileOptions = obs.options.reconcile
+
+        setState((store) => {
+          return reconcileFn(
+            store,
+            result,
+            reconcileOptions === undefined ? 'id' : reconcileOptions,
+          )
+        })
         // If the query has data we dont suspend but instead mutate the resource
         // This could happen when placeholderData/initialData is defined
-        if (queryResource()?.data && result.data && !queryResource.loading) {
-          setState((store) => {
-            return reconcileFn(
-              store,
-              result,
-              reconcileOptions === undefined ? 'id' : reconcileOptions,
-            )
-          })
+        if (
+          queryResource()?.data &&
+          result.data &&
+          !queryResource.loading &&
+          isRestoring()
+        )
           mutate(state)
-        } else {
-          setState((store) => {
-            return reconcileFn(
-              store,
-              result,
-              reconcileOptions === undefined ? 'id' : reconcileOptions,
-            )
-          })
-          refetch()
-        }
+        else refetch()
       })()
     })
   }
@@ -178,17 +193,16 @@ export function createBaseQuery<
     ResourceData | undefined
   >(
     () => {
+      const obs = observer()
       return new Promise((resolve, reject) => {
-        if (isServer) {
-          unsubscribe = createServerSubscriber(resolve, reject)
-        } else {
-          if (!unsubscribe) {
-            unsubscribe = createClientSubscriber()
-          }
-        }
+        if (isServer) unsubscribe = createServerSubscriber(resolve, reject)
+        else if (!unsubscribe && !isRestoring())
+          unsubscribe = createClientSubscriber()
+
+        obs.updateResult()
 
-        if (!state.isLoading) {
-          const query = observer.getCurrentQuery()
+        if (!state.isLoading && !isRestoring()) {
+          const query = obs.getCurrentQuery()
           resolve(hydrateableObserverResult(query, state))
         }
       })
@@ -197,7 +211,9 @@ export function createBaseQuery<
       initialValue: state,
 
       // If initialData is provided, we resolve the resource immediately
-      ssrLoadFrom: options().initialData ? 'initial' : 'server',
+      get ssrLoadFrom() {
+        return options().initialData ? 'initial' : 'server'
+      },
 
       get deferStream() {
         return options().deferStream
@@ -212,37 +228,50 @@ export function createBaseQuery<
        * Note that this is only invoked on the client, for queries that were originally run on the server.
        */
       onHydrated(_k, info) {
+        const defaultOptions = defaultedOptions()
         if (info.value) {
           hydrate(client(), {
             queries: [
               {
-                queryKey: defaultedOptions.queryKey,
-                queryHash: defaultedOptions.queryHash,
+                queryKey: defaultOptions.queryKey,
+                queryHash: defaultOptions.queryHash,
                 state: info.value,
               },
             ],
           })
         }
 
-        if (!unsubscribe) {
-          /**
-           * Do not refetch query on mount if query was fetched on server,
-           * even if `staleTime` is not set.
-           */
-          const newOptions = { ...defaultedOptions }
-          if (defaultedOptions.staleTime || !defaultedOptions.initialData) {
-            newOptions.refetchOnMount = false
-          }
-          // Setting the options as an immutable object to prevent
-          // wonky behavior with observer subscriptions
-          observer.setOptions(newOptions)
-          setState(observer.getOptimisticResult(newOptions))
-          unsubscribe = createClientSubscriber()
+        if (unsubscribe) return
+        /**
+         * Do not refetch query on mount if query was fetched on server,
+         * even if `staleTime` is not set.
+         */
+        const newOptions = { ...defaultOptions }
+        if (defaultOptions.staleTime || !defaultOptions.initialData) {
+          newOptions.refetchOnMount = false
         }
+        // Setting the options as an immutable object to prevent
+        // wonky behavior with observer subscriptions
+        observer().setOptions(newOptions)
+        setState(observer().getOptimisticResult(newOptions))
+        unsubscribe = createClientSubscriber()
       },
     },
   )
 
+  createComputed(
+    on(
+      [isRestoring, observer],
+      ([restoring]) => {
+        const unsub = unsubscribe
+        queueMicrotask(() => unsub?.())
+        unsubscribe = null
+        if (!restoring) refetch()
+      },
+      { defer: true },
+    ),
+  )
+
   onCleanup(() => {
     if (unsubscribe) {
       unsubscribe()
@@ -252,8 +281,11 @@ export function createBaseQuery<
 
   createComputed(
     on(
-      () => client().defaultQueryOptions(options()),
-      () => observer.setOptions(client().defaultQueryOptions(options())),
+      [observer, defaultedOptions],
+      ([obs, opts]) => {
+        obs.setOptions(opts)
+        setState(obs.getOptimisticResult(opts))
+      },
       {
         // Defer because we don't need to trigger on first render
         // This only cares about changes to options after the observer is created
@@ -266,12 +298,14 @@ export function createBaseQuery<
     on(
       () => state.status,
       () => {
+        const obs = observer()
         if (
           state.isError &&
           !state.isFetching &&
-          shouldThrowError(observer.options.throwOnError, [
+          !isRestoring() &&
+          shouldThrowError(obs.options.throwOnError, [
             state.error,
-            observer.getCurrentQuery(),
+            obs.getCurrentQuery(),
           ])
         ) {
           throw state.error

package/src/createMutation.ts

@@ -1,5 +1,5 @@
 import { MutationObserver } from '@tanstack/query-core'
-import { createComputed, on, onCleanup } from 'solid-js'
+import { createComputed, createMemo, on, onCleanup } from 'solid-js'
 import { createStore } from 'solid-js/store'
 import { useQueryClient } from './QueryClientProvider'
 import { shouldThrowError } from './utils'
@@ -22,10 +22,10 @@ export function createMutation<
   options: CreateMutationOptions<TData, TError, TVariables, TContext>,
   queryClient?: Accessor<QueryClient>,
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
-  const client = useQueryClient(queryClient?.())
+  const client = createMemo(() => useQueryClient(queryClient?.()))
 
   const observer = new MutationObserver<TData, TError, TVariables, TContext>(
-    client,
+    client(),
     options(),
   )
 

package/src/createQueries.ts

@@ -1,7 +1,19 @@
-import { QueriesObserver, notifyManager } from '@tanstack/query-core'
-import { createComputed, onCleanup } from 'solid-js'
+import { QueriesObserver } from '@tanstack/query-core'
 import { createStore, unwrap } from 'solid-js/store'
+import {
+  batch,
+  createComputed,
+  createMemo,
+  createRenderEffect,
+  createResource,
+  mergeProps,
+  on,
+  onCleanup,
+  onMount,
+} from 'solid-js'
 import { useQueryClient } from './QueryClientProvider'
+import { useIsRestoring } from './isRestoring'
+import type { CreateQueryResult, SolidQueryOptions } from './types'
 import type { Accessor } from 'solid-js'
 import type { QueryClient } from './QueryClient'
 import type {
@@ -10,8 +22,8 @@ import type {
   QueriesPlaceholderDataFunction,
   QueryFunction,
   QueryKey,
+  QueryObserverResult,
 } from '@tanstack/query-core'
-import type { CreateQueryResult, SolidQueryOptions } from './types'
 
 // This defines the `UseQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.
 // `placeholderData` function does not have a parameter
@@ -159,7 +171,7 @@ export type QueriesResults<
 
 export function createQueries<
   T extends Array<any>,
-  TCombinedResult = QueriesResults<T>,
+  TCombinedResult extends QueriesResults<T> = QueriesResults<T>,
 >(
   queriesOptions: Accessor<{
     queries: readonly [...QueriesOptions<T>]
@@ -167,17 +179,22 @@ export function createQueries<
   }>,
   queryClient?: Accessor<QueryClient>,
 ): TCombinedResult {
-  const client = useQueryClient(queryClient?.())
+  const client = createMemo(() => useQueryClient(queryClient?.()))
+  const isRestoring = useIsRestoring()
 
-  const defaultedQueries = queriesOptions().queries.map((options) => {
-    const defaultedOptions = client.defaultQueryOptions(options)
-    defaultedOptions._optimisticResults = 'optimistic'
-    return defaultedOptions
-  })
+  const defaultedQueries = createMemo(() =>
+    queriesOptions().queries.map((options) =>
+      mergeProps(client().defaultQueryOptions(options), {
+        get _optimisticResults() {
+          return isRestoring() ? 'isRestoring' : 'optimistic'
+        },
+      }),
+    ),
+  )
 
   const observer = new QueriesObserver(
-    client,
-    defaultedQueries,
+    client(),
+    defaultedQueries(),
     queriesOptions().combine
       ? ({
           combine: queriesOptions().combine,
@@ -185,27 +202,89 @@ export function createQueries<
       : undefined,
   )
 
-  // @ts-expect-error - Types issue with solid-js createStore
   const [state, setState] = createStore<TCombinedResult>(
-    observer.getOptimisticResult(defaultedQueries)[1](),
+    observer.getOptimisticResult(defaultedQueries())[1](),
+  )
+
+  createRenderEffect(
+    on(
+      () => queriesOptions().queries.length,
+      () => setState(observer.getOptimisticResult(defaultedQueries())[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)
+        }),
+    ),
   )
 
-  const unsubscribe = observer.subscribe((result) => {
-    notifyManager.batchCalls(() => {
-      setState(unwrap(result) as unknown as TCombinedResult)
-    })()
+  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 = []
+      })
+    })
+
+  let unsubscribe: () => void = () => undefined
+  createComputed<() => void>((cleanup) => {
+    cleanup?.()
+    unsubscribe = isRestoring() ? () => undefined : subscribeToObserver()
+    // cleanup needs to be scheduled after synchronous effects take place
+    return () => queueMicrotask(unsubscribe)
+  })
   onCleanup(unsubscribe)
 
+  onMount(() => {
+    observer.setQueries(
+      defaultedQueries(),
+      queriesOptions().combine
+        ? ({
+            combine: queriesOptions().combine,
+          } as QueriesObserverOptions<TCombinedResult>)
+        : undefined,
+      { listeners: false },
+    )
+  })
+
   createComputed(() => {
-    const updatedQueries = queriesOptions().queries.map((options) => {
-      const defaultedOptions = client.defaultQueryOptions(options)
-      defaultedOptions._optimisticResults = 'optimistic'
-      return defaultedOptions
-    })
     observer.setQueries(
-      updatedQueries,
+      defaultedQueries(),
       queriesOptions().combine
         ? ({
             combine: queriesOptions().combine,
@@ -215,5 +294,22 @@ export function createQueries<
     )
   })
 
-  return state
+  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 [proxifiedState, setProxifiedState] = createStore(getProxies())
+  createRenderEffect(() => setProxifiedState(getProxies()))
+
+  return proxifiedState as TCombinedResult
 }

package/src/index.ts

@@ -27,3 +27,4 @@ export { createInfiniteQuery } from './createInfiniteQuery'
 export { createMutation } from './createMutation'
 export { useIsMutating } from './useIsMutating'
 export { createQueries } from './createQueries'
+export { useIsRestoring, IsRestoringProvider } from './isRestoring'

package/src/isRestoring.ts

@@ -0,0 +1,6 @@
+import { type Accessor, createContext, useContext } from 'solid-js'
+
+const IsRestoringContext = createContext<Accessor<boolean>>(() => false)
+
+export const useIsRestoring = () => useContext(IsRestoringContext)
+export const IsRestoringProvider = IsRestoringContext.Provider