@tanstack/solid-query 4.12.0 → 4.13.4

package/build/solid/__tests__/createInfiniteQuery.test.jsx

@@ -39,6 +39,7 @@ describe('useInfiniteQuery', () => {
             error: null,
             errorUpdatedAt: 0,
             failureCount: 0,
+            failureReason: null,
             errorUpdateCount: 0,
             fetchNextPage: expect.any(Function),
             fetchPreviousPage: expect.any(Function),
@@ -71,6 +72,7 @@ describe('useInfiniteQuery', () => {
             error: null,
             errorUpdatedAt: 0,
             failureCount: 0,
+            failureReason: null,
             errorUpdateCount: 0,
             fetchNextPage: expect.any(Function),
             fetchPreviousPage: expect.any(Function),

package/build/solid/__tests__/createMutation.test.jsx

@@ -103,6 +103,47 @@ describe('useMutation', () => {
         expect(onSettledMock).toHaveBeenCalledWith(2);
         expect(onSettledMock).toHaveBeenCalledWith(3);
     });
+    it('should set correct values for `failureReason` and `failureCount` on multiple mutate calls', async () => {
+        const [count, setCount] = createSignal(0);
+        const mutateFn = jest.fn();
+        mutateFn.mockImplementationOnce(() => {
+            return Promise.reject('Error test Jonas');
+        });
+        mutateFn.mockImplementation(async (value) => {
+            await sleep(10);
+            return Promise.resolve(value);
+        });
+        function Page() {
+            const mutation = createMutation(mutateFn);
+            return (<div>
+          <h1>Data {mutation.data?.count}</h1>
+          <h2>Status {mutation.status}</h2>
+          <h2>Failed {mutation.failureCount} times</h2>
+          <h2>Failed because {mutation.failureReason ?? 'null'}</h2>
+          <button onClick={() => {
+                    setCount((c) => c + 1);
+                    return mutation.mutate({ count: count() });
+                }}>
+            mutate
+          </button>
+        </div>);
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        await waitFor(() => screen.getByText('Data'));
+        fireEvent.click(screen.getByRole('button', { name: /mutate/i }));
+        await waitFor(() => screen.getByText('Data'));
+        await waitFor(() => screen.getByText('Status error'));
+        await waitFor(() => screen.getByText('Failed 1 times'));
+        await waitFor(() => screen.getByText('Failed because Error test Jonas'));
+        fireEvent.click(screen.getByRole('button', { name: /mutate/i }));
+        await waitFor(() => screen.getByText('Status loading'));
+        await waitFor(() => screen.getByText('Status success'));
+        await waitFor(() => screen.getByText('Data 2'));
+        await waitFor(() => screen.getByText('Failed 0 times'));
+        await waitFor(() => screen.getByText('Failed because null'));
+    });
     it('should be able to call `onError` and `onSettled` after each failed mutate', async () => {
         const onErrorMock = jest.fn();
         const onSettledMock = jest.fn();
@@ -435,21 +476,25 @@ describe('useMutation', () => {
             isLoading: false,
             isPaused: false,
             failureCount: 0,
+            failureReason: null,
         });
         expect(states[1]).toMatchObject({
             isLoading: true,
             isPaused: false,
             failureCount: 0,
+            failureReason: null,
         });
         expect(states[2]).toMatchObject({
             isLoading: true,
             isPaused: false,
             failureCount: 1,
+            failureReason: 'oops',
         });
         expect(states[3]).toMatchObject({
             isLoading: true,
             isPaused: true,
             failureCount: 1,
+            failureReason: 'oops',
         });
         onlineMock.mockReturnValue(true);
         window.dispatchEvent(new Event('online'));
@@ -459,11 +504,13 @@ describe('useMutation', () => {
             isLoading: true,
             isPaused: false,
             failureCount: 1,
+            failureReason: 'oops',
         });
         expect(states[5]).toMatchObject({
             isLoading: false,
             isPaused: false,
-            failureCount: 1,
+            failureCount: 0,
+            failureReason: null,
             data: 'data',
         });
         onlineMock.mockRestore();

package/build/solid/__tests__/createQuery.test.jsx

@@ -145,6 +145,7 @@ describe('createQuery', () => {
             error: null,
             errorUpdatedAt: 0,
             failureCount: 0,
+            failureReason: null,
             errorUpdateCount: 0,
             isError: false,
             isFetched: false,
@@ -171,6 +172,7 @@ describe('createQuery', () => {
             error: null,
             errorUpdatedAt: 0,
             failureCount: 0,
+            failureReason: null,
             errorUpdateCount: 0,
             isError: false,
             isFetched: true,
@@ -206,6 +208,7 @@ describe('createQuery', () => {
             return (<div>
           <h1>Status: {state.status}</h1>
           <div>Failure Count: {state.failureCount}</div>
+          <div>Failure Reason: {state.failureReason}</div>
         </div>);
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -218,6 +221,7 @@ describe('createQuery', () => {
             error: null,
             errorUpdatedAt: 0,
             failureCount: 0,
+            failureReason: null,
             errorUpdateCount: 0,
             isError: false,
             isFetched: false,
@@ -244,6 +248,7 @@ describe('createQuery', () => {
             error: null,
             errorUpdatedAt: 0,
             failureCount: 1,
+            failureReason: 'rejected',
             errorUpdateCount: 0,
             isError: false,
             isFetched: false,
@@ -270,6 +275,7 @@ describe('createQuery', () => {
             error: 'rejected',
             errorUpdatedAt: expect.any(Number),
             failureCount: 2,
+            failureReason: 'rejected',
             errorUpdateCount: 1,
             isError: true,
             isFetched: true,
@@ -2329,6 +2335,7 @@ describe('createQuery', () => {
             return (<div>
           <div>error: {result.error ?? 'null'}</div>
           <div>failureCount: {result.failureCount}</div>
+          <div>failureReason: {result.failureReason}</div>
         </div>);
         }
         function App() {
@@ -2343,6 +2350,7 @@ describe('createQuery', () => {
         <App />
       </QueryClientProvider>));
         await waitFor(() => screen.getByText('failureCount: 1'));
+        await waitFor(() => screen.getByText('failureReason: some error'));
         fireEvent.click(screen.getByRole('button', { name: /hide/i }));
         await waitFor(() => screen.getByRole('button', { name: /show/i }));
         fireEvent.click(screen.getByRole('button', { name: /show/i }));
@@ -2364,6 +2372,7 @@ describe('createQuery', () => {
             return (<div>
           <div>error: {result.error ?? 'null'}</div>
           <div>failureCount: {result.failureCount}</div>
+          <div>failureReason: {result.failureReason}</div>
         </div>);
         }
         function App() {
@@ -2381,6 +2390,7 @@ describe('createQuery', () => {
         <App />
       </QueryClientProvider>));
         await waitFor(() => screen.getByText('failureCount: 1'));
+        await waitFor(() => screen.getByText('failureReason: some error'));
         fireEvent.click(screen.getByRole('button', { name: /hide/i }));
         fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
         await waitFor(() => screen.getByRole('button', { name: /show/i }));
@@ -2594,6 +2604,7 @@ describe('createQuery', () => {
             return (<div>
           <h1>{state.status}</h1>
           <h2>Failed {state.failureCount} times</h2>
+          <h2>Failed because {state.failureReason}</h2>
         </div>);
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -2603,6 +2614,7 @@ describe('createQuery', () => {
         await waitFor(() => screen.getByText('error'));
         // query should fail `retry + 1` times, since first time isn't a "retry"
         await waitFor(() => screen.getByText('Failed 2 times'));
+        await waitFor(() => screen.getByText('Failed because Error test Barrett'));
         expect(queryFn).toHaveBeenCalledTimes(2);
     });
     it('should not retry if retry function `false`', async () => {
@@ -2622,6 +2634,7 @@ describe('createQuery', () => {
             return (<div>
           <h1>{state.status}</h1>
           <h2>Failed {state.failureCount} times</h2>
+          <h2>Failed because {state.failureReason}</h2>
           <h2>{state.error}</h2>
         </div>);
         }
@@ -2631,6 +2644,7 @@ describe('createQuery', () => {
         await waitFor(() => screen.getByText('loading'));
         await waitFor(() => screen.getByText('error'));
         await waitFor(() => screen.getByText('Failed 2 times'));
+        await waitFor(() => screen.getByText('Failed because NoRetry'));
         await waitFor(() => screen.getByText('NoRetry'));
         expect(queryFn).toHaveBeenCalledTimes(2);
     });
@@ -2648,6 +2662,7 @@ describe('createQuery', () => {
             return (<div>
           <h1>{state.status}</h1>
           <h2>Failed {state.failureCount} times</h2>
+          <h2>Failed because DelayError: {state.failureReason?.delay}ms</h2>
         </div>);
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -2655,6 +2670,7 @@ describe('createQuery', () => {
       </QueryClientProvider>));
         await sleep(10);
         expect(queryFn).toHaveBeenCalledTimes(1);
+        await waitFor(() => screen.getByText('Failed because DelayError: 50ms'));
         await waitFor(() => screen.getByText('Failed 2 times'));
         expect(queryFn).toHaveBeenCalledTimes(2);
     });
@@ -2676,6 +2692,7 @@ describe('createQuery', () => {
           <div>error {String(query.error)}</div>
           <div>status {query.status}</div>
           <div>failureCount {query.failureCount}</div>
+          <div>failureReason {query.failureReason}</div>
         </div>);
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -2683,20 +2700,24 @@ describe('createQuery', () => {
       </QueryClientProvider>));
         // The query should display the first error result
         await waitFor(() => screen.getByText('failureCount 1'));
+        await waitFor(() => screen.getByText('failureReason fetching error 1'));
         await waitFor(() => screen.getByText('status loading'));
         await waitFor(() => screen.getByText('error null'));
         // Check if the query really paused
         await sleep(10);
         await waitFor(() => screen.getByText('failureCount 1'));
+        await waitFor(() => screen.getByText('failureReason fetching error 1'));
         visibilityMock.mockRestore();
         window.dispatchEvent(new FocusEvent('focus'));
         // Wait for the final result
         await waitFor(() => screen.getByText('failureCount 4'));
+        await waitFor(() => screen.getByText('failureReason fetching error 4'));
         await waitFor(() => screen.getByText('status error'));
         await waitFor(() => screen.getByText('error fetching error 4'));
         // Check if the query really stopped
         await sleep(10);
         await waitFor(() => screen.getByText('failureCount 4'));
+        await waitFor(() => screen.getByText('failureReason fetching error 4'));
         // Check if the error has been logged in the console
         expect(mockLogger.error).toHaveBeenCalledWith('fetching error 4');
     });
@@ -2832,7 +2853,7 @@ describe('createQuery', () => {
         expect(queryFn).toHaveBeenCalledTimes(0);
     });
     // See https://github.com/tannerlinsley/react-query/issues/190
-    it('should reset failureCount on successful fetch', async () => {
+    it('should reset failureCount and failureReason on successful fetch', async () => {
         const key = queryKey();
         function Page() {
             let counter = 0;
@@ -2847,13 +2868,16 @@ describe('createQuery', () => {
             }, { retryDelay: 10 });
             return (<div>
           <div>failureCount {query.failureCount}</div>
+          <div>failureReason {query.failureReason?.message ?? 'null'}</div>
         </div>);
         }
         render(() => (<QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>));
         await waitFor(() => screen.getByText('failureCount 2'));
+        await waitFor(() => screen.getByText('failureReason error'));
         await waitFor(() => screen.getByText('failureCount 0'));
+        await waitFor(() => screen.getByText('failureReason null'));
     });
     // See https://github.com/tannerlinsley/react-query/issues/199
     it('should use prefetched data for dependent query', async () => {
@@ -4014,6 +4038,7 @@ describe('createQuery', () => {
               status: {state.status}, fetchStatus: {state.fetchStatus},
               failureCount: {state.failureCount}
             </div>
+            <div>failureReason: {state.failureReason ?? 'null'}</div>
             <div>data: {state.data}</div>
             <button onClick={() => queryClient.invalidateQueries({ queryKey: key() })}>
               invalidate
@@ -4027,10 +4052,13 @@ describe('createQuery', () => {
             const onlineMock = mockNavigatorOnLine(false);
             fireEvent.click(screen.getByRole('button', { name: /invalidate/i }));
             await waitFor(() => screen.getByText('status: success, fetchStatus: paused, failureCount: 0'));
+            await waitFor(() => screen.getByText('failureReason: null'));
             onlineMock.mockReturnValue(true);
             window.dispatchEvent(new Event('online'));
             await waitFor(() => screen.getByText('status: success, fetchStatus: fetching, failureCount: 0'));
+            await waitFor(() => screen.getByText('failureReason: null'));
             await waitFor(() => screen.getByText('status: success, fetchStatus: idle, failureCount: 0'));
+            await waitFor(() => screen.getByText('failureReason: null'));
             await waitFor(() => {
                 expect(screen.getByText('data: data2')).toBeInTheDocument();
             });
@@ -4208,19 +4236,23 @@ describe('createQuery', () => {
               status: {state.status}, fetchStatus: {state.fetchStatus},
               failureCount: {state.failureCount}
             </div>
+            <div>failureReason: {state.failureReason?.message ?? 'null'}</div>
           </div>);
             }
             render(() => (<QueryClientProvider client={queryClient}>
           <Page />
         </QueryClientProvider>));
             await waitFor(() => screen.getByText('status: loading, fetchStatus: fetching, failureCount: 1'));
+            await waitFor(() => screen.getByText('failureReason: failed1'));
             const onlineMock = mockNavigatorOnLine(false);
             await sleep(20);
             await waitFor(() => screen.getByText('status: loading, fetchStatus: paused, failureCount: 1'));
+            await waitFor(() => screen.getByText('failureReason: failed1'));
             expect(count).toBe(1);
             onlineMock.mockReturnValue(true);
             window.dispatchEvent(new Event('online'));
             await waitFor(() => screen.getByText('status: error, fetchStatus: idle, failureCount: 3'));
+            await waitFor(() => screen.getByText('failureReason: failed3'));
             expect(count).toBe(3);
             onlineMock.mockRestore();
         });
@@ -4442,16 +4474,19 @@ describe('createQuery', () => {
               status: {state.status}, fetchStatus: {state.fetchStatus},
               failureCount: {state.failureCount}
             </div>
+            <div>failureReason: {state.failureReason?.message ?? 'null'}</div>
           </div>);
             }
             render(() => (<QueryClientProvider client={queryClient}>
           <Page />
         </QueryClientProvider>));
             await waitFor(() => screen.getByText('status: loading, fetchStatus: paused, failureCount: 1'));
+            await waitFor(() => screen.getByText('failureReason: failed1'));
             expect(count).toBe(1);
             onlineMock.mockReturnValue(true);
             window.dispatchEvent(new Event('online'));
             await waitFor(() => screen.getByText('status: error, fetchStatus: idle, failureCount: 3'));
+            await waitFor(() => screen.getByText('failureReason: failed3'));
             expect(count).toBe(3);
             onlineMock.mockRestore();
         });

package/build/umd/index.development.js

@@ -1112,9 +1112,11 @@
           this.isFetchingOptimistic = false;
         },
         onError,
-        onFail: () => {
+        onFail: (failureCount, error) => {
           this.dispatch({
-            type: 'failed'
+            type: 'failed',
+            failureCount,
+            error
           });
         },
         onPause: () => {
@@ -1142,7 +1144,8 @@
         switch (action.type) {
           case 'failed':
             return { ...state,
-              fetchFailureCount: state.fetchFailureCount + 1
+              fetchFailureCount: action.failureCount,
+              fetchFailureReason: action.error
             };
 
           case 'pause':
@@ -1158,6 +1161,7 @@
           case 'fetch':
             return { ...state,
               fetchFailureCount: 0,
+              fetchFailureReason: null,
               fetchMeta: (_action$meta = action.meta) != null ? _action$meta : null,
               fetchStatus: canFetch(this.options.networkMode) ? 'fetching' : 'paused',
               ...(!state.dataUpdatedAt && {
@@ -1176,7 +1180,8 @@
               status: 'success',
               ...(!action.manual && {
                 fetchStatus: 'idle',
-                fetchFailureCount: 0
+                fetchFailureCount: 0,
+                fetchFailureReason: null
               })
             };
 
@@ -1193,6 +1198,7 @@
               errorUpdateCount: state.errorUpdateCount + 1,
               errorUpdatedAt: Date.now(),
               fetchFailureCount: state.fetchFailureCount + 1,
+              fetchFailureReason: error,
               fetchStatus: 'idle',
               status: 'error'
             };
@@ -1237,6 +1243,7 @@
       errorUpdateCount: 0,
       errorUpdatedAt: 0,
       fetchFailureCount: 0,
+      fetchFailureReason: null,
       fetchMeta: null,
       isInvalidated: false,
       status: hasData ? 'success' : 'loading',
@@ -1441,9 +1448,11 @@
 
             return this.options.mutationFn(this.state.variables);
           },
-          onFail: () => {
+          onFail: (failureCount, error) => {
             this.dispatch({
-              type: 'failed'
+              type: 'failed',
+              failureCount,
+              error
             });
           },
           onPause: () => {
@@ -1526,7 +1535,8 @@
         switch (action.type) {
           case 'failed':
             return { ...state,
-              failureCount: state.failureCount + 1
+              failureCount: action.failureCount,
+              failureReason: action.error
             };
 
           case 'pause':
@@ -1543,6 +1553,8 @@
             return { ...state,
               context: action.context,
               data: undefined,
+              failureCount: 0,
+              failureReason: null,
               error: null,
               isPaused: !canFetch(this.options.networkMode),
               status: 'loading',
@@ -1552,6 +1564,8 @@
           case 'success':
             return { ...state,
               data: action.data,
+              failureCount: 0,
+              failureReason: null,
               error: null,
               status: 'success',
               isPaused: false
@@ -1562,6 +1576,7 @@
               data: undefined,
               error: action.error,
               failureCount: state.failureCount + 1,
+              failureReason: action.error,
               isPaused: false,
               status: 'error'
             };
@@ -1593,6 +1608,7 @@
       data: undefined,
       error: null,
       failureCount: 0,
+      failureReason: null,
       isPaused: false,
       status: 'idle',
       variables: undefined
@@ -2453,7 +2469,6 @@
           if (options.select && typeof placeholderData !== 'undefined') {
             try {
               placeholderData = options.select(placeholderData);
-              placeholderData = replaceData(prevResult == null ? void 0 : prevResult.data, placeholderData, options);
               this.selectError = null;
             } catch (selectError) {
               {
@@ -2467,7 +2482,7 @@
 
         if (typeof placeholderData !== 'undefined') {
           status = 'success';
-          data = placeholderData;
+          data = replaceData(prevResult == null ? void 0 : prevResult.data, placeholderData, options);
           isPlaceholderData = true;
         }
       }
@@ -2494,6 +2509,7 @@
         error,
         errorUpdatedAt,
         failureCount: state.fetchFailureCount,
+        failureReason: state.fetchFailureReason,
         errorUpdateCount: state.errorUpdateCount,
         isFetched: state.dataUpdateCount > 0 || state.errorUpdateCount > 0,
         isFetchedAfterMount: state.dataUpdateCount > queryInitialState.dataUpdateCount || state.errorUpdateCount > queryInitialState.errorUpdateCount,