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

package/build/index.js

@@ -1,6 +1,6 @@
 import { notifyManager, QueryClient as QueryClient$1, MutationObserver, QueriesObserver, hydrate, QueryObserver, InfiniteQueryObserver } from '@tanstack/query-core';
 export * from '@tanstack/query-core';
-import { batch, createContext, useContext, onMount, onCleanup, createMemo, createSignal, createComputed, on, createResource } from 'solid-js';
+import { batch, createContext, useContext, createRenderEffect, onCleanup, createMemo, createSignal, createComputed, on, mergeProps, createResource, onMount, untrack } from 'solid-js';
 import { createComponent, isServer } from 'solid-js/web';
 import { createStore, unwrap, reconcile } from 'solid-js/store';
 
@@ -20,17 +20,17 @@ var useQueryClient = (queryClient) => {
   if (!client) {
     throw new Error("No QueryClient set, use QueryClientProvider to set one");
   }
-  return client;
+  return client();
 };
 var QueryClientProvider = (props) => {
-  onMount(() => {
+  createRenderEffect((unmount) => {
+    unmount?.();
     props.client.mount();
+    return props.client.unmount.bind(props.client);
   });
   onCleanup(() => props.client.unmount());
   return createComponent(QueryClientContext.Provider, {
-    get value() {
-      return props.client;
-    },
+    value: () => props.client,
     get children() {
       return props.children;
     }
@@ -44,6 +44,9 @@ function shouldThrowError(throwError, params) {
   }
   return !!throwError;
 }
+var IsRestoringContext = createContext(() => false);
+var useIsRestoring = () => useContext(IsRestoringContext);
+var IsRestoringProvider = IsRestoringContext.Provider;
 
 // src/createBaseQuery.ts
 function reconcileFn(store, result, reconcileOption) {
@@ -77,21 +80,31 @@ var hydrateableObserverResult = (query, result) => {
 };
 function createBaseQuery(options, Observer, queryClient) {
   const client = createMemo(() => useQueryClient(queryClient?.()));
-  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 isRestoring = useIsRestoring();
+  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))
+  );
+  createComputed(
+    on(client, (c) => setObserver(new Observer(c, defaultedOptions())), {
+      defer: true
+    })
+  );
   const [state, setState] = createStore(
-    observer.getOptimisticResult(defaultedOptions)
+    observer().getOptimisticResult(defaultedOptions())
   );
   const createServerSubscriber = (resolve, reject) => {
-    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) {
           reject(unwrappedResult.error);
@@ -102,44 +115,36 @@ function createBaseQuery(options, Observer, queryClient) {
     });
   };
   const createClientSubscriber = () => {
-    return observer.subscribe((result) => {
+    const obs = observer();
+    return obs.subscribe((result) => {
       notifyManager.batchCalls(() => {
-        const reconcileOptions = observer.options.reconcile;
-        if (queryResource()?.data && result.data && !queryResource.loading) {
-          setState((store) => {
-            return reconcileFn(
-              store,
-              result,
-              reconcileOptions === void 0 ? "id" : reconcileOptions
-            );
-          });
+        const reconcileOptions = obs.options.reconcile;
+        setState((store) => {
+          return reconcileFn(
+            store,
+            result,
+            reconcileOptions === void 0 ? "id" : reconcileOptions
+          );
+        });
+        if (queryResource()?.data && result.data && !queryResource.loading && isRestoring())
           mutate(state);
-        } else {
-          setState((store) => {
-            return reconcileFn(
-              store,
-              result,
-              reconcileOptions === void 0 ? "id" : reconcileOptions
-            );
-          });
+        else
           refetch();
-        }
       })();
     });
   };
   let unsubscribe = null;
   const [queryResource, { refetch, mutate }] = createResource(
     () => {
+      const obs = observer();
       return new Promise((resolve, reject) => {
-        if (isServer) {
+        if (isServer)
           unsubscribe = createServerSubscriber(resolve, reject);
-        } else {
-          if (!unsubscribe) {
-            unsubscribe = createClientSubscriber();
-          }
-        }
-        if (!state.isLoading) {
-          const query = observer.getCurrentQuery();
+        else if (!unsubscribe && !isRestoring())
+          unsubscribe = createClientSubscriber();
+        obs.updateResult();
+        if (!state.isLoading && !isRestoring()) {
+          const query = obs.getCurrentQuery();
           resolve(hydrateableObserverResult(query, state));
         }
       });
@@ -147,7 +152,9 @@ function createBaseQuery(options, Observer, queryClient) {
     {
       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;
       },
@@ -160,29 +167,43 @@ function createBaseQuery(options, Observer, queryClient) {
        * 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) {
-          const newOptions = { ...defaultedOptions };
-          if (defaultedOptions.staleTime || !defaultedOptions.initialData) {
-            newOptions.refetchOnMount = false;
-          }
-          observer.setOptions(newOptions);
-          setState(observer.getOptimisticResult(newOptions));
-          unsubscribe = createClientSubscriber();
+        if (unsubscribe)
+          return;
+        const newOptions = { ...defaultOptions };
+        if (defaultOptions.staleTime || !defaultOptions.initialData) {
+          newOptions.refetchOnMount = false;
         }
+        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();
@@ -191,8 +212,11 @@ function createBaseQuery(options, Observer, queryClient) {
   });
   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
@@ -204,9 +228,10 @@ function createBaseQuery(options, Observer, queryClient) {
     on(
       () => state.status,
       () => {
-        if (state.isError && !state.isFetching && shouldThrowError(observer.options.throwOnError, [
+        const obs = observer();
+        if (state.isError && !state.isFetching && !isRestoring() && shouldThrowError(obs.options.throwOnError, [
           state.error,
-          observer.getCurrentQuery()
+          obs.getCurrentQuery()
         ])) {
           throw state.error;
         }
@@ -252,9 +277,9 @@ function createInfiniteQuery(options, queryClient) {
   );
 }
 function createMutation(options, queryClient) {
-  const client = useQueryClient(queryClient?.());
+  const client = createMemo(() => useQueryClient(queryClient?.()));
   const observer = new MutationObserver(
-    client,
+    client(),
     options()
   );
   const mutate = (variables, mutateOptions) => {
@@ -303,43 +328,114 @@ function useIsMutating(filters, queryClient) {
   return mutations;
 }
 function createQueries(queriesOptions, queryClient) {
-  const client = useQueryClient(queryClient?.());
-  const defaultedQueries = queriesOptions().queries.map((options) => {
-    const defaultedOptions = client.defaultQueryOptions(options);
-    defaultedOptions._optimisticResults = "optimistic";
-    return defaultedOptions;
-  });
+  const client = createMemo(() => useQueryClient(queryClient?.()));
+  const isRestoring = useIsRestoring();
+  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
     } : void 0
   );
   const [state, setState] = createStore(
-    observer.getOptimisticResult(defaultedQueries)[1]()
+    observer.getOptimisticResult(defaultedQueries())[1]()
   );
-  const unsubscribe = observer.subscribe((result) => {
-    notifyManager.batchCalls(() => {
-      setState(unwrap(result));
-    })();
+  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);
+      })
+    )
+  );
+  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 = [];
+  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]) };
+          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 0;
+  createComputed((cleanup) => {
+    cleanup?.();
+    unsubscribe = isRestoring() ? () => void 0 : subscribeToObserver();
+    return () => queueMicrotask(unsubscribe);
   });
   onCleanup(unsubscribe);
+  onMount(() => {
+    observer.setQueries(
+      defaultedQueries(),
+      queriesOptions().combine ? {
+        combine: queriesOptions().combine
+      } : void 0,
+      { 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
       } : void 0,
       { listeners: false }
     );
   });
-  return state;
+  const handler = (index) => ({
+    get(target, prop) {
+      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;
 }
 
-export { QueryClient, QueryClientContext, QueryClientProvider, createInfiniteQuery, createMutation, createQueries, createQuery, queryOptions, useIsFetching, useIsMutating, useQueryClient };
+export { IsRestoringProvider, QueryClient, QueryClientContext, QueryClientProvider, createInfiniteQuery, createMutation, createQueries, createQuery, queryOptions, useIsFetching, useIsMutating, useIsRestoring, useQueryClient };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query",
-  "version": "5.0.0-beta.20",
+  "version": "5.0.0-beta.21",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",

package/src/QueryClientProvider.tsx

@@ -1,10 +1,15 @@
-import { createContext, onCleanup, onMount, useContext } from 'solid-js'
+import {
+  createContext,
+  createRenderEffect,
+  onCleanup,
+  useContext,
+} from 'solid-js'
 import type { QueryClient } from './QueryClient'
 import type { JSX } from 'solid-js'
 
-export const QueryClientContext = createContext<QueryClient | undefined>(
-  undefined,
-)
+export const QueryClientContext = createContext<
+  (() => QueryClient) | undefined
+>(undefined)
 
 export const useQueryClient = (queryClient?: QueryClient) => {
   if (queryClient) {
@@ -16,7 +21,7 @@ export const useQueryClient = (queryClient?: QueryClient) => {
     throw new Error('No QueryClient set, use QueryClientProvider to set one')
   }
 
-  return client
+  return client()
 }
 
 export type QueryClientProviderProps = {
@@ -27,13 +32,15 @@ export type QueryClientProviderProps = {
 export const QueryClientProvider = (
   props: QueryClientProviderProps,
 ): JSX.Element => {
-  onMount(() => {
+  createRenderEffect<() => void>((unmount) => {
+    unmount?.()
     props.client.mount()
+    return props.client.unmount.bind(props.client)
   })
   onCleanup(() => props.client.unmount())
 
   return (
-    <QueryClientContext.Provider value={props.client}>
+    <QueryClientContext.Provider value={() => props.client}>
       {props.children}
     </QueryClientContext.Provider>
   )

package/src/__tests__/createQueries.test.tsx

@@ -54,7 +54,7 @@ describe('useQueries', () => {
       }))
 
       createRenderEffect(() => {
-        results.push([...result])
+        results.push([{ ...result[0] }, { ...result[1] }])
       })
 
       return (

package/src/__tests__/createQuery.test.tsx

@@ -898,7 +898,7 @@ describe('createQuery', () => {
 
   it('should throw an error when a selector throws', async () => {
     const key = queryKey()
-    const states: Array<CreateQueryResult<string>> = []
+    const states: Array<{ status: string; data?: unknown; error?: Error }> = []
     const error = new Error('Select Error')
 
     function Page() {
@@ -910,7 +910,10 @@ describe('createQuery', () => {
         },
       }))
       createRenderEffect(() => {
-        states.push({ ...state })
+        if (state.status === 'pending')
+          states.push({ status: 'pending', data: undefined })
+        else if (state.status === 'error')
+          states.push({ status: 'error', error: state.error })
       })
       return null
     }
@@ -4666,11 +4669,10 @@ describe('createQuery', () => {
     })
   })
 
-  it('should only call the query hash function once each render', async () => {
+  it('should only call the query hash function once', async () => {
     const key = queryKey()
 
     let hashes = 0
-    let renders = 0
 
     function queryKeyHashFn(x: any) {
       hashes++
@@ -4678,20 +4680,12 @@ describe('createQuery', () => {
     }
 
     function Page() {
-      const state = createQuery(() => ({
+      createQuery(() => ({
         queryKey: key,
         queryFn: () => 'test',
         queryKeyHashFn,
       }))
 
-      createEffect(
-        on(
-          () => state.status,
-          () => {
-            renders++
-          },
-        ),
-      )
       return null
     }
 
@@ -4702,8 +4696,7 @@ describe('createQuery', () => {
     ))
 
     await sleep(10)
-
-    expect(renders).toBe(hashes)
+    expect(hashes).toBe(1)
   })
 
   it('should refetch when changed enabled to true in error state', async () => {

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__/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}`]
 }