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

package/build/index.js

@@ -1,11 +1,10 @@
-import { MutationObserver, shouldThrowError, QueriesObserver, noop, QueryClient as QueryClient$1, replaceEqualDeep, hydrate, notifyManager, QueryObserver, InfiniteQueryObserver } from '@tanstack/query-core';
+import { MutationObserver, shouldThrowError, QueriesObserver, QueryClient as QueryClient$1, replaceEqualDeep, noop, notifyManager, QueryObserver, InfiniteQueryObserver } from '@tanstack/query-core';
 export * from '@tanstack/query-core';
-import { createContext, useContext, createRenderEffect, onCleanup, createMemo, createComputed, on, mergeProps, createResource, batch, onMount, createSignal, createEffect } from 'solid-js';
-import { createComponent, isServer } from 'solid-js/web';
-import { createStore, unwrap, reconcile } from 'solid-js/store';
+import { createContext, useContext, onCleanup, createMemo, createStore, createRenderEffect, merge, createEffect, reconcile, createSignal, isPending, refresh, snapshot } from 'solid-js';
+import { createComponent } from '@solidjs/web';
 
 // src/useQuery.ts
-var QueryClientContext = createContext(void 0);
+var QueryClientContext = createContext(null);
 var useQueryClient = (queryClient) => {
   if (queryClient) {
     return queryClient;
@@ -17,13 +16,9 @@ var useQueryClient = (queryClient) => {
   return client();
 };
 var QueryClientProvider = (props) => {
-  createRenderEffect((unmount) => {
-    unmount?.();
-    props.client.mount();
-    return props.client.unmount.bind(props.client);
-  });
+  props.client.mount();
   onCleanup(() => props.client.unmount());
-  return createComponent(QueryClientContext.Provider, {
+  return createComponent(QueryClientContext, {
     value: () => props.client,
     get children() {
       return props.children;
@@ -32,15 +27,28 @@ var QueryClientProvider = (props) => {
 };
 var IsRestoringContext = createContext(() => false);
 var useIsRestoring = () => useContext(IsRestoringContext);
-var IsRestoringProvider = IsRestoringContext.Provider;
 
 // src/useBaseQuery.ts
+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 (reconcileOption === false) return result;
   if (typeof reconcileOption === "function") {
-    const newData2 = reconcileOption(store.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.data === void 0) {
     try {
@@ -48,13 +56,16 @@ function reconcileFn(store, result, reconcileOption, queryHash) {
     } catch (error) {
     }
   }
-  const newData = reconcile(data, { key: reconcileOption })(store.data);
-  return { ...result, data: newData };
+  if (store.data !== void 0 && data !== void 0) {
+    reconcile(data, key)(store.data);
+    return { ...result, data: store.data };
+  }
+  return { ...result, data };
 }
 var hydratableObserverResult = (query, result) => {
   if (!isServer) return result;
   const obj = {
-    ...unwrap(result),
+    ...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
@@ -86,16 +97,22 @@ function useBaseQuery(options, Observer, queryClient) {
     }
     return defaultOptions;
   });
-  const initialOptions = defaultedOptions();
-  const [observer, setObserver] = createSignal(
-    new Observer(client(), defaultedOptions())
+  const observer = new Observer(client(), defaultedOptions());
+  const trackedDefaultedOptions = createMemo(() => defaultedOptions());
+  createRenderEffect(
+    () => trackedDefaultedOptions(),
+    (opts) => {
+      observer.setOptions(opts);
+    }
+  );
+  let observerResult = observer.getOptimisticResult(defaultedOptions());
+  const [state, setState] = createStore(
+    _stripFnsForSSR(observerResult)
   );
-  let observerResult = observer().getOptimisticResult(defaultedOptions());
-  const [state, setState] = createStore(observerResult);
   const createServerSubscriber = (resolve, reject) => {
-    return observer().subscribe((result) => {
+    return observer.subscribe((result) => {
       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);
@@ -114,133 +131,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 {
+            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 = 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 }] = createResource(
+  const queryResource = createMemo(
     () => {
-      const obs = observer();
+      const opts = trackedDefaultedOptions();
+      const restoring = isRestoring();
       return new Promise((resolve, reject) => {
         resolver = resolve;
         if (isServer) {
-          unsubscribe = createServerSubscriber(resolve, reject);
-        } else if (!unsubscribe && !isRestoring()) {
+          unsubscribe = createServerSubscriber((data) => {
+            resolve(data);
+          }, reject);
+        } else if (!unsubscribe && !restoring) {
           unsubscribe = createClientSubscriber();
         }
-        obs.updateResult();
-        if (observerResult.isError && !observerResult.isFetching && !isRestoring() && shouldThrowError(obs.options.throwOnError, [
-          observerResult.error,
-          obs.getCurrentQuery()
+        const currentResult = observer.getOptimisticResult(opts);
+        observerResult = currentResult;
+        if (currentResult.isError && !currentResult.isFetching && !restoring && 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) {
-          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();
-      }
-    }
-  );
-  createComputed(
-    on(
-      client,
-      (c) => {
-        if (unsubscribe) {
-          unsubscribe();
-        }
-        const newObserver = new Observer(c, defaultedOptions());
-        unsubscribe = createClientSubscriber();
-        setObserver(newObserver);
-      },
-      {
-        defer: true
-      }
-    )
-  );
-  createComputed(
-    on(
-      isRestoring,
-      (restoring) => {
-        if (!restoring && !isServer) {
-          refetch();
-        }
-      },
-      { defer: true }
-    )
+    observerResult,
+    { ssrSource: "client" }
   );
   onCleanup(() => {
-    if (isServer && queryResource.loading) {
+    disposed = true;
+    if (isServer && isPending(queryResource)) {
       unsubscribeQueued = true;
       return;
     }
@@ -253,29 +211,31 @@ function useBaseQuery(options, Observer, queryClient) {
       resolver = null;
     }
   });
-  createComputed(
-    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);
+      }
+      if (state.isError && !state.isFetching && shouldThrowError(observer.options.throwOnError, [
+        state.error,
+        observer.getCurrentQuery()
+      ])) {
+        throw state.error;
       }
-      return Reflect.get(target, prop);
+      return Reflect.get(target, prop, receiver);
     }
-  };
-  return new Proxy(state, handler);
+  });
 }
 
 // src/useQuery.ts
@@ -296,6 +256,9 @@ function useInfiniteQuery(options, queryClient) {
 function useMutation(options, queryClient) {
   const client = createMemo(() => useQueryClient(queryClient?.()));
   const observer = new MutationObserver(client(), options());
+  createMemo(() => {
+    observer.setOptions(options());
+  });
   const mutate = (variables, mutateOptions) => {
     observer.mutate(variables, mutateOptions).catch(noop);
   };
@@ -304,27 +267,25 @@ function useMutation(options, queryClient) {
     mutate,
     mutateAsync: observer.getCurrentResult().mutate
   });
-  createComputed(() => {
-    observer.setOptions(options());
-  });
-  createComputed(
-    on(
-      () => state.status,
-      () => {
-        if (state.isError && shouldThrowError(observer.options.throwOnError, [state.error])) {
-          throw state.error;
-        }
-      }
-    )
-  );
   const unsubscribe = observer.subscribe((result) => {
-    setState({
+    setState(() => ({
       ...result,
       mutate,
       mutateAsync: result.mutate
-    });
+    }));
   });
   onCleanup(unsubscribe);
+  createRenderEffect(
+    () => {
+      const isError = state.isError;
+      const error = state.error;
+      if (isError && shouldThrowError(observer.options.throwOnError, [error])) {
+        throw error;
+      }
+    },
+    () => {
+    }
+  );
   return state;
 }
 function useQueries(queriesOptions, queryClient) {
@@ -332,14 +293,11 @@ function useQueries(queriesOptions, queryClient) {
   const isRestoring = useIsRestoring();
   const defaultedQueries = createMemo(
     () => queriesOptions().queries.map(
-      (options) => mergeProps(
-        client().defaultQueryOptions(options),
-        {
-          get _optimisticResults() {
-            return isRestoring() ? "isRestoring" : "optimistic";
-          }
+      (options) => merge(client().defaultQueryOptions(options), {
+        get _optimisticResults() {
+          return isRestoring() ? "isRestoring" : "optimistic";
         }
-      )
+      })
     )
   );
   const observer = new QueriesObserver(
@@ -349,100 +307,47 @@ function useQueries(queriesOptions, queryClient) {
       combine: queriesOptions().combine
     } : void 0
   );
-  const [state, setState] = createStore(
-    observer.getOptimisticResult(
-      defaultedQueries(),
-      queriesOptions().combine
-    )[1]()
+  const [, getCombinedResult] = observer.getOptimisticResult(
+    defaultedQueries(),
+    queriesOptions().combine
   );
-  createRenderEffect(
-    on(
-      () => queriesOptions().queries.length,
-      () => setState(
-        observer.getOptimisticResult(
-          defaultedQueries(),
-          queriesOptions().combine
-        )[1]()
-      )
-    )
+  const initialResult = getCombinedResult();
+  const [state, setState] = createStore(
+    Array.isArray(initialResult) ? initialResult : [initialResult]
   );
-  const dataResources = createMemo(
-    on(
-      () => state.length,
-      () => state.map((queryRes) => {
-        const dataPromise = () => new Promise((resolve) => {
-          if (queryRes.isFetching && queryRes.isLoading) return;
-          resolve(unwrap(queryRes.data));
+  let unsubscribe = noop;
+  createEffect(
+    () => {
+      if (!isRestoring()) {
+        unsubscribe = observer.subscribe((result) => {
+          setState(
+            reconcile(
+              [...result],
+              // Use a key function that returns undefined so reconcile
+              // uses positional matching and recursively updates nested properties
+              () => void 0
+            )
+          );
         });
-        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();
+      }
+    },
+    () => {
     }
+  );
+  onCleanup(() => {
+    unsubscribe();
   });
-  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 = noop;
-  createComputed((cleanup) => {
-    cleanup?.();
-    unsubscribe = isRestoring() ? noop : subscribeToObserver();
-    return () => queueMicrotask(unsubscribe);
-  });
-  onCleanup(unsubscribe);
-  onMount(() => {
-    observer.setQueries(
-      defaultedQueries(),
-      queriesOptions().combine ? {
-        combine: queriesOptions().combine
-      } : void 0
-    );
-  });
-  createComputed(() => {
+  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] = createStore(getProxies());
-  createRenderEffect(() => setProxyState(getProxies()));
-  return proxyState;
+  return state;
 }
 var QueryClient = class extends QueryClient$1 {
   constructor(config = {}) {
@@ -497,18 +402,16 @@ function useMutationState(options = () => ({}), queryClient) {
   const [result, setResult] = createSignal(
     getResult(mutationCache(), options())
   );
-  createEffect(() => {
-    const unsubscribe = mutationCache().subscribe(() => {
+  const unsubscribe = mutationCache().subscribe(() => {
+    setResult((prev) => {
       const nextResult = replaceEqualDeep(
-        result(),
+        prev,
         getResult(mutationCache(), options())
       );
-      if (result() !== nextResult) {
-        setResult(nextResult);
-      }
+      return prev === nextResult ? prev : nextResult;
     });
-    onCleanup(unsubscribe);
   });
+  onCleanup(unsubscribe);
   return result;
 }
 
@@ -518,4 +421,4 @@ var createInfiniteQuery = useInfiniteQuery;
 var createMutation = useMutation;
 var createQueries = useQueries;
 
-export { IsRestoringProvider, QueryClient, QueryClientContext, QueryClientProvider, createInfiniteQuery, useIsFetching as createIsFetching, useIsMutating as createIsMutating, createMutation, useMutationState as createMutationState, createQueries, createQuery, infiniteQueryOptions, mutationOptions, queryOptions, useInfiniteQuery, useIsFetching, useIsMutating, useIsRestoring, useMutation, useMutationState, useQueries, useQuery, useQueryClient };
+export { IsRestoringContext, QueryClient, QueryClientContext, QueryClientProvider, createInfiniteQuery, useIsFetching as createIsFetching, useIsMutating as createIsMutating, createMutation, useMutationState as createMutationState, createQueries, createQuery, infiniteQueryOptions, mutationOptions, queryOptions, useInfiniteQuery, useIsFetching, useIsMutating, useIsRestoring, useMutation, useMutationState, useQueries, useQuery, useQueryClient };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query",
-  "version": "5.94.5",
+  "version": "6.0.0-alpha.1",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -46,18 +46,22 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-core": "5.94.5"
+    "@tanstack/query-core": "5.91.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-typescript": "^7.18.6",
     "@solidjs/testing-library": "^0.8.10",
+    "@solidjs/web": "2.0.0-beta.4",
+    "babel-preset-solid": "2.0.0-beta.4",
     "npm-run-all2": "^5.0.0",
-    "solid-js": "^1.9.7",
+    "solid-js": "2.0.0-beta.4",
     "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "^2.11.6",
+    "vite-plugin-solid": "3.0.0-next.2",
     "@tanstack/query-test-utils": "0.0.0"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.0"
+    "solid-js": ">=2.0.0-beta.0 <3.0.0"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",

package/src/QueryClientProvider.tsx

@@ -1,15 +1,10 @@
-import {
-  createContext,
-  createRenderEffect,
-  onCleanup,
-  useContext,
-} from 'solid-js'
+import { createContext, 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) | null>(
+  null,
+)
 
 export const useQueryClient = (queryClient?: QueryClient) => {
   if (queryClient) {
@@ -32,16 +27,12 @@ export type QueryClientProviderProps = {
 export const QueryClientProvider = (
   props: QueryClientProviderProps,
 ): JSX.Element => {
-  createRenderEffect<() => void>((unmount) => {
-    unmount?.()
-    props.client.mount()
-    return props.client.unmount.bind(props.client)
-  })
+  props.client.mount()
   onCleanup(() => props.client.unmount())
 
   return (
-    <QueryClientContext.Provider value={() => props.client}>
+    <QueryClientContext value={() => props.client}>
       {props.children}
-    </QueryClientContext.Provider>
+    </QueryClientContext>
   )
 }

package/src/index.ts

@@ -84,4 +84,4 @@ export { useMutationState } from './useMutationState'
 export { useMutationState as createMutationState } from './useMutationState'
 export { useQueries } from './useQueries'
 export const createQueries = useQueries
-export { useIsRestoring, IsRestoringProvider } from './isRestoring'
+export { useIsRestoring, IsRestoringContext } from './isRestoring'

package/src/isRestoring.ts

@@ -1,7 +1,6 @@
 import { createContext, useContext } from 'solid-js'
 import type { Accessor } from 'solid-js'
 
-const IsRestoringContext = createContext<Accessor<boolean>>(() => false)
+export const IsRestoringContext = createContext<Accessor<boolean>>(() => false)
 
 export const useIsRestoring = () => useContext(IsRestoringContext)
-export const IsRestoringProvider = IsRestoringContext.Provider