@tanstack/solid-query 5.30.1 → 5.30.3

package/build/dev.cjs

@@ -51,14 +51,30 @@ exports.useIsRestoring = () => solidJs.useContext(IsRestoringContext);
 exports.IsRestoringProvider = IsRestoringContext.Provider;
 
 // src/createBaseQuery.ts
-function reconcileFn(store$1, result, reconcileOption) {
+function reconcileFn(store$1, result, reconcileOption, queryHash) {
   if (reconcileOption === false)
     return result;
   if (typeof reconcileOption === "function") {
     const newData2 = reconcileOption(store$1.data, result.data);
     return { ...result, data: newData2 };
   }
-  const newData = store.reconcile(result.data, { key: reconcileOption })(store$1.data);
+  let data = result.data;
+  if (store$1.data === void 0) {
+    try {
+      data = structuredClone(data);
+    } catch (error) {
+      {
+        if (error instanceof Error) {
+          console.warn(
+            `Unable to correctly reconcile data for query key: ${queryHash}. Possibly because the query data contains data structures that aren't supported by the 'structuredClone' algorithm. Consider using a callback function instead to manage the reconciliation manually.
+
+ Error Received: ${error.name} - ${error.message}`
+          );
+        }
+      }
+    }
+  }
+  const newData = store.reconcile(data, { key: reconcileOption })(store$1.data);
   return { ...result, data: newData };
 }
 var hydratableObserverResult = (query, result) => {
@@ -133,12 +149,14 @@ function createBaseQuery(options, Observer, queryClient) {
     });
   };
   function setStateWithReconciliation(res) {
-    const reconcileOptions = observer().options.reconcile;
+    const opts = observer().options;
+    const reconcileOptions = opts.reconcile;
     setState((store) => {
       return reconcileFn(
         store,
         res,
-        reconcileOptions === void 0 ? false : reconcileOptions
+        reconcileOptions === void 0 ? false : reconcileOptions,
+        opts.queryHash
       );
     });
   }
@@ -155,10 +173,12 @@ function createBaseQuery(options, Observer, queryClient) {
     ];
   }
   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()) {
@@ -174,6 +194,7 @@ function createBaseQuery(options, Observer, queryClient) {
         }
         if (!observerResult.isLoading) {
           const query = obs.getCurrentQuery();
+          resolver = null;
           return resolve(hydratableObserverResult(query, observerResult));
         }
         setStateWithReconciliation(observerResult);
@@ -211,7 +232,7 @@ function createBaseQuery(options, Observer, queryClient) {
           newOptions.refetchOnMount = false;
         }
         observer().setOptions(newOptions);
-        setState(observer().getOptimisticResult(newOptions));
+        setStateWithReconciliation(observer().getOptimisticResult(newOptions));
         unsubscribe = createClientSubscriber();
       }
     }
@@ -252,6 +273,10 @@ function createBaseQuery(options, Observer, queryClient) {
       unsubscribe();
       unsubscribe = null;
     }
+    if (resolver && !web.isServer) {
+      resolver(observerResult);
+      resolver = null;
+    }
   });
   solidJs.createComputed(
     solidJs.on(
@@ -266,8 +291,7 @@ function createBaseQuery(options, Observer, queryClient) {
   const handler = {
     get(target, prop) {
       if (prop === "data") {
-        const opts = observer().options;
-        if (opts.placeholderData) {
+        if (state.data !== void 0) {
           return queryResource.latest?.data;
         }
         return queryResource()?.data;

package/build/dev.js

@@ -50,14 +50,30 @@ var useIsRestoring = () => useContext(IsRestoringContext);
 var IsRestoringProvider = IsRestoringContext.Provider;
 
 // src/createBaseQuery.ts
-function reconcileFn(store, result, reconcileOption) {
+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 = reconcile(result.data, { key: reconcileOption })(store.data);
+  let data = result.data;
+  if (store.data === void 0) {
+    try {
+      data = structuredClone(data);
+    } catch (error) {
+      {
+        if (error instanceof Error) {
+          console.warn(
+            `Unable to correctly reconcile data for query key: ${queryHash}. Possibly because the query data contains data structures that aren't supported by the 'structuredClone' algorithm. Consider using a callback function instead to manage the reconciliation manually.
+
+ Error Received: ${error.name} - ${error.message}`
+          );
+        }
+      }
+    }
+  }
+  const newData = reconcile(data, { key: reconcileOption })(store.data);
   return { ...result, data: newData };
 }
 var hydratableObserverResult = (query, result) => {
@@ -132,12 +148,14 @@ function createBaseQuery(options, Observer, queryClient) {
     });
   };
   function setStateWithReconciliation(res) {
-    const reconcileOptions = observer().options.reconcile;
+    const opts = observer().options;
+    const reconcileOptions = opts.reconcile;
     setState((store) => {
       return reconcileFn(
         store,
         res,
-        reconcileOptions === void 0 ? false : reconcileOptions
+        reconcileOptions === void 0 ? false : reconcileOptions,
+        opts.queryHash
       );
     });
   }
@@ -154,10 +172,12 @@ function createBaseQuery(options, Observer, queryClient) {
     ];
   }
   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()) {
@@ -173,6 +193,7 @@ function createBaseQuery(options, Observer, queryClient) {
         }
         if (!observerResult.isLoading) {
           const query = obs.getCurrentQuery();
+          resolver = null;
           return resolve(hydratableObserverResult(query, observerResult));
         }
         setStateWithReconciliation(observerResult);
@@ -210,7 +231,7 @@ function createBaseQuery(options, Observer, queryClient) {
           newOptions.refetchOnMount = false;
         }
         observer().setOptions(newOptions);
-        setState(observer().getOptimisticResult(newOptions));
+        setStateWithReconciliation(observer().getOptimisticResult(newOptions));
         unsubscribe = createClientSubscriber();
       }
     }
@@ -251,6 +272,10 @@ function createBaseQuery(options, Observer, queryClient) {
       unsubscribe();
       unsubscribe = null;
     }
+    if (resolver && !isServer) {
+      resolver(observerResult);
+      resolver = null;
+    }
   });
   createComputed(
     on(
@@ -265,8 +290,7 @@ function createBaseQuery(options, Observer, queryClient) {
   const handler = {
     get(target, prop) {
       if (prop === "data") {
-        const opts = observer().options;
-        if (opts.placeholderData) {
+        if (state.data !== void 0) {
           return queryResource.latest?.data;
         }
         return queryResource()?.data;

package/build/index.cjs

@@ -51,14 +51,21 @@ exports.useIsRestoring = () => solidJs.useContext(IsRestoringContext);
 exports.IsRestoringProvider = IsRestoringContext.Provider;
 
 // src/createBaseQuery.ts
-function reconcileFn(store$1, result, reconcileOption) {
+function reconcileFn(store$1, result, reconcileOption, queryHash) {
   if (reconcileOption === false)
     return result;
   if (typeof reconcileOption === "function") {
     const newData2 = reconcileOption(store$1.data, result.data);
     return { ...result, data: newData2 };
   }
-  const newData = store.reconcile(result.data, { key: reconcileOption })(store$1.data);
+  let data = result.data;
+  if (store$1.data === void 0) {
+    try {
+      data = structuredClone(data);
+    } catch (error) {
+    }
+  }
+  const newData = store.reconcile(data, { key: reconcileOption })(store$1.data);
   return { ...result, data: newData };
 }
 var hydratableObserverResult = (query, result) => {
@@ -133,12 +140,14 @@ function createBaseQuery(options, Observer, queryClient) {
     });
   };
   function setStateWithReconciliation(res) {
-    const reconcileOptions = observer().options.reconcile;
+    const opts = observer().options;
+    const reconcileOptions = opts.reconcile;
     setState((store) => {
       return reconcileFn(
         store,
         res,
-        reconcileOptions === void 0 ? false : reconcileOptions
+        reconcileOptions === void 0 ? false : reconcileOptions,
+        opts.queryHash
       );
     });
   }
@@ -155,10 +164,12 @@ function createBaseQuery(options, Observer, queryClient) {
     ];
   }
   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()) {
@@ -174,6 +185,7 @@ function createBaseQuery(options, Observer, queryClient) {
         }
         if (!observerResult.isLoading) {
           const query = obs.getCurrentQuery();
+          resolver = null;
           return resolve(hydratableObserverResult(query, observerResult));
         }
         setStateWithReconciliation(observerResult);
@@ -211,7 +223,7 @@ function createBaseQuery(options, Observer, queryClient) {
           newOptions.refetchOnMount = false;
         }
         observer().setOptions(newOptions);
-        setState(observer().getOptimisticResult(newOptions));
+        setStateWithReconciliation(observer().getOptimisticResult(newOptions));
         unsubscribe = createClientSubscriber();
       }
     }
@@ -252,6 +264,10 @@ function createBaseQuery(options, Observer, queryClient) {
       unsubscribe();
       unsubscribe = null;
     }
+    if (resolver && !web.isServer) {
+      resolver(observerResult);
+      resolver = null;
+    }
   });
   solidJs.createComputed(
     solidJs.on(
@@ -266,8 +282,7 @@ function createBaseQuery(options, Observer, queryClient) {
   const handler = {
     get(target, prop) {
       if (prop === "data") {
-        const opts = observer().options;
-        if (opts.placeholderData) {
+        if (state.data !== void 0) {
           return queryResource.latest?.data;
         }
         return queryResource()?.data;

package/build/index.js

@@ -50,14 +50,21 @@ var useIsRestoring = () => useContext(IsRestoringContext);
 var IsRestoringProvider = IsRestoringContext.Provider;
 
 // src/createBaseQuery.ts
-function reconcileFn(store, result, reconcileOption) {
+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 = reconcile(result.data, { key: reconcileOption })(store.data);
+  let data = result.data;
+  if (store.data === void 0) {
+    try {
+      data = structuredClone(data);
+    } catch (error) {
+    }
+  }
+  const newData = reconcile(data, { key: reconcileOption })(store.data);
   return { ...result, data: newData };
 }
 var hydratableObserverResult = (query, result) => {
@@ -132,12 +139,14 @@ function createBaseQuery(options, Observer, queryClient) {
     });
   };
   function setStateWithReconciliation(res) {
-    const reconcileOptions = observer().options.reconcile;
+    const opts = observer().options;
+    const reconcileOptions = opts.reconcile;
     setState((store) => {
       return reconcileFn(
         store,
         res,
-        reconcileOptions === void 0 ? false : reconcileOptions
+        reconcileOptions === void 0 ? false : reconcileOptions,
+        opts.queryHash
       );
     });
   }
@@ -154,10 +163,12 @@ function createBaseQuery(options, Observer, queryClient) {
     ];
   }
   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()) {
@@ -173,6 +184,7 @@ function createBaseQuery(options, Observer, queryClient) {
         }
         if (!observerResult.isLoading) {
           const query = obs.getCurrentQuery();
+          resolver = null;
           return resolve(hydratableObserverResult(query, observerResult));
         }
         setStateWithReconciliation(observerResult);
@@ -210,7 +222,7 @@ function createBaseQuery(options, Observer, queryClient) {
           newOptions.refetchOnMount = false;
         }
         observer().setOptions(newOptions);
-        setState(observer().getOptimisticResult(newOptions));
+        setStateWithReconciliation(observer().getOptimisticResult(newOptions));
         unsubscribe = createClientSubscriber();
       }
     }
@@ -251,6 +263,10 @@ function createBaseQuery(options, Observer, queryClient) {
       unsubscribe();
       unsubscribe = null;
     }
+    if (resolver && !isServer) {
+      resolver(observerResult);
+      resolver = null;
+    }
   });
   createComputed(
     on(
@@ -265,8 +281,7 @@ function createBaseQuery(options, Observer, queryClient) {
   const handler = {
     get(target, prop) {
       if (prop === "data") {
-        const opts = observer().options;
-        if (opts.placeholderData) {
+        if (state.data !== void 0) {
           return queryResource.latest?.data;
         }
         return queryResource()?.data;

package/package.json

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

package/src/__tests__/createQuery.test.tsx

@@ -1051,7 +1051,9 @@ describe('createQuery', () => {
           count++
           return count === 1 ? result1 : result2
         },
-        reconcile: 'id',
+        reconcile: (oldData, newData) => {
+          return reconcile(newData)(oldData)
+        },
       }))
 
       createRenderEffect(() => {

package/src/createBaseQuery.ts

@@ -34,13 +34,31 @@ function reconcileFn<TData, TError>(
     | string
     | false
     | ((oldData: TData | undefined, newData: TData) => TData),
+  queryHash?: string,
 ): QueryObserverResult<TData, TError> {
   if (reconcileOption === false) return result
   if (typeof reconcileOption === 'function') {
     const newData = reconcileOption(store.data, result.data as TData)
     return { ...result, data: newData } as typeof result
   }
-  const newData = reconcile(result.data, { key: reconcileOption })(store.data)
+  let data = result.data
+  if (store.data === undefined) {
+    try {
+      data = structuredClone(data)
+    } catch (error) {
+      if (process.env.NODE_ENV !== 'production') {
+        if (error instanceof Error) {
+          console.warn(
+            `Unable to correctly reconcile data for query key: ${queryHash}. ` +
+              `Possibly because the query data contains data structures that aren't supported ` +
+              `by the 'structuredClone' algorithm. Consider using a callback function instead ` +
+              `to manage the reconciliation manually.\n\n Error Received: ${error.name} - ${error.message}`,
+          )
+        }
+      }
+    }
+  }
+  const newData = reconcile(data, { key: reconcileOption })(store.data)
   return { ...result, data: newData } as typeof result
 }
 
@@ -186,14 +204,16 @@ export function createBaseQuery<
   }
 
   function setStateWithReconciliation(res: typeof observerResult) {
+    const opts = observer().options
     // @ts-expect-error - Reconcile option is not correctly typed internally
-    const reconcileOptions = observer().options.reconcile
+    const reconcileOptions = opts.reconcile
 
     setState((store) => {
       return reconcileFn(
         store,
         res,
         reconcileOptions === undefined ? false : reconcileOptions,
+        opts.queryHash,
       )
     })
   }
@@ -216,10 +236,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()) {
@@ -241,6 +270,7 @@ export function createBaseQuery<
         }
         if (!observerResult.isLoading) {
           const query = obs.getCurrentQuery()
+          resolver = null
           return resolve(hydratableObserverResult(query, observerResult))
         }
 
@@ -290,7 +320,7 @@ export function createBaseQuery<
         // Setting the options as an immutable object to prevent
         // wonky behavior with observer subscriptions
         observer().setOptions(newOptions)
-        setState(observer().getOptimisticResult(newOptions))
+        setStateWithReconciliation(observer().getOptimisticResult(newOptions))
         unsubscribe = createClientSubscriber()
       },
     },
@@ -334,6 +364,10 @@ export function createBaseQuery<
       unsubscribe()
       unsubscribe = null
     }
+    if (resolver && !isServer) {
+      resolver(observerResult)
+      resolver = null
+    }
   })
 
   createComputed(
@@ -353,8 +387,7 @@ export function createBaseQuery<
       prop: keyof QueryObserverResult<TData, TError>,
     ): any {
       if (prop === 'data') {
-        const opts = observer().options
-        if (opts.placeholderData) {
+        if (state.data !== undefined) {
           return queryResource.latest?.data
         }
         return queryResource()?.data