@tanstack/solid-query 5.0.0-beta.18 → 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.18",
+  "version": "5.0.0-beta.21",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -48,7 +48,7 @@
   ],
   "dependencies": {
     "solid-js": "^1.7.8",
-    "@tanstack/query-core": "5.0.0-beta.18"
+    "@tanstack/query-core": "5.0.0-beta.20"
   },
   "devDependencies": {
     "tsup-preset-solid": "^2.0.1",

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__/createInfiniteQuery.test.tsx

@@ -33,7 +33,7 @@ import type {
 import type { Mock } from 'vitest'
 
 interface Result {
-  items: number[]
+  items: Array<number>
   nextId?: number
   prevId?: number
   ts: number
@@ -62,7 +62,7 @@ describe('useInfiniteQuery', () => {
 
   it('should return the correct states for a successful query', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Array<CreateInfiniteQueryResult<InfiniteData<number>>> = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -199,8 +199,9 @@ describe('useInfiniteQuery', () => {
 
   it('should keep the previous data when placeholderData is set', async () => {
     const key = queryKey()
-    const states: Partial<CreateInfiniteQueryResult<InfiniteData<string>>>[] =
-      []
+    const states: Array<
+      Partial<CreateInfiniteQueryResult<InfiniteData<string>>>
+    > = []
 
     function Page() {
       const [order, setOrder] = createSignal('desc')
@@ -304,7 +305,7 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to select a part of the data', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []
+    const states: Array<CreateInfiniteQueryResult<InfiniteData<string>>> = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -344,9 +345,9 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to select a new result and not cause infinite renders', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<
-      InfiniteData<{ count: number; id: number }>
-    >[] = []
+    const states: Array<
+      CreateInfiniteQueryResult<InfiniteData<{ count: number; id: number }>>
+    > = []
     let selectCalled = 0
 
     function Page() {
@@ -391,8 +392,9 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to reverse the data', async () => {
     const key = queryKey()
-    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
-      []
+    const states: Array<
+      Partial<CreateInfiniteQueryResult<InfiniteData<number>>>
+    > = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -466,8 +468,9 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to fetch a previous page', async () => {
     const key = queryKey()
-    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
-      []
+    const states: Array<
+      Partial<CreateInfiniteQueryResult<InfiniteData<number>>>
+    > = []
 
     function Page() {
       const start = 10
@@ -554,8 +557,9 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to refetch when providing page params automatically', async () => {
     const key = queryKey()
-    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
-      []
+    const states: Array<
+      Partial<CreateInfiniteQueryResult<InfiniteData<number>>>
+    > = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -675,8 +679,9 @@ describe('useInfiniteQuery', () => {
 
   it('should silently cancel any ongoing fetch when fetching more', async () => {
     const key = queryKey()
-    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
-      []
+    const states: Array<
+      Partial<CreateInfiniteQueryResult<InfiniteData<number>>>
+    > = []
 
     function Page() {
       const start = 10
@@ -764,8 +769,8 @@ describe('useInfiniteQuery', () => {
   it('should silently cancel an ongoing fetchNextPage request when another fetchNextPage is invoked', async () => {
     const key = queryKey()
     const start = 10
-    const onAborts: Mock<any, any>[] = []
-    const abortListeners: Mock<any, any>[] = []
+    const onAborts: Array<Mock<any, any>> = []
+    const abortListeners: Array<Mock<any, any>> = []
     const fetchPage = vi.fn<
       [QueryFunctionContext<typeof key, number>],
       Promise<number>
@@ -846,8 +851,8 @@ describe('useInfiniteQuery', () => {
   it('should not cancel an ongoing fetchNextPage request when another fetchNextPage is invoked if `cancelRefetch: false` is used ', async () => {
     const key = queryKey()
     const start = 10
-    const onAborts: Mock<any, any>[] = []
-    const abortListeners: Mock<any, any>[] = []
+    const onAborts: Array<Mock<any, any>> = []
+    const abortListeners: Array<Mock<any, any>> = []
     const fetchPage = vi.fn<
       [QueryFunctionContext<typeof key, number>],
       Promise<number>
@@ -918,7 +923,7 @@ describe('useInfiniteQuery', () => {
 
   it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Array<CreateInfiniteQueryResult<InfiniteData<number>>> = []
 
     function Page() {
       const start = 10
@@ -1028,8 +1033,9 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to set new pages with the query client', async () => {
     const key = queryKey()
-    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
-      []
+    const states: Array<
+      Partial<CreateInfiniteQueryResult<InfiniteData<number>>>
+    > = []
 
     function Page() {
       const [firstPage, setFirstPage] = createSignal(0)
@@ -1123,8 +1129,9 @@ describe('useInfiniteQuery', () => {
 
   it('should only refetch the first page when initialData is provided', async () => {
     const key = queryKey()
-    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
-      []
+    const states: Array<
+      Partial<CreateInfiniteQueryResult<InfiniteData<number>>>
+    > = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -1201,7 +1208,7 @@ describe('useInfiniteQuery', () => {
 
   it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Array<CreateInfiniteQueryResult<InfiniteData<number>>> = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -1245,7 +1252,7 @@ describe('useInfiniteQuery', () => {
 
   it('should compute hasNextPage correctly using initialData', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Array<CreateInfiniteQueryResult<InfiniteData<number>>> = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -1289,7 +1296,7 @@ describe('useInfiniteQuery', () => {
 
   it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Array<CreateInfiniteQueryResult<InfiniteData<number>>> = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -1333,7 +1340,7 @@ describe('useInfiniteQuery', () => {
 
   it('should not use selected data when computing hasNextPage', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []
+    const states: Array<CreateInfiniteQueryResult<InfiniteData<string>>> = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({

package/src/__tests__/createMutation.test.tsx

@@ -318,7 +318,7 @@ describe('createMutation', () => {
   })
 
   it('should be able to override the useMutation success callbacks', async () => {
-    const callbacks: string[] = []
+    const callbacks: Array<string> = []
 
     function Page() {
       const mutation = createMutation(() => ({
@@ -369,7 +369,7 @@ describe('createMutation', () => {
   })
 
   it('should be able to override the error callbacks when using mutateAsync', async () => {
-    const callbacks: string[] = []
+    const callbacks: Array<string> = []
 
     function Page() {
       const mutation = createMutation(() => ({
@@ -431,7 +431,7 @@ describe('createMutation', () => {
       },
     })
 
-    const states: CreateMutationResult<any, any, any, any>[] = []
+    const states: Array<CreateMutationResult<any, any, any, any>> = []
 
     function Page() {
       const mutation = createMutation<string, unknown, string>(() => ({
@@ -676,7 +676,7 @@ describe('createMutation', () => {
     const onlineMock = mockOnlineManagerIsOnline(false)
 
     let count = 0
-    const states: CreateMutationResult<any, any, any, any>[] = []
+    const states: Array<CreateMutationResult<any, any, any, any>> = []
 
     function Page() {
       const mutation = createMutation(() => ({