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

package/src/__tests__/suspense.test.tsx

@@ -28,7 +28,7 @@ describe("useQuery's in Suspense mode", () => {
 
   it('should render the correct amount of times in Suspense mode', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
 
     let count = 0
     let renders = 0
@@ -84,7 +84,7 @@ describe("useQuery's in Suspense mode", () => {
 
   it('should return the correct states for a successful infinite query', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Array<CreateInfiniteQueryResult<InfiniteData<number>>> = []
 
     function Page() {
       const [multiplier, setMultiplier] = createSignal(1)
@@ -143,7 +143,7 @@ describe("useQuery's in Suspense mode", () => {
   it('should not call the queryFn twice when used in Suspense mode', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], string>()
+    const queryFn = vi.fn<Array<unknown>, string>()
     queryFn.mockImplementation(() => {
       sleep(10)
       return 'data'
@@ -663,7 +663,7 @@ describe("useQuery's in Suspense mode", () => {
   it('should not call the queryFn when not enabled', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], Promise<string>>()
+    const queryFn = vi.fn<Array<unknown>, Promise<string>>()
     queryFn.mockImplementation(async () => {
       await sleep(10)
       return '23'

package/src/__tests__/transition.test.tsx

@@ -4,7 +4,7 @@ import { Show, Suspense, createSignal, startTransition } from 'solid-js'
 import { QueryCache, QueryClientProvider, createQuery } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
 
-describe("useQuery's in Suspense mode with transitions", () => {
+describe("createQuery's in Suspense mode with transitions", () => {
   const queryCache = new QueryCache()
   const queryClient = createQueryClient({ queryCache })
 
@@ -19,7 +19,6 @@ describe("useQuery's in Suspense mode with transitions", () => {
           return true
         },
       }))
-
       return <Show when={state.data}>Message</Show>
     }
 

package/src/__tests__/useIsFetching.test.tsx

@@ -59,7 +59,7 @@ describe('useIsFetching', () => {
     const key1 = queryKey()
     const key2 = queryKey()
 
-    const isFetchings: number[] = []
+    const isFetchings: Array<number> = []
 
     function IsFetching() {
       const isFetching = useIsFetching()
@@ -125,7 +125,7 @@ describe('useIsFetching', () => {
     const key1 = queryKey()
     const key2 = queryKey()
 
-    const isFetchings: number[] = []
+    const isFetchings: Array<number> = []
 
     function One() {
       createQuery(() => ({

package/src/__tests__/useIsMutating.test.tsx

@@ -8,7 +8,7 @@ import { createQueryClient, setActTimeout, sleep } from './utils'
 
 describe('useIsMutating', () => {
   it('should return the number of fetching mutations', async () => {
-    const isMutatings: number[] = []
+    const isMutatings: Array<number> = []
     const queryClient = createQueryClient()
 
     function IsMutating() {
@@ -63,7 +63,7 @@ describe('useIsMutating', () => {
   })
 
   it('should filter correctly by mutationKey', async () => {
-    const isMutatings: number[] = []
+    const isMutatings: Array<number> = []
     const queryClient = createQueryClient()
 
     function IsMutating() {
@@ -108,7 +108,7 @@ describe('useIsMutating', () => {
   })
 
   it('should filter correctly by predicate', async () => {
-    const isMutatings: number[] = []
+    const isMutatings: Array<number> = []
     const queryClient = createQueryClient()
 
     function IsMutating() {

package/src/__tests__/utils.tsx

@@ -7,7 +7,7 @@ import type { ParentProps } from 'solid-js'
 import type { SpyInstance } from 'vitest'
 
 let queryKeyCount = 0
-export function queryKey(): Array<string> {
+export function queryKey() {
   queryKeyCount++
   return [`query_${queryKeyCount}`]
 }

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
@@ -95,63 +107,71 @@ type GetResults<T> =
  * QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
  */
 export type QueriesOptions<
-  T extends any[],
-  Result extends any[] = [],
+  T extends Array<any>,
+  Result extends Array<any> = [],
   Depth extends ReadonlyArray<number> = [],
 > = Depth['length'] extends MAXIMUM_DEPTH
-  ? CreateQueryOptionsForCreateQueries[]
+  ? Array<CreateQueryOptionsForCreateQueries>
   : T extends []
   ? []
   : T extends [infer Head]
   ? [...Result, GetOptions<Head>]
   : T extends [infer Head, ...infer Tail]
   ? QueriesOptions<[...Tail], [...Result, GetOptions<Head>], [...Depth, 1]>
-  : unknown[] extends T
+  : Array<unknown> extends T
   ? T
   : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogenous type!
   // use this to infer the param types in the case of Array.map() argument
-  T extends CreateQueryOptionsForCreateQueries<
-      infer TQueryFnData,
-      infer TError,
-      infer TData,
-      infer TQueryKey
-    >[]
-  ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError, TData, TQueryKey>[]
+  T extends Array<
+      CreateQueryOptionsForCreateQueries<
+        infer TQueryFnData,
+        infer TError,
+        infer TData,
+        infer TQueryKey
+      >
+    >
+  ? Array<
+      CreateQueryOptionsForCreateQueries<TQueryFnData, TError, TData, TQueryKey>
+    >
   : // Fallback
-    CreateQueryOptionsForCreateQueries[]
+    Array<CreateQueryOptionsForCreateQueries>
 
 /**
  * QueriesResults reducer recursively maps type param to results
  */
 export type QueriesResults<
-  T extends any[],
-  Result extends any[] = [],
+  T extends Array<any>,
+  Result extends Array<any> = [],
   Depth extends ReadonlyArray<number> = [],
 > = Depth['length'] extends MAXIMUM_DEPTH
-  ? CreateQueryResult[]
+  ? Array<CreateQueryResult>
   : T extends []
   ? []
   : T extends [infer Head]
   ? [...Result, GetResults<Head>]
   : T extends [infer Head, ...infer Tail]
   ? QueriesResults<[...Tail], [...Result, GetResults<Head>], [...Depth, 1]>
-  : T extends CreateQueryOptionsForCreateQueries<
-      infer TQueryFnData,
-      infer TError,
-      infer TData,
-      any
-    >[]
+  : T extends Array<
+      CreateQueryOptionsForCreateQueries<
+        infer TQueryFnData,
+        infer TError,
+        infer TData,
+        any
+      >
+    >
   ? // Dynamic-size (homogenous) UseQueryOptions array: map directly to array of results
-    CreateQueryResult<
-      unknown extends TData ? TQueryFnData : TData,
-      unknown extends TError ? DefaultError : TError
-    >[]
+    Array<
+      CreateQueryResult<
+        unknown extends TData ? TQueryFnData : TData,
+        unknown extends TError ? DefaultError : TError
+      >
+    >
   : // Fallback
-    CreateQueryResult[]
+    Array<CreateQueryResult>
 
 export function createQueries<
-  T extends any[],
-  TCombinedResult = QueriesResults<T>,
+  T extends Array<any>,
+  TCombinedResult extends QueriesResults<T> = QueriesResults<T>,
 >(
   queriesOptions: Accessor<{
     queries: readonly [...QueriesOptions<T>]
@@ -159,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,
@@ -177,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,
@@ -207,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'