@tanstack/solid-query 5.94.5 → 6.0.0-alpha.1

package/build/dev.cjs

@@ -2,11 +2,10 @@
 
 var queryCore = require('@tanstack/query-core');
 var solidJs = require('solid-js');
-var web = require('solid-js/web');
-var store = require('solid-js/store');
+var web = require('@solidjs/web');
 
 // src/useQuery.ts
-exports.QueryClientContext = solidJs.createContext(void 0);
+exports.QueryClientContext = solidJs.createContext(null);
 exports.useQueryClient = (queryClient) => {
   if (queryClient) {
     return queryClient;
@@ -18,32 +17,41 @@ exports.useQueryClient = (queryClient) => {
   return client();
 };
 exports.QueryClientProvider = (props) => {
-  solidJs.createRenderEffect((unmount) => {
-    unmount?.();
-    props.client.mount();
-    return props.client.unmount.bind(props.client);
-  });
+  props.client.mount();
   solidJs.onCleanup(() => props.client.unmount());
-  return web.createComponent(exports.QueryClientContext.Provider, {
+  return web.createComponent(exports.QueryClientContext, {
     value: () => props.client,
     get children() {
       return props.children;
     }
   });
 };
-var IsRestoringContext = solidJs.createContext(() => false);
-exports.useIsRestoring = () => solidJs.useContext(IsRestoringContext);
-exports.IsRestoringProvider = IsRestoringContext.Provider;
+exports.IsRestoringContext = solidJs.createContext(() => false);
+exports.useIsRestoring = () => solidJs.useContext(exports.IsRestoringContext);
 
 // src/useBaseQuery.ts
-function reconcileFn(store$1, result, reconcileOption, queryHash) {
-  if (reconcileOption === false) return result;
+var isServer = typeof window === "undefined";
+function _stripFnsForSSR(obj) {
+  if (!isServer) return obj;
+  const out = {};
+  for (const k of Object.keys(obj)) {
+    if (k === "refetch" || k === "fetchNextPage" || k === "fetchPreviousPage") {
+      out[k] = void 0;
+    } else {
+      out[k] = obj[k];
+    }
+  }
+  return out;
+}
+function reconcileFn(store, result, reconcileOption, queryHash) {
   if (typeof reconcileOption === "function") {
-    const newData2 = reconcileOption(store$1.data, result.data);
-    return { ...result, data: newData2 };
+    const newData = reconcileOption(store.data, result.data);
+    return { ...result, data: newData };
   }
+  if (reconcileOption === false) return result;
+  const key = reconcileOption;
   let data = result.data;
-  if (store$1.data === void 0) {
+  if (store.data === void 0) {
     try {
       data = structuredClone(data);
     } catch (error) {
@@ -58,13 +66,16 @@ function reconcileFn(store$1, result, reconcileOption, queryHash) {
       }
     }
   }
-  const newData = store.reconcile(data, { key: reconcileOption })(store$1.data);
-  return { ...result, data: newData };
+  if (store.data !== void 0 && data !== void 0) {
+    solidJs.reconcile(data, key)(store.data);
+    return { ...result, data: store.data };
+  }
+  return { ...result, data };
 }
 var hydratableObserverResult = (query, result) => {
-  if (!web.isServer) return result;
+  if (!isServer) return result;
   const obj = {
-    ...store.unwrap(result),
+    ...solidJs.snapshot(result),
     // During SSR, functions cannot be serialized, so we need to remove them
     // This is safe because we will add these functions back when the query is hydrated
     refetch: void 0
@@ -89,23 +100,29 @@ function useBaseQuery(options, Observer, queryClient) {
     const defaultOptions = client().defaultQueryOptions(options());
     defaultOptions._optimisticResults = isRestoring() ? "isRestoring" : "optimistic";
     defaultOptions.structuralSharing = false;
-    if (web.isServer) {
+    if (isServer) {
       defaultOptions.retry = false;
       defaultOptions.throwOnError = true;
       defaultOptions.experimental_prefetchInRender = true;
     }
     return defaultOptions;
   });
-  const initialOptions = defaultedOptions();
-  const [observer, setObserver] = solidJs.createSignal(
-    new Observer(client(), defaultedOptions())
+  const observer = new Observer(client(), defaultedOptions());
+  const trackedDefaultedOptions = solidJs.createMemo(() => defaultedOptions());
+  solidJs.createRenderEffect(
+    () => trackedDefaultedOptions(),
+    (opts) => {
+      observer.setOptions(opts);
+    }
+  );
+  let observerResult = observer.getOptimisticResult(defaultedOptions());
+  const [state, setState] = solidJs.createStore(
+    _stripFnsForSSR(observerResult)
   );
-  let observerResult = observer().getOptimisticResult(defaultedOptions());
-  const [state, setState] = store.createStore(observerResult);
   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 = hydratableObserverResult(query, result);
         if (result.data !== void 0 && unwrappedResult.isError) {
           reject(unwrappedResult.error);
@@ -124,133 +141,74 @@ function useBaseQuery(options, Observer, queryClient) {
     }
   };
   const createClientSubscriber = () => {
-    const obs = observer();
-    return obs.subscribe((result) => {
+    return observer.subscribe((result) => {
+      const previousResult = observerResult;
       observerResult = result;
+      setStateWithReconciliation(result);
       queueMicrotask(() => {
-        if (unsubscribe) {
-          refetch();
+        if (unsubscribe && !disposed && (previousResult.isLoading !== result.isLoading || previousResult.isError !== result.isError)) {
+          try {
+            solidJs.refresh(queryResource);
+          } catch {
+          }
         }
       });
     });
   };
   function setStateWithReconciliation(res) {
-    const opts = observer().options;
+    const opts = observer.options;
     const reconcileOptions = opts.reconcile;
+    const sanitized = _stripFnsForSSR(res);
     setState((store) => {
       return reconcileFn(
         store,
-        res,
+        sanitized,
         reconcileOptions === void 0 ? false : reconcileOptions,
         opts.queryHash
       );
     });
   }
-  function createDeepSignal() {
-    return [
-      () => state,
-      (v) => {
-        const unwrapped = store.unwrap(state);
-        if (typeof v === "function") {
-          v = v(unwrapped);
-        }
-        if (v?.hydrationData) {
-          const { hydrationData, ...rest } = v;
-          v = rest;
-        }
-        setStateWithReconciliation(v);
-      }
-    ];
-  }
   let unsubscribe = null;
+  let disposed = false;
   let resolver = null;
-  const [queryResource, { refetch }] = solidJs.createResource(
+  const queryResource = solidJs.createMemo(
     () => {
-      const obs = observer();
+      const opts = trackedDefaultedOptions();
+      const restoring = isRestoring();
       return new Promise((resolve, reject) => {
         resolver = resolve;
-        if (web.isServer) {
-          unsubscribe = createServerSubscriber(resolve, reject);
-        } else if (!unsubscribe && !isRestoring()) {
+        if (isServer) {
+          unsubscribe = createServerSubscriber((data) => {
+            resolve(data);
+          }, reject);
+        } else if (!unsubscribe && !restoring) {
           unsubscribe = createClientSubscriber();
         }
-        obs.updateResult();
-        if (observerResult.isError && !observerResult.isFetching && !isRestoring() && queryCore.shouldThrowError(obs.options.throwOnError, [
-          observerResult.error,
-          obs.getCurrentQuery()
+        const currentResult = observer.getOptimisticResult(opts);
+        observerResult = currentResult;
+        if (currentResult.isError && !currentResult.isFetching && !restoring && queryCore.shouldThrowError(opts.throwOnError, [
+          currentResult.error,
+          observer.getCurrentQuery()
         ])) {
-          setStateWithReconciliation(observerResult);
-          return reject(observerResult.error);
+          setStateWithReconciliation(currentResult);
+          return reject(currentResult.error);
         }
-        if (!observerResult.isLoading) {
+        if (!currentResult.isLoading) {
           resolver = null;
+          setStateWithReconciliation(currentResult);
           return resolve(
-            hydratableObserverResult(obs.getCurrentQuery(), observerResult)
+            hydratableObserverResult(observer.getCurrentQuery(), currentResult)
           );
         }
-        setStateWithReconciliation(observerResult);
+        queueMicrotask(() => setStateWithReconciliation(currentResult));
       });
     },
-    {
-      storage: createDeepSignal,
-      get deferStream() {
-        return options().deferStream;
-      },
-      /**
-       * If this resource was populated on the server (either sync render, or streamed in over time), onHydrated
-       * will be called. This is the point at which we can hydrate the query cache state, and setup the query subscriber.
-       *
-       * Leveraging onHydrated allows us to plug into the async and streaming support that solidjs resources already support.
-       *
-       * Note that this is only invoked on the client, for queries that were originally run on the server.
-       */
-      onHydrated(_k, info) {
-        if (info.value && "hydrationData" in info.value) {
-          queryCore.hydrate(client(), {
-            // @ts-expect-error - hydrationData is not correctly typed internally
-            queries: [{ ...info.value.hydrationData }]
-          });
-        }
-        if (unsubscribe) return;
-        const newOptions = { ...initialOptions };
-        if ((initialOptions.staleTime || !initialOptions.initialData) && info.value) {
-          newOptions.refetchOnMount = false;
-        }
-        observer().setOptions(newOptions);
-        setStateWithReconciliation(observer().getOptimisticResult(newOptions));
-        unsubscribe = createClientSubscriber();
-      }
-    }
-  );
-  solidJs.createComputed(
-    solidJs.on(
-      client,
-      (c) => {
-        if (unsubscribe) {
-          unsubscribe();
-        }
-        const newObserver = new Observer(c, defaultedOptions());
-        unsubscribe = createClientSubscriber();
-        setObserver(newObserver);
-      },
-      {
-        defer: true
-      }
-    )
-  );
-  solidJs.createComputed(
-    solidJs.on(
-      isRestoring,
-      (restoring) => {
-        if (!restoring && !web.isServer) {
-          refetch();
-        }
-      },
-      { defer: true }
-    )
+    observerResult,
+    { ssrSource: "client" }
   );
   solidJs.onCleanup(() => {
-    if (web.isServer && queryResource.loading) {
+    disposed = true;
+    if (isServer && solidJs.isPending(queryResource)) {
       unsubscribeQueued = true;
       return;
     }
@@ -258,34 +216,36 @@ function useBaseQuery(options, Observer, queryClient) {
       unsubscribe();
       unsubscribe = null;
     }
-    if (resolver && !web.isServer) {
+    if (resolver && !isServer) {
       resolver(observerResult);
       resolver = null;
     }
   });
-  solidJs.createComputed(
-    solidJs.on(
-      [observer, defaultedOptions],
-      ([obs, opts]) => {
-        obs.setOptions(opts);
-        setStateWithReconciliation(obs.getOptimisticResult(opts));
-        refetch();
-      },
-      { defer: true }
-    )
-  );
-  const handler = {
-    get(target, prop) {
-      if (prop === "data") {
-        if (state.data !== void 0) {
-          return queryResource.latest?.data;
-        }
-        return queryResource()?.data;
+  const errorPassthroughProps = /* @__PURE__ */ new Set([
+    "error",
+    "isError",
+    "failureCount",
+    "failureReason",
+    "errorUpdateCount",
+    "errorUpdatedAt"
+  ]);
+  return new Proxy(state, {
+    get(target, prop, receiver) {
+      if (typeof prop === "symbol") {
+        return Reflect.get(target, prop, receiver);
+      }
+      if (errorPassthroughProps.has(prop)) {
+        return Reflect.get(target, prop, receiver);
       }
-      return Reflect.get(target, prop);
+      if (state.isError && !state.isFetching && queryCore.shouldThrowError(observer.options.throwOnError, [
+        state.error,
+        observer.getCurrentQuery()
+      ])) {
+        throw state.error;
+      }
+      return Reflect.get(target, prop, receiver);
     }
-  };
-  return new Proxy(state, handler);
+  });
 }
 
 // src/useQuery.ts
@@ -306,35 +266,36 @@ function useInfiniteQuery(options, queryClient) {
 function useMutation(options, queryClient) {
   const client = solidJs.createMemo(() => exports.useQueryClient(queryClient?.()));
   const observer = new queryCore.MutationObserver(client(), options());
+  solidJs.createMemo(() => {
+    observer.setOptions(options());
+  });
   const mutate = (variables, mutateOptions) => {
     observer.mutate(variables, mutateOptions).catch(queryCore.noop);
   };
-  const [state, setState] = store.createStore({
+  const [state, setState] = solidJs.createStore({
     ...observer.getCurrentResult(),
     mutate,
     mutateAsync: observer.getCurrentResult().mutate
   });
-  solidJs.createComputed(() => {
-    observer.setOptions(options());
-  });
-  solidJs.createComputed(
-    solidJs.on(
-      () => state.status,
-      () => {
-        if (state.isError && queryCore.shouldThrowError(observer.options.throwOnError, [state.error])) {
-          throw state.error;
-        }
-      }
-    )
-  );
   const unsubscribe = observer.subscribe((result) => {
-    setState({
+    setState(() => ({
       ...result,
       mutate,
       mutateAsync: result.mutate
-    });
+    }));
   });
   solidJs.onCleanup(unsubscribe);
+  solidJs.createRenderEffect(
+    () => {
+      const isError = state.isError;
+      const error = state.error;
+      if (isError && queryCore.shouldThrowError(observer.options.throwOnError, [error])) {
+        throw error;
+      }
+    },
+    () => {
+    }
+  );
   return state;
 }
 function useQueries(queriesOptions, queryClient) {
@@ -342,14 +303,11 @@ function useQueries(queriesOptions, queryClient) {
   const isRestoring = exports.useIsRestoring();
   const defaultedQueries = solidJs.createMemo(
     () => queriesOptions().queries.map(
-      (options) => solidJs.mergeProps(
-        client().defaultQueryOptions(options),
-        {
-          get _optimisticResults() {
-            return isRestoring() ? "isRestoring" : "optimistic";
-          }
+      (options) => solidJs.merge(client().defaultQueryOptions(options), {
+        get _optimisticResults() {
+          return isRestoring() ? "isRestoring" : "optimistic";
         }
-      )
+      })
     )
   );
   const observer = new queryCore.QueriesObserver(
@@ -359,100 +317,47 @@ function useQueries(queriesOptions, queryClient) {
       combine: queriesOptions().combine
     } : void 0
   );
-  const [state, setState] = store.createStore(
-    observer.getOptimisticResult(
-      defaultedQueries(),
-      queriesOptions().combine
-    )[1]()
+  const [, getCombinedResult] = observer.getOptimisticResult(
+    defaultedQueries(),
+    queriesOptions().combine
   );
-  solidJs.createRenderEffect(
-    solidJs.on(
-      () => queriesOptions().queries.length,
-      () => setState(
-        observer.getOptimisticResult(
-          defaultedQueries(),
-          queriesOptions().combine
-        )[1]()
-      )
-    )
+  const initialResult = getCombinedResult();
+  const [state, setState] = solidJs.createStore(
+    Array.isArray(initialResult) ? initialResult : [initialResult]
   );
-  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));
+  let unsubscribe = queryCore.noop;
+  solidJs.createEffect(
+    () => {
+      if (!isRestoring()) {
+        unsubscribe = observer.subscribe((result) => {
+          setState(
+            solidJs.reconcile(
+              [...result],
+              // Use a key function that returns undefined so reconcile
+              // uses positional matching and recursively updates nested properties
+              () => void 0
+            )
+          );
         });
-        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();
+      }
+    },
+    () => {
     }
+  );
+  solidJs.onCleanup(() => {
+    unsubscribe();
   });
-  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 = queryCore.noop;
-  solidJs.createComputed((cleanup) => {
-    cleanup?.();
-    unsubscribe = isRestoring() ? queryCore.noop : subscribeToObserver();
-    return () => queueMicrotask(unsubscribe);
-  });
-  solidJs.onCleanup(unsubscribe);
-  solidJs.onMount(() => {
-    observer.setQueries(
-      defaultedQueries(),
-      queriesOptions().combine ? {
-        combine: queriesOptions().combine
-      } : void 0
-    );
-  });
-  solidJs.createComputed(() => {
+  solidJs.createMemo(() => {
+    const queries = defaultedQueries();
     observer.setQueries(
-      defaultedQueries(),
+      queries,
       queriesOptions().combine ? {
         combine: queriesOptions().combine
       } : void 0
     );
+    return queries;
   });
-  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 [proxyState, setProxyState] = store.createStore(getProxies());
-  solidJs.createRenderEffect(() => setProxyState(getProxies()));
-  return proxyState;
+  return state;
 }
 exports.QueryClient = class QueryClient extends queryCore.QueryClient {
   constructor(config = {}) {
@@ -507,18 +412,16 @@ function useMutationState(options = () => ({}), queryClient) {
   const [result, setResult] = solidJs.createSignal(
     getResult(mutationCache(), options())
   );
-  solidJs.createEffect(() => {
-    const unsubscribe = mutationCache().subscribe(() => {
+  const unsubscribe = mutationCache().subscribe(() => {
+    setResult((prev) => {
       const nextResult = queryCore.replaceEqualDeep(
-        result(),
+        prev,
         getResult(mutationCache(), options())
       );
-      if (result() !== nextResult) {
-        setResult(nextResult);
-      }
+      return prev === nextResult ? prev : nextResult;
     });
-    solidJs.onCleanup(unsubscribe);
   });
+  solidJs.onCleanup(unsubscribe);
   return result;
 }
 

package/build/dev.d.cts

@@ -60,7 +60,7 @@ export { createMutationState } from './_tsup-dts-rollup.cjs';
 export { useQueries } from './_tsup-dts-rollup.cjs';
 export { createQueries } from './_tsup-dts-rollup.cjs';
 export { useIsRestoring } from './_tsup-dts-rollup.cjs';
-export { IsRestoringProvider } from './_tsup-dts-rollup.cjs';
+export { IsRestoringContext } from './_tsup-dts-rollup.cjs';
 export { focusManager } from './_tsup-dts-rollup.cjs';
 export { environmentManager } from './_tsup-dts-rollup.cjs';
 export { defaultShouldDehydrateMutation } from './_tsup-dts-rollup.cjs';

package/build/dev.d.ts

@@ -60,7 +60,7 @@ export { createMutationState } from './_tsup-dts-rollup.js';
 export { useQueries } from './_tsup-dts-rollup.js';
 export { createQueries } from './_tsup-dts-rollup.js';
 export { useIsRestoring } from './_tsup-dts-rollup.js';
-export { IsRestoringProvider } from './_tsup-dts-rollup.js';
+export { IsRestoringContext } from './_tsup-dts-rollup.js';
 export { focusManager } from './_tsup-dts-rollup.js';
 export { environmentManager } from './_tsup-dts-rollup.js';
 export { defaultShouldDehydrateMutation } from './_tsup-dts-rollup.js';