@tanstack/solid-query 5.30.0 → 5.30.1

package/build/dev.cjs

@@ -165,12 +165,18 @@ function createBaseQuery(options, Observer, queryClient) {
           unsubscribe = createClientSubscriber();
         }
         obs.updateResult();
+        if (observerResult.isError && !observerResult.isFetching && !isRestoring() && shouldThrowError(obs.options.throwOnError, [
+          observerResult.error,
+          obs.getCurrentQuery()
+        ])) {
+          setStateWithReconciliation(observerResult);
+          return reject(observerResult.error);
+        }
         if (!observerResult.isLoading) {
           const query = obs.getCurrentQuery();
-          resolve(hydratableObserverResult(query, observerResult));
-        } else {
-          setStateWithReconciliation(observerResult);
+          return resolve(hydratableObserverResult(query, observerResult));
         }
+        setStateWithReconciliation(observerResult);
       });
     },
     {
@@ -257,20 +263,6 @@ function createBaseQuery(options, Observer, queryClient) {
       { defer: true }
     )
   );
-  solidJs.createComputed(
-    solidJs.on(
-      () => state.status,
-      () => {
-        const obs = observer();
-        if (state.isError && !state.isFetching && !isRestoring() && shouldThrowError(obs.options.throwOnError, [
-          state.error,
-          obs.getCurrentQuery()
-        ])) {
-          throw state.error;
-        }
-      }
-    )
-  );
   const handler = {
     get(target, prop) {
       if (prop === "data") {

package/build/dev.js

@@ -164,12 +164,18 @@ function createBaseQuery(options, Observer, queryClient) {
           unsubscribe = createClientSubscriber();
         }
         obs.updateResult();
+        if (observerResult.isError && !observerResult.isFetching && !isRestoring() && shouldThrowError(obs.options.throwOnError, [
+          observerResult.error,
+          obs.getCurrentQuery()
+        ])) {
+          setStateWithReconciliation(observerResult);
+          return reject(observerResult.error);
+        }
         if (!observerResult.isLoading) {
           const query = obs.getCurrentQuery();
-          resolve(hydratableObserverResult(query, observerResult));
-        } else {
-          setStateWithReconciliation(observerResult);
+          return resolve(hydratableObserverResult(query, observerResult));
         }
+        setStateWithReconciliation(observerResult);
       });
     },
     {
@@ -256,20 +262,6 @@ function createBaseQuery(options, Observer, queryClient) {
       { defer: true }
     )
   );
-  createComputed(
-    on(
-      () => state.status,
-      () => {
-        const obs = observer();
-        if (state.isError && !state.isFetching && !isRestoring() && shouldThrowError(obs.options.throwOnError, [
-          state.error,
-          obs.getCurrentQuery()
-        ])) {
-          throw state.error;
-        }
-      }
-    )
-  );
   const handler = {
     get(target, prop) {
       if (prop === "data") {

package/build/index.cjs

@@ -165,12 +165,18 @@ function createBaseQuery(options, Observer, queryClient) {
           unsubscribe = createClientSubscriber();
         }
         obs.updateResult();
+        if (observerResult.isError && !observerResult.isFetching && !isRestoring() && shouldThrowError(obs.options.throwOnError, [
+          observerResult.error,
+          obs.getCurrentQuery()
+        ])) {
+          setStateWithReconciliation(observerResult);
+          return reject(observerResult.error);
+        }
         if (!observerResult.isLoading) {
           const query = obs.getCurrentQuery();
-          resolve(hydratableObserverResult(query, observerResult));
-        } else {
-          setStateWithReconciliation(observerResult);
+          return resolve(hydratableObserverResult(query, observerResult));
         }
+        setStateWithReconciliation(observerResult);
       });
     },
     {
@@ -257,20 +263,6 @@ function createBaseQuery(options, Observer, queryClient) {
       { defer: true }
     )
   );
-  solidJs.createComputed(
-    solidJs.on(
-      () => state.status,
-      () => {
-        const obs = observer();
-        if (state.isError && !state.isFetching && !isRestoring() && shouldThrowError(obs.options.throwOnError, [
-          state.error,
-          obs.getCurrentQuery()
-        ])) {
-          throw state.error;
-        }
-      }
-    )
-  );
   const handler = {
     get(target, prop) {
       if (prop === "data") {

package/build/index.js

@@ -164,12 +164,18 @@ function createBaseQuery(options, Observer, queryClient) {
           unsubscribe = createClientSubscriber();
         }
         obs.updateResult();
+        if (observerResult.isError && !observerResult.isFetching && !isRestoring() && shouldThrowError(obs.options.throwOnError, [
+          observerResult.error,
+          obs.getCurrentQuery()
+        ])) {
+          setStateWithReconciliation(observerResult);
+          return reject(observerResult.error);
+        }
         if (!observerResult.isLoading) {
           const query = obs.getCurrentQuery();
-          resolve(hydratableObserverResult(query, observerResult));
-        } else {
-          setStateWithReconciliation(observerResult);
+          return resolve(hydratableObserverResult(query, observerResult));
         }
+        setStateWithReconciliation(observerResult);
       });
     },
     {
@@ -256,20 +262,6 @@ function createBaseQuery(options, Observer, queryClient) {
       { defer: true }
     )
   );
-  createComputed(
-    on(
-      () => state.status,
-      () => {
-        const obs = observer();
-        if (state.isError && !state.isFetching && !isRestoring() && shouldThrowError(obs.options.throwOnError, [
-          state.error,
-          obs.getCurrentQuery()
-        ])) {
-          throw state.error;
-        }
-      }
-    )
-  );
   const handler = {
     get(target, prop) {
       if (prop === "data") {

package/package.json

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

package/src/__tests__/createQuery.test.tsx

@@ -2407,6 +2407,7 @@ describe('createQuery', () => {
 
       return (
         <div>
+          <h1>{state.data}</h1>
           <h1>{state.status}</h1>
           <h2>{state.error?.message}</h2>
         </div>
@@ -2426,6 +2427,124 @@ describe('createQuery', () => {
     consoleMock.mockRestore()
   })
 
+  it('should throw error inside the same component if queryFn throws and throwOnError is in use', async () => {
+    const key = queryKey()
+
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
+    function Page() {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('Error test')),
+        retry: false,
+        throwOnError: true,
+      }))
+
+      return (
+        <div>
+          <ErrorBoundary fallback={() => <div>error boundary</div>}>
+            <h1>{state.data}</h1>
+            <h1>{state.status}</h1>
+            <h2>{state.error?.message}</h2>
+          </ErrorBoundary>
+        </div>
+      )
+    }
+
+    const rendered = render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+
+    await waitFor(() => rendered.getByText('error boundary'))
+
+    consoleMock.mockRestore()
+  })
+
+  it('should throw error inside the same component if queryFn throws and show the correct error message', async () => {
+    const key = queryKey()
+
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
+    function Page() {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('Error test')),
+        retry: false,
+        throwOnError: true,
+      }))
+
+      return (
+        <div>
+          <ErrorBoundary
+            fallback={(err) => <div>Fallback error: {err.message}</div>}
+          >
+            <h1>{state.data}</h1>
+            <h1>{state.status}</h1>
+            <h2>{state.error?.message}</h2>
+          </ErrorBoundary>
+        </div>
+      )
+    }
+
+    const rendered = render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+
+    await waitFor(() => rendered.getByText('Fallback error: Error test'))
+
+    consoleMock.mockRestore()
+  })
+
+  it('should show the correct error message on the error property when accessed outside error boundary', async () => {
+    const key = queryKey()
+
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
+    function Page() {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('Error test')),
+        retry: false,
+        throwOnError: true,
+      }))
+
+      return (
+        <div>
+          <h2>Outside error boundary: {state.error?.message}</h2>
+          <ErrorBoundary
+            fallback={(err) => <div>Fallback error: {err.message}</div>}
+          >
+            <h1>{state.data}</h1>
+            <h1>{state.status}</h1>
+          </ErrorBoundary>
+        </div>
+      )
+    }
+
+    const rendered = render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+
+    await waitFor(() =>
+      rendered.getByText('Outside error boundary: Error test'),
+    )
+    await waitFor(() => rendered.getByText('Fallback error: Error test'))
+
+    consoleMock.mockRestore()
+  })
+
   it('should update with data if we observe no properties and throwOnError', async () => {
     const key = queryKey()
 
@@ -2491,7 +2610,7 @@ describe('createQuery', () => {
     const key = queryKey()
 
     function Page() {
-      const state = createQuery<unknown, Error>(() => ({
+      const state = createQuery(() => ({
         queryKey: key,
         queryFn: () => Promise.reject(new Error('Remote Error')),
         retry: false,
@@ -2500,6 +2619,7 @@ describe('createQuery', () => {
 
       return (
         <div>
+          <div>{state.data}</div>
           <h1>{state.status}</h1>
           <h2>{state.error?.message ?? ''}</h2>
         </div>

package/src/createBaseQuery.ts

@@ -227,12 +227,24 @@ export function createBaseQuery<
         }
         obs.updateResult()
 
+        if (
+          observerResult.isError &&
+          !observerResult.isFetching &&
+          !isRestoring() &&
+          shouldThrowError(obs.options.throwOnError, [
+            observerResult.error,
+            obs.getCurrentQuery(),
+          ])
+        ) {
+          setStateWithReconciliation(observerResult)
+          return reject(observerResult.error)
+        }
         if (!observerResult.isLoading) {
           const query = obs.getCurrentQuery()
-          resolve(hydratableObserverResult(query, observerResult))
-        } else {
-          setStateWithReconciliation(observerResult)
+          return resolve(hydratableObserverResult(query, observerResult))
         }
+
+        setStateWithReconciliation(observerResult)
       })
     },
     {
@@ -335,26 +347,6 @@ export function createBaseQuery<
     ),
   )
 
-  createComputed(
-    on(
-      () => state.status,
-      () => {
-        const obs = observer()
-        if (
-          state.isError &&
-          !state.isFetching &&
-          !isRestoring() &&
-          shouldThrowError(obs.options.throwOnError, [
-            state.error,
-            obs.getCurrentQuery(),
-          ])
-        ) {
-          throw state.error
-        }
-      },
-    ),
-  )
-
   const handler = {
     get(
       target: QueryObserverResult<TData, TError>,