@tanstack/solid-query 4.11.1 → 4.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query",
-  "version": "4.11.1",
+  "version": "4.13.0",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -33,11 +33,10 @@
     "src"
   ],
   "devDependencies": {
-    "@types/jscodeshift": "^0.11.3",
-    "jscodeshift": "^0.13.1"
+    "solid-jest": "^0.2.0"
   },
   "dependencies": {
-    "@tanstack/query-core": "4.10.3"
+    "@tanstack/query-core": "4.13.0"
   },
   "peerDependencies": {
     "solid-js": "^1.5.7"
@@ -46,7 +45,7 @@
   "scripts": {
     "clean": "rm -rf ./build",
     "test:eslint": "../../node_modules/.bin/eslint --ext .ts,.tsx ./src",
-    "test:jest": "../../node_modules/.bin/jest --config jest.config.js",
-    "test:jest:dev": "pnpm test:jest --watch"
+    "test:jest": "../../node_modules/.bin/jest --config ./jest.config.ts",
+    "test:dev": "pnpm run test:jest --watch"
   }
 }

package/src/__tests__/createInfiniteQuery.test.tsx

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

package/src/__tests__/createMutation.test.tsx

@@ -170,6 +170,64 @@ describe('useMutation', () => {
     expect(onSettledMock).toHaveBeenCalledWith(3)
   })
 
+  it('should set correct values for `failureReason` and `failureCount` on multiple mutate calls', async () => {
+    const [count, setCount] = createSignal(0)
+    type Value = { count: number }
+
+    const mutateFn = jest.fn<Promise<Value>, [value: Value]>()
+
+    mutateFn.mockImplementationOnce(() => {
+      return Promise.reject('Error test Jonas')
+    })
+
+    mutateFn.mockImplementation(async (value) => {
+      await sleep(10)
+      return Promise.resolve(value)
+    })
+
+    function Page() {
+      const mutation = createMutation<Value, string, Value>(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()
@@ -656,21 +714,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)
@@ -683,11 +745,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',
     })
 

package/src/__tests__/createQuery.test.tsx

@@ -266,6 +266,7 @@ describe('createQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      failureReason: null,
       errorUpdateCount: 0,
       isError: false,
       isFetched: false,
@@ -293,6 +294,7 @@ describe('createQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      failureReason: null,
       errorUpdateCount: 0,
       isError: false,
       isFetched: true,
@@ -338,6 +340,7 @@ describe('createQuery', () => {
         <div>
           <h1>Status: {state.status}</h1>
           <div>Failure Count: {state.failureCount}</div>
+          <div>Failure Reason: {state.failureReason}</div>
         </div>
       )
     }
@@ -356,6 +359,7 @@ describe('createQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      failureReason: null,
       errorUpdateCount: 0,
       isError: false,
       isFetched: false,
@@ -383,6 +387,7 @@ describe('createQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 1,
+      failureReason: 'rejected',
       errorUpdateCount: 0,
       isError: false,
       isFetched: false,
@@ -410,6 +415,7 @@ describe('createQuery', () => {
       error: 'rejected',
       errorUpdatedAt: expect.any(Number),
       failureCount: 2,
+      failureReason: 'rejected',
       errorUpdateCount: 1,
       isError: true,
       isFetched: true,
@@ -2562,48 +2568,6 @@ describe('createQuery', () => {
     expect(queryCache.find(key())!.options.queryFn).toBe(queryFn1)
   })
 
-  // TODO(lukemurray): this seems like a react implementation detail
-  it.skip('should render correct states even in case of useEffect triggering delays', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
-
-    // @ts-expect-error - we skip this test
-    const originalUseEffect = NotReact.useEffect
-
-    // Try to simulate useEffect timing delay
-    // @ts-ignore
-    NotReact.useEffect = (...args: any[]) => {
-      originalUseEffect(() => {
-        setTimeout(() => {
-          args[0]()
-        }, 10)
-      }, args[1])
-    }
-
-    function Page() {
-      const state = createQuery(key, () => 'data', { staleTime: Infinity })
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-      return null
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-    queryClient.setQueryData(key(), 'data')
-    await sleep(50)
-
-    // @ts-ignore
-    NotReact.useEffect = originalUseEffect
-
-    expect(states.length).toBe(2)
-    expect(states[0]).toMatchObject({ status: 'loading' })
-    expect(states[1]).toMatchObject({ status: 'success' })
-  })
-
   it('should batch re-renders', async () => {
     const key = queryKey()
 
@@ -3280,6 +3244,7 @@ describe('createQuery', () => {
         <div>
           <div>error: {result.error ?? 'null'}</div>
           <div>failureCount: {result.failureCount}</div>
+          <div>failureReason: {result.failureReason}</div>
         </div>
       )
     }
@@ -3304,6 +3269,7 @@ describe('createQuery', () => {
     ))
 
     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 }))
@@ -3334,6 +3300,7 @@ describe('createQuery', () => {
         <div>
           <div>error: {result.error ?? 'null'}</div>
           <div>failureCount: {result.failureCount}</div>
+          <div>failureReason: {result.failureReason}</div>
         </div>
       )
     }
@@ -3363,6 +3330,7 @@ describe('createQuery', () => {
     ))
 
     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 }))
@@ -3626,7 +3594,7 @@ describe('createQuery', () => {
     })
 
     function Page() {
-      const state = createQuery(key, queryFn, {
+      const state = createQuery<unknown, string>(key, queryFn, {
         retry: 1,
         retryDelay: 1,
       })
@@ -3635,6 +3603,7 @@ describe('createQuery', () => {
         <div>
           <h1>{state.status}</h1>
           <h2>Failed {state.failureCount} times</h2>
+          <h2>Failed because {state.failureReason}</h2>
         </div>
       )
     }
@@ -3650,6 +3619,7 @@ describe('createQuery', () => {
 
     // 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)
   })
@@ -3677,6 +3647,7 @@ describe('createQuery', () => {
         <div>
           <h1>{state.status}</h1>
           <h2>Failed {state.failureCount} times</h2>
+          <h2>Failed because {state.failureReason}</h2>
           <h2>{state.error}</h2>
         </div>
       )
@@ -3690,8 +3661,8 @@ 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)
@@ -3708,7 +3679,7 @@ describe('createQuery', () => {
     })
 
     function Page() {
-      const state = createQuery(key, queryFn, {
+      const state = createQuery<unknown, DelayError>(key, queryFn, {
         retry: 1,
         retryDelay: (_, error: DelayError) => error.delay,
       })
@@ -3717,6 +3688,7 @@ describe('createQuery', () => {
         <div>
           <h1>{state.status}</h1>
           <h2>Failed {state.failureCount} times</h2>
+          <h2>Failed because DelayError: {state.failureReason?.delay}ms</h2>
         </div>
       )
     }
@@ -3731,6 +3703,7 @@ describe('createQuery', () => {
 
     expect(queryFn).toHaveBeenCalledTimes(1)
 
+    await waitFor(() => screen.getByText('Failed because DelayError: 50ms'))
     await waitFor(() => screen.getByText('Failed 2 times'))
 
     expect(queryFn).toHaveBeenCalledTimes(2)
@@ -3746,7 +3719,7 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const query = createQuery(
+      const query = createQuery<unknown, string>(
         key,
         () => {
           count++
@@ -3763,6 +3736,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>
       )
     }
@@ -3775,24 +3749,28 @@ describe('createQuery', () => {
 
     // 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')
@@ -3973,13 +3951,13 @@ describe('createQuery', () => {
   })
 
   // 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
 
-      const query = createQuery(
+      const query = createQuery<unknown, Error>(
         key,
         async () => {
           if (counter < 2) {
@@ -3995,6 +3973,7 @@ describe('createQuery', () => {
       return (
         <div>
           <div>failureCount {query.failureCount}</div>
+          <div>failureReason {query.failureReason?.message ?? 'null'}</div>
         </div>
       )
     }
@@ -4006,7 +3985,9 @@ describe('createQuery', () => {
     ))
 
     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
@@ -5595,7 +5576,7 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery({
+        const state = createQuery<unknown, string, string>({
           queryKey: key,
           queryFn: async () => {
             count++
@@ -5610,6 +5591,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() })}
@@ -5636,6 +5618,7 @@ describe('createQuery', () => {
           'status: success, fetchStatus: paused, failureCount: 0',
         ),
       )
+      await waitFor(() => screen.getByText('failureReason: null'))
 
       onlineMock.mockReturnValue(true)
       window.dispatchEvent(new Event('online'))
@@ -5645,9 +5628,11 @@ describe('createQuery', () => {
           '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()
@@ -5898,7 +5883,7 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery({
+        const state = createQuery<unknown, Error>({
           queryKey: key,
           queryFn: async (): Promise<unknown> => {
             count++
@@ -5915,6 +5900,7 @@ describe('createQuery', () => {
               status: {state.status}, fetchStatus: {state.fetchStatus},
               failureCount: {state.failureCount}
             </div>
+            <div>failureReason: {state.failureReason?.message ?? 'null'}</div>
           </div>
         )
       }
@@ -5930,6 +5916,7 @@ describe('createQuery', () => {
           'status: loading, fetchStatus: fetching, failureCount: 1',
         ),
       )
+      await waitFor(() => screen.getByText('failureReason: failed1'))
 
       const onlineMock = mockNavigatorOnLine(false)
 
@@ -5940,6 +5927,7 @@ describe('createQuery', () => {
           'status: loading, fetchStatus: paused, failureCount: 1',
         ),
       )
+      await waitFor(() => screen.getByText('failureReason: failed1'))
 
       expect(count).toBe(1)
 
@@ -5949,6 +5937,7 @@ describe('createQuery', () => {
       await waitFor(() =>
         screen.getByText('status: error, fetchStatus: idle, failureCount: 3'),
       )
+      await waitFor(() => screen.getByText('failureReason: failed3'))
 
       expect(count).toBe(3)
 
@@ -6261,7 +6250,7 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery({
+        const state = createQuery<unknown, Error>({
           queryKey: key,
           queryFn: async (): Promise<unknown> => {
             count++
@@ -6279,6 +6268,7 @@ describe('createQuery', () => {
               status: {state.status}, fetchStatus: {state.fetchStatus},
               failureCount: {state.failureCount}
             </div>
+            <div>failureReason: {state.failureReason?.message ?? 'null'}</div>
           </div>
         )
       }
@@ -6294,6 +6284,7 @@ describe('createQuery', () => {
           'status: loading, fetchStatus: paused, failureCount: 1',
         ),
       )
+      await waitFor(() => screen.getByText('failureReason: failed1'))
 
       expect(count).toBe(1)
 
@@ -6303,6 +6294,7 @@ describe('createQuery', () => {
       await waitFor(() =>
         screen.getByText('status: error, fetchStatus: idle, failureCount: 3'),
       )
+      await waitFor(() => screen.getByText('failureReason: failed3'))
 
       expect(count).toBe(3)