@tanstack/solid-query 5.0.0-beta.9 → 5.0.0-rc.1

package/build/dev.cjs

@@ -21,17 +21,17 @@ exports.useQueryClient = (queryClient) => {
   if (!client) {
     throw new Error("No QueryClient set, use QueryClientProvider to set one");
   }
-  return client;
+  return client();
 };
 exports.QueryClientProvider = (props) => {
-  solidJs.onMount(() => {
+  solidJs.createRenderEffect((unmount) => {
+    unmount?.();
     props.client.mount();
+    return props.client.unmount.bind(props.client);
   });
   solidJs.onCleanup(() => props.client.unmount());
   return web.createComponent(exports.QueryClientContext.Provider, {
-    get value() {
-      return props.client;
-    },
+    value: () => props.client,
     get children() {
       return props.children;
     }
@@ -45,6 +45,9 @@ function shouldThrowError(throwError, params) {
   }
   return !!throwError;
 }
+var IsRestoringContext = solidJs.createContext(() => false);
+exports.useIsRestoring = () => solidJs.useContext(IsRestoringContext);
+exports.IsRestoringProvider = IsRestoringContext.Provider;
 
 // src/createBaseQuery.ts
 function reconcileFn(store$1, result, reconcileOption) {
@@ -78,21 +81,31 @@ var hydrateableObserverResult = (query, result) => {
 };
 function createBaseQuery(options, Observer, queryClient) {
   const client = solidJs.createMemo(() => exports.useQueryClient(queryClient?.()));
-  const defaultedOptions = client().defaultQueryOptions(options());
-  defaultedOptions._optimisticResults = "optimistic";
-  defaultedOptions.structuralSharing = false;
-  if (web.isServer) {
-    defaultedOptions.retry = false;
-    defaultedOptions.throwOnError = true;
-  }
-  const observer = new Observer(client(), defaultedOptions);
+  const isRestoring = exports.useIsRestoring();
+  const defaultedOptions = solidJs.createMemo(
+    () => solidJs.mergeProps(client().defaultQueryOptions(options()), {
+      get _optimisticResults() {
+        return isRestoring() ? "isRestoring" : "optimistic";
+      },
+      structuralSharing: false,
+      ...web.isServer && { retry: false, throwOnError: true }
+    })
+  );
+  const [observer, setObserver] = solidJs.createSignal(
+    new Observer(client(), solidJs.untrack(defaultedOptions))
+  );
+  solidJs.createComputed(
+    solidJs.on(client, (c) => setObserver(new Observer(c, defaultedOptions())), {
+      defer: true
+    })
+  );
   const [state, setState] = store.createStore(
-    observer.getOptimisticResult(defaultedOptions)
+    observer().getOptimisticResult(defaultedOptions())
   );
   const createServerSubscriber = (resolve, reject) => {
-    return observer.subscribe((result) => {
+    return observer().subscribe((result) => {
       queryCore.notifyManager.batchCalls(() => {
-        const query = observer.getCurrentQuery();
+        const query = observer().getCurrentQuery();
         const unwrappedResult = hydrateableObserverResult(query, result);
         if (unwrappedResult.isError) {
           reject(unwrappedResult.error);
@@ -103,44 +116,36 @@ function createBaseQuery(options, Observer, queryClient) {
     });
   };
   const createClientSubscriber = () => {
-    return observer.subscribe((result) => {
+    const obs = observer();
+    return obs.subscribe((result) => {
       queryCore.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 }] = solidJs.createResource(
     () => {
+      const obs = observer();
       return new Promise((resolve, reject) => {
-        if (web.isServer) {
+        if (web.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));
         }
       });
@@ -148,7 +153,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;
       },
@@ -161,29 +168,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) {
           queryCore.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();
       }
     }
   );
+  solidJs.createComputed(
+    solidJs.on(
+      [isRestoring, observer],
+      ([restoring]) => {
+        const unsub = unsubscribe;
+        queueMicrotask(() => unsub?.());
+        unsubscribe = null;
+        if (!restoring)
+          refetch();
+      },
+      { defer: true }
+    )
+  );
   solidJs.onCleanup(() => {
     if (unsubscribe) {
       unsubscribe();
@@ -192,8 +213,11 @@ function createBaseQuery(options, Observer, queryClient) {
   });
   solidJs.createComputed(
     solidJs.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
@@ -205,9 +229,10 @@ function createBaseQuery(options, Observer, queryClient) {
     solidJs.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;
         }
@@ -253,9 +278,9 @@ function createInfiniteQuery(options, queryClient) {
   );
 }
 function createMutation(options, queryClient) {
-  const client = exports.useQueryClient(queryClient?.());
+  const client = solidJs.createMemo(() => exports.useQueryClient(queryClient?.()));
   const observer = new queryCore.MutationObserver(
-    client,
+    client(),
     options()
   );
   const mutate = (variables, mutateOptions) => {
@@ -304,43 +329,114 @@ function useIsMutating(filters, queryClient) {
   return mutations;
 }
 function createQueries(queriesOptions, queryClient) {
-  const client = exports.useQueryClient(queryClient?.());
-  const defaultedQueries = queriesOptions().queries.map((options) => {
-    const defaultedOptions = client.defaultQueryOptions(options);
-    defaultedOptions._optimisticResults = "optimistic";
-    return defaultedOptions;
-  });
+  const client = solidJs.createMemo(() => exports.useQueryClient(queryClient?.()));
+  const isRestoring = exports.useIsRestoring();
+  const defaultedQueries = solidJs.createMemo(
+    () => queriesOptions().queries.map(
+      (options) => solidJs.mergeProps(client().defaultQueryOptions(options), {
+        get _optimisticResults() {
+          return isRestoring() ? "isRestoring" : "optimistic";
+        }
+      })
+    )
+  );
   const observer = new queryCore.QueriesObserver(
-    client,
-    defaultedQueries,
+    client(),
+    defaultedQueries(),
     queriesOptions().combine ? {
       combine: queriesOptions().combine
     } : void 0
   );
   const [state, setState] = store.createStore(
-    observer.getOptimisticResult(defaultedQueries)[1]()
+    observer.getOptimisticResult(defaultedQueries())[1]()
   );
-  const unsubscribe = observer.subscribe((result) => {
-    queryCore.notifyManager.batchCalls(() => {
-      setState(store.unwrap(result));
-    })();
+  solidJs.createRenderEffect(
+    solidJs.on(
+      () => queriesOptions().queries.length,
+      () => setState(observer.getOptimisticResult(defaultedQueries())[1]())
+    )
+  );
+  const dataResources = solidJs.createMemo(
+    solidJs.on(
+      () => state.length,
+      () => state.map((queryRes) => {
+        const dataPromise = () => new Promise((resolve) => {
+          if (queryRes.isFetching && queryRes.isLoading)
+            return;
+          resolve(store.unwrap(queryRes.data));
+        });
+        return solidJs.createResource(dataPromise);
+      })
+    )
+  );
+  solidJs.batch(() => {
+    const dataResources_ = dataResources();
+    for (let index = 0; index < dataResources_.length; index++) {
+      const dataResource = dataResources_[index];
+      dataResource[1].mutate(() => store.unwrap(state[index].data));
+      dataResource[1].refetch();
+    }
+  });
+  let taskQueue = [];
+  const subscribeToObserver = () => observer.subscribe((result) => {
+    taskQueue.push(() => {
+      solidJs.batch(() => {
+        const dataResources_ = dataResources();
+        for (let index = 0; index < dataResources_.length; index++) {
+          const dataResource = dataResources_[index];
+          const unwrappedResult = { ...store.unwrap(result[index]) };
+          setState(index, store.unwrap(unwrappedResult));
+          dataResource[1].mutate(() => store.unwrap(state[index].data));
+          dataResource[1].refetch();
+        }
+      });
+    });
+    queueMicrotask(() => {
+      const taskToRun = taskQueue.pop();
+      if (taskToRun)
+        taskToRun();
+      taskQueue = [];
+    });
+  });
+  let unsubscribe = () => void 0;
+  solidJs.createComputed((cleanup) => {
+    cleanup?.();
+    unsubscribe = isRestoring() ? () => void 0 : subscribeToObserver();
+    return () => queueMicrotask(unsubscribe);
   });
   solidJs.onCleanup(unsubscribe);
+  solidJs.onMount(() => {
+    observer.setQueries(
+      defaultedQueries(),
+      queriesOptions().combine ? {
+        combine: queriesOptions().combine
+      } : void 0,
+      { listeners: false }
+    );
+  });
   solidJs.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] = store.createStore(getProxies());
+  solidJs.createRenderEffect(() => setProxifiedState(getProxies()));
+  return proxifiedState;
 }
 
 exports.createInfiniteQuery = createInfiniteQuery;