@tanstack/solid-query 5.30.2 → 5.30.4

package/build/dev.cjs

@@ -78,27 +78,23 @@ function reconcileFn(store$1, result, reconcileOption, queryHash) {
   return { ...result, data: newData };
 }
 var hydratableObserverResult = (query, result) => {
-  if (!web.isServer)
-    return result;
-  return {
+  const obj = {
     ...store.unwrap(result),
-    // cast to refetch function should be safe, since we only remove it on the server,
-    // and refetch is not relevant on the server
-    refetch: void 0,
-    // cast to fetchNextPage function should be safe, since we only remove it on the server,
-    fetchNextPage: void 0,
-    // cast to fetchPreviousPage function should be safe, since we only remove it on the server,
-    fetchPreviousPage: void 0,
-    // hydrate() expects a QueryState object, which is similar but not
-    // quite the same as a QueryObserverResult object. Thus, for now, we're
-    // copying over the missing properties from state in order to support hydration
-    dataUpdateCount: query.state.dataUpdateCount,
-    fetchFailureCount: query.state.fetchFailureCount,
-    isInvalidated: query.state.isInvalidated,
-    // Unsetting these properties on the server since they might not be serializable
-    fetchFailureReason: null,
-    fetchMeta: null
+    // 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
+  };
+  if ("fetchNextPage" in result) {
+    obj.fetchNextPage = void 0;
+    obj.fetchPreviousPage = void 0;
+  }
+  obj.hydrationData = {
+    state: query.state,
+    queryKey: query.queryKey,
+    queryHash: query.queryHash,
+    ...query.meta && { meta: query.meta }
   };
+  return obj;
 };
 function createBaseQuery(options, Observer, queryClient) {
   const client = solidJs.createMemo(() => exports.useQueryClient(queryClient?.()));
@@ -168,15 +164,21 @@ function createBaseQuery(options, Observer, queryClient) {
         if (typeof v === "function") {
           v = v(unwrapped);
         }
+        if (v.hydrationData) {
+          const { hydrationData, ...rest } = v;
+          v = rest;
+        }
         setStateWithReconciliation(v);
       }
     ];
   }
   let unsubscribe = null;
+  let resolver = null;
   const [queryResource, { refetch }] = solidJs.createResource(
     () => {
       const obs = observer();
       return new Promise((resolve, reject) => {
+        resolver = resolve;
         if (web.isServer) {
           unsubscribe = createServerSubscriber(resolve, reject);
         } else if (!unsubscribe && !isRestoring()) {
@@ -191,8 +193,8 @@ function createBaseQuery(options, Observer, queryClient) {
           return reject(observerResult.error);
         }
         if (!observerResult.isLoading) {
-          const query = obs.getCurrentQuery();
-          return resolve(hydratableObserverResult(query, observerResult));
+          resolver = null;
+          return resolve(observerResult);
         }
         setStateWithReconciliation(observerResult);
       });
@@ -211,15 +213,10 @@ 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) {
-        if (info.value) {
+        if (info.value && "hydrationData" in info.value) {
           queryCore.hydrate(client(), {
-            queries: [
-              {
-                queryKey: initialOptions.queryKey,
-                queryHash: initialOptions.queryHash,
-                state: info.value
-              }
-            ]
+            // @ts-expect-error - hydrationData is not correctly typed internally
+            queries: [{ ...info.value.hydrationData }]
           });
         }
         if (unsubscribe)
@@ -270,6 +267,10 @@ function createBaseQuery(options, Observer, queryClient) {
       unsubscribe();
       unsubscribe = null;
     }
+    if (resolver && !web.isServer) {
+      resolver(observerResult);
+      resolver = null;
+    }
   });
   solidJs.createComputed(
     solidJs.on(

package/build/dev.js

@@ -77,27 +77,23 @@ function reconcileFn(store, result, reconcileOption, queryHash) {
   return { ...result, data: newData };
 }
 var hydratableObserverResult = (query, result) => {
-  if (!isServer)
-    return result;
-  return {
+  const obj = {
     ...unwrap(result),
-    // cast to refetch function should be safe, since we only remove it on the server,
-    // and refetch is not relevant on the server
-    refetch: void 0,
-    // cast to fetchNextPage function should be safe, since we only remove it on the server,
-    fetchNextPage: void 0,
-    // cast to fetchPreviousPage function should be safe, since we only remove it on the server,
-    fetchPreviousPage: void 0,
-    // hydrate() expects a QueryState object, which is similar but not
-    // quite the same as a QueryObserverResult object. Thus, for now, we're
-    // copying over the missing properties from state in order to support hydration
-    dataUpdateCount: query.state.dataUpdateCount,
-    fetchFailureCount: query.state.fetchFailureCount,
-    isInvalidated: query.state.isInvalidated,
-    // Unsetting these properties on the server since they might not be serializable
-    fetchFailureReason: null,
-    fetchMeta: null
+    // 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
+  };
+  if ("fetchNextPage" in result) {
+    obj.fetchNextPage = void 0;
+    obj.fetchPreviousPage = void 0;
+  }
+  obj.hydrationData = {
+    state: query.state,
+    queryKey: query.queryKey,
+    queryHash: query.queryHash,
+    ...query.meta && { meta: query.meta }
   };
+  return obj;
 };
 function createBaseQuery(options, Observer, queryClient) {
   const client = createMemo(() => useQueryClient(queryClient?.()));
@@ -167,15 +163,21 @@ function createBaseQuery(options, Observer, queryClient) {
         if (typeof v === "function") {
           v = v(unwrapped);
         }
+        if (v.hydrationData) {
+          const { hydrationData, ...rest } = v;
+          v = rest;
+        }
         setStateWithReconciliation(v);
       }
     ];
   }
   let unsubscribe = null;
+  let resolver = null;
   const [queryResource, { refetch }] = createResource(
     () => {
       const obs = observer();
       return new Promise((resolve, reject) => {
+        resolver = resolve;
         if (isServer) {
           unsubscribe = createServerSubscriber(resolve, reject);
         } else if (!unsubscribe && !isRestoring()) {
@@ -190,8 +192,8 @@ function createBaseQuery(options, Observer, queryClient) {
           return reject(observerResult.error);
         }
         if (!observerResult.isLoading) {
-          const query = obs.getCurrentQuery();
-          return resolve(hydratableObserverResult(query, observerResult));
+          resolver = null;
+          return resolve(observerResult);
         }
         setStateWithReconciliation(observerResult);
       });
@@ -210,15 +212,10 @@ 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) {
-        if (info.value) {
+        if (info.value && "hydrationData" in info.value) {
           hydrate(client(), {
-            queries: [
-              {
-                queryKey: initialOptions.queryKey,
-                queryHash: initialOptions.queryHash,
-                state: info.value
-              }
-            ]
+            // @ts-expect-error - hydrationData is not correctly typed internally
+            queries: [{ ...info.value.hydrationData }]
           });
         }
         if (unsubscribe)
@@ -269,6 +266,10 @@ function createBaseQuery(options, Observer, queryClient) {
       unsubscribe();
       unsubscribe = null;
     }
+    if (resolver && !isServer) {
+      resolver(observerResult);
+      resolver = null;
+    }
   });
   createComputed(
     on(

package/build/index.cjs

@@ -69,27 +69,23 @@ function reconcileFn(store$1, result, reconcileOption, queryHash) {
   return { ...result, data: newData };
 }
 var hydratableObserverResult = (query, result) => {
-  if (!web.isServer)
-    return result;
-  return {
+  const obj = {
     ...store.unwrap(result),
-    // cast to refetch function should be safe, since we only remove it on the server,
-    // and refetch is not relevant on the server
-    refetch: void 0,
-    // cast to fetchNextPage function should be safe, since we only remove it on the server,
-    fetchNextPage: void 0,
-    // cast to fetchPreviousPage function should be safe, since we only remove it on the server,
-    fetchPreviousPage: void 0,
-    // hydrate() expects a QueryState object, which is similar but not
-    // quite the same as a QueryObserverResult object. Thus, for now, we're
-    // copying over the missing properties from state in order to support hydration
-    dataUpdateCount: query.state.dataUpdateCount,
-    fetchFailureCount: query.state.fetchFailureCount,
-    isInvalidated: query.state.isInvalidated,
-    // Unsetting these properties on the server since they might not be serializable
-    fetchFailureReason: null,
-    fetchMeta: null
+    // 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
+  };
+  if ("fetchNextPage" in result) {
+    obj.fetchNextPage = void 0;
+    obj.fetchPreviousPage = void 0;
+  }
+  obj.hydrationData = {
+    state: query.state,
+    queryKey: query.queryKey,
+    queryHash: query.queryHash,
+    ...query.meta && { meta: query.meta }
   };
+  return obj;
 };
 function createBaseQuery(options, Observer, queryClient) {
   const client = solidJs.createMemo(() => exports.useQueryClient(queryClient?.()));
@@ -159,15 +155,21 @@ function createBaseQuery(options, Observer, queryClient) {
         if (typeof v === "function") {
           v = v(unwrapped);
         }
+        if (v.hydrationData) {
+          const { hydrationData, ...rest } = v;
+          v = rest;
+        }
         setStateWithReconciliation(v);
       }
     ];
   }
   let unsubscribe = null;
+  let resolver = null;
   const [queryResource, { refetch }] = solidJs.createResource(
     () => {
       const obs = observer();
       return new Promise((resolve, reject) => {
+        resolver = resolve;
         if (web.isServer) {
           unsubscribe = createServerSubscriber(resolve, reject);
         } else if (!unsubscribe && !isRestoring()) {
@@ -182,8 +184,8 @@ function createBaseQuery(options, Observer, queryClient) {
           return reject(observerResult.error);
         }
         if (!observerResult.isLoading) {
-          const query = obs.getCurrentQuery();
-          return resolve(hydratableObserverResult(query, observerResult));
+          resolver = null;
+          return resolve(observerResult);
         }
         setStateWithReconciliation(observerResult);
       });
@@ -202,15 +204,10 @@ 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) {
-        if (info.value) {
+        if (info.value && "hydrationData" in info.value) {
           queryCore.hydrate(client(), {
-            queries: [
-              {
-                queryKey: initialOptions.queryKey,
-                queryHash: initialOptions.queryHash,
-                state: info.value
-              }
-            ]
+            // @ts-expect-error - hydrationData is not correctly typed internally
+            queries: [{ ...info.value.hydrationData }]
           });
         }
         if (unsubscribe)
@@ -261,6 +258,10 @@ function createBaseQuery(options, Observer, queryClient) {
       unsubscribe();
       unsubscribe = null;
     }
+    if (resolver && !web.isServer) {
+      resolver(observerResult);
+      resolver = null;
+    }
   });
   solidJs.createComputed(
     solidJs.on(

package/build/index.js

@@ -68,27 +68,23 @@ function reconcileFn(store, result, reconcileOption, queryHash) {
   return { ...result, data: newData };
 }
 var hydratableObserverResult = (query, result) => {
-  if (!isServer)
-    return result;
-  return {
+  const obj = {
     ...unwrap(result),
-    // cast to refetch function should be safe, since we only remove it on the server,
-    // and refetch is not relevant on the server
-    refetch: void 0,
-    // cast to fetchNextPage function should be safe, since we only remove it on the server,
-    fetchNextPage: void 0,
-    // cast to fetchPreviousPage function should be safe, since we only remove it on the server,
-    fetchPreviousPage: void 0,
-    // hydrate() expects a QueryState object, which is similar but not
-    // quite the same as a QueryObserverResult object. Thus, for now, we're
-    // copying over the missing properties from state in order to support hydration
-    dataUpdateCount: query.state.dataUpdateCount,
-    fetchFailureCount: query.state.fetchFailureCount,
-    isInvalidated: query.state.isInvalidated,
-    // Unsetting these properties on the server since they might not be serializable
-    fetchFailureReason: null,
-    fetchMeta: null
+    // 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
+  };
+  if ("fetchNextPage" in result) {
+    obj.fetchNextPage = void 0;
+    obj.fetchPreviousPage = void 0;
+  }
+  obj.hydrationData = {
+    state: query.state,
+    queryKey: query.queryKey,
+    queryHash: query.queryHash,
+    ...query.meta && { meta: query.meta }
   };
+  return obj;
 };
 function createBaseQuery(options, Observer, queryClient) {
   const client = createMemo(() => useQueryClient(queryClient?.()));
@@ -158,15 +154,21 @@ function createBaseQuery(options, Observer, queryClient) {
         if (typeof v === "function") {
           v = v(unwrapped);
         }
+        if (v.hydrationData) {
+          const { hydrationData, ...rest } = v;
+          v = rest;
+        }
         setStateWithReconciliation(v);
       }
     ];
   }
   let unsubscribe = null;
+  let resolver = null;
   const [queryResource, { refetch }] = createResource(
     () => {
       const obs = observer();
       return new Promise((resolve, reject) => {
+        resolver = resolve;
         if (isServer) {
           unsubscribe = createServerSubscriber(resolve, reject);
         } else if (!unsubscribe && !isRestoring()) {
@@ -181,8 +183,8 @@ function createBaseQuery(options, Observer, queryClient) {
           return reject(observerResult.error);
         }
         if (!observerResult.isLoading) {
-          const query = obs.getCurrentQuery();
-          return resolve(hydratableObserverResult(query, observerResult));
+          resolver = null;
+          return resolve(observerResult);
         }
         setStateWithReconciliation(observerResult);
       });
@@ -201,15 +203,10 @@ 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) {
-        if (info.value) {
+        if (info.value && "hydrationData" in info.value) {
           hydrate(client(), {
-            queries: [
-              {
-                queryKey: initialOptions.queryKey,
-                queryHash: initialOptions.queryHash,
-                state: info.value
-              }
-            ]
+            // @ts-expect-error - hydrationData is not correctly typed internally
+            queries: [{ ...info.value.hydrationData }]
           });
         }
         if (unsubscribe)
@@ -260,6 +257,10 @@ function createBaseQuery(options, Observer, queryClient) {
       unsubscribe();
       unsubscribe = null;
     }
+    if (resolver && !isServer) {
+      resolver(observerResult);
+      resolver = null;
+    }
   });
   createComputed(
     on(

package/package.json

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

package/src/createBaseQuery.ts

@@ -19,12 +19,10 @@ import type { CreateBaseQueryOptions } from './types'
 import type { Accessor, Signal } from 'solid-js'
 import type { QueryClient } from './QueryClient'
 import type {
-  InfiniteQueryObserverResult,
   Query,
   QueryKey,
   QueryObserver,
   QueryObserverResult,
-  QueryState,
 } from '@tanstack/query-core'
 
 function reconcileFn<TData, TError>(
@@ -62,10 +60,6 @@ function reconcileFn<TData, TError>(
   return { ...result, data: newData } as typeof result
 }
 
-type HydratableQueryState<TData, TError> = QueryObserverResult<TData, TError> &
-  QueryState<TData, TError> &
-  InfiniteQueryObserverResult<TData, TError>
-
 /**
  * Solid's `onHydrated` functionality will silently "fail" (hydrate with an empty object)
  * if the resource data is not serializable.
@@ -80,42 +74,29 @@ const hydratableObserverResult = <
   query: Query<TQueryFnData, TError, TData, TQueryKey>,
   result: QueryObserverResult<TDataHydratable, TError>,
 ) => {
-  // Including the extra properties is only relevant on the server
-  if (!isServer) return result as HydratableQueryState<TDataHydratable, TError>
-
-  return {
+  const obj: any = {
     ...unwrap(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: undefined,
+  }
 
-    // cast to refetch function should be safe, since we only remove it on the server,
-    // and refetch is not relevant on the server
-    refetch: undefined as unknown as HydratableQueryState<
-      TDataHydratable,
-      TError
-    >['refetch'],
-
-    // cast to fetchNextPage function should be safe, since we only remove it on the server,
-    fetchNextPage: undefined as unknown as HydratableQueryState<
-      TDataHydratable,
-      TError
-    >['fetchNextPage'],
-
-    // cast to fetchPreviousPage function should be safe, since we only remove it on the server,
-    fetchPreviousPage: undefined as unknown as HydratableQueryState<
-      TDataHydratable,
-      TError
-    >['fetchPreviousPage'],
+  // If the query is an infinite query, we need to remove additional properties
+  if ('fetchNextPage' in result) {
+    obj.fetchNextPage = undefined
+    obj.fetchPreviousPage = undefined
+  }
 
-    // hydrate() expects a QueryState object, which is similar but not
-    // quite the same as a QueryObserverResult object. Thus, for now, we're
-    // copying over the missing properties from state in order to support hydration
-    dataUpdateCount: query.state.dataUpdateCount,
-    fetchFailureCount: query.state.fetchFailureCount,
-    isInvalidated: query.state.isInvalidated,
+  // We will also attach the dehydrated state of the query to the result
+  // This will be removed on client after hydration
+  obj.hydrationData = {
+    state: query.state,
+    queryKey: query.queryKey,
+    queryHash: query.queryHash,
+    ...(query.meta && { meta: query.meta }),
+  }
 
-    // Unsetting these properties on the server since they might not be serializable
-    fetchFailureReason: null,
-    fetchMeta: null,
-  } as HydratableQueryState<TDataHydratable, TError>
+  return obj
 }
 
 // Base Query Function that is used to create the query.
@@ -132,9 +113,7 @@ export function createBaseQuery<
   Observer: typeof QueryObserver,
   queryClient?: Accessor<QueryClient>,
 ) {
-  type ResourceData =
-    | HydratableQueryState<TData, TError>
-    | QueryObserverResult<TData, TError>
+  type ResourceData = QueryObserverResult<TData, TError>
 
   const client = createMemo(() => useQueryClient(queryClient?.()))
   const isRestoring = useIsRestoring()
@@ -221,12 +200,18 @@ export function createBaseQuery<
   function createDeepSignal<T>(): Signal<T> {
     return [
       () => state,
-      (v: T) => {
+      (v: any) => {
         const unwrapped = unwrap(state)
         if (typeof v === 'function') {
           v = v(unwrapped)
         }
-        setStateWithReconciliation(v as any)
+        // Hydration data exists on first load after SSR,
+        // and should be removed from the observer result
+        if (v.hydrationData) {
+          const { hydrationData, ...rest } = v
+          v = rest
+        }
+        setStateWithReconciliation(v)
       },
     ] as Signal<T>
   }
@@ -236,10 +221,19 @@ export function createBaseQuery<
    */
   let unsubscribe: (() => void) | null = null
 
+  /*
+    Fixes #7275
+    In a few cases, the observer could unmount before the resource is loaded.
+    This leads to Suspense boundaries to be suspended indefinitely.
+    This resolver will be called when the observer is unmounting 
+    but the resource is still in a loading state
+  */
+  let resolver: ((value: ResourceData) => void) | null = null
   const [queryResource, { refetch }] = createResource<ResourceData | undefined>(
     () => {
       const obs = observer()
       return new Promise((resolve, reject) => {
+        resolver = resolve
         if (isServer) {
           unsubscribe = createServerSubscriber(resolve, reject)
         } else if (!unsubscribe && !isRestoring()) {
@@ -260,8 +254,8 @@ export function createBaseQuery<
           return reject(observerResult.error)
         }
         if (!observerResult.isLoading) {
-          const query = obs.getCurrentQuery()
-          return resolve(hydratableObserverResult(query, observerResult))
+          resolver = null
+          return resolve(observerResult)
         }
 
         setStateWithReconciliation(observerResult)
@@ -283,15 +277,10 @@ export function createBaseQuery<
        * Note that this is only invoked on the client, for queries that were originally run on the server.
        */
       onHydrated(_k, info) {
-        if (info.value) {
+        if (info.value && 'hydrationData' in info.value) {
           hydrate(client(), {
-            queries: [
-              {
-                queryKey: initialOptions.queryKey,
-                queryHash: initialOptions.queryHash,
-                state: info.value,
-              },
-            ],
+            // @ts-expect-error - hydrationData is not correctly typed internally
+            queries: [{ ...info.value.hydrationData }],
           })
         }
 
@@ -354,6 +343,10 @@ export function createBaseQuery<
       unsubscribe()
       unsubscribe = null
     }
+    if (resolver && !isServer) {
+      resolver(observerResult)
+      resolver = null
+    }
   })
 
   createComputed(