@tanstack/react-query 4.22.0 → 4.22.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.22.0",
+  "version": "4.22.4",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "use-sync-external-store": "^1.2.0",
-    "@tanstack/query-core": "4.22.0"
+    "@tanstack/query-core": "4.22.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -63,10 +63,12 @@
     }
   },
   "scripts": {
-    "clean": "rm -rf ./build",
-    "test:codemods": "../../node_modules/.bin/jest --config codemods/jest.config.js",
-    "test:eslint": "../../node_modules/.bin/eslint --ext .ts,.tsx ./src",
-    "test:jest": "pnpm run test:codemods && ../../node_modules/.bin/jest --config ./jest.config.ts",
-    "test:dev": "pnpm run test:jest --watch"
+    "clean": "rimraf ./build",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc",
+    "test:lib": "jest --config ./jest.config.ts",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:lib:publish": "pnpm run test:lib --collectCoverage false",
+    "build:types": "tsc --build"
   }
 }

package/src/__tests__/suspense.test.tsx

@@ -151,7 +151,7 @@ describe("useQuery's in Suspense mode", () => {
       useQuery(
         key,
         () => {
-          sleep(10)
+          sleep(50)
           return 'data'
         },
         { suspense: true },
@@ -1084,7 +1084,7 @@ describe('useQueries with suspense', () => {
             queryKey: key1,
             queryFn: async () => {
               results.push('1')
-              await sleep(10)
+              await sleep(50)
               return '1'
             },
             suspense: true,
@@ -1093,7 +1093,7 @@ describe('useQueries with suspense', () => {
             queryKey: key2,
             queryFn: async () => {
               results.push('2')
-              await sleep(20)
+              await sleep(200)
               return '2'
             },
             staleTime: 1000,
@@ -1101,6 +1101,7 @@ describe('useQueries with suspense', () => {
           },
         ],
       })
+
       return (
         <div>
           <h1>data: {result.map((it) => it.data ?? 'null').join(',')}</h1>

package/src/__tests__/useInfiniteQuery.test.tsx

@@ -283,12 +283,15 @@ describe('useInfiniteQuery', () => {
         }),
       })
       states.push(state)
-      return null
+
+      return <div>{state.data?.pages.join(',')}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(10)
+    await waitFor(() => {
+      rendered.getByText('count: 1')
+    })
 
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({
@@ -317,12 +320,21 @@ describe('useInfiniteQuery', () => {
         }, []),
       })
       states.push(state)
-      return null
+
+      return (
+        <div>
+          {state.data?.pages.map((page) => (
+            <div key={page.id}>count: {page.count}</div>
+          ))}
+        </div>
+      )
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(20)
+    await waitFor(() => {
+      rendered.getByText('count: 1')
+    })
 
     expect(states.length).toBe(2)
     expect(selectCalled).toBe(1)
@@ -415,20 +427,29 @@ describe('useInfiniteQuery', () => {
 
       states.push(state)
 
-      const { fetchPreviousPage } = state
+      return (
+        <div>
+          <div>data: {state.data?.pages.join(',') ?? null}</div>
+          <button onClick={() => state.fetchPreviousPage()}>
+            fetch previous page
+          </button>
+        </div>
+      )
+    }
 
-      React.useEffect(() => {
-        setActTimeout(() => {
-          fetchPreviousPage()
-        }, 20)
-      }, [fetchPreviousPage])
+    const rendered = renderWithClient(queryClient, <Page />)
 
-      return null
-    }
+    await waitFor(() => {
+      rendered.getByText('data: 10')
+    })
 
-    renderWithClient(queryClient, <Page />)
+    fireEvent.click(
+      rendered.getByRole('button', { name: /fetch previous page/i }),
+    )
 
-    await sleep(100)
+    await waitFor(() => {
+      rendered.getByText('data: 9,10')
+    })
 
     expect(states.length).toBe(4)
     expect(states[0]).toMatchObject({

package/src/__tests__/useMutation.test.tsx

@@ -1044,7 +1044,7 @@ describe('useMutation', () => {
     )
   })
 
-  test('should go to error state if onSuccess callback errors', async () => {
+  it('should go to error state if onSuccess callback errors', async () => {
     const error = new Error('error from onSuccess')
     const onError = jest.fn()
 
@@ -1079,7 +1079,7 @@ describe('useMutation', () => {
     expect(onError).toHaveBeenCalledWith(error, 'todo', undefined)
   })
 
-  test('should go to error state if onError callback errors', async () => {
+  it('should go to error state if onError callback errors', async () => {
     const error = new Error('error from onError')
     const mutateFnError = new Error('mutateFnError')
 
@@ -1115,7 +1115,7 @@ describe('useMutation', () => {
     await rendered.findByText('error: mutateFnError, status: error')
   })
 
-  test('should go to error state if onSettled callback errors', async () => {
+  it('should go to error state if onSettled callback errors', async () => {
     const error = new Error('error from onSettled')
     const mutateFnError = new Error('mutateFnError')
     const onError = jest.fn()
@@ -1154,4 +1154,60 @@ describe('useMutation', () => {
 
     expect(onError).toHaveBeenCalledWith(mutateFnError, 'todo', undefined)
   })
+
+  it('should not call mutate callbacks for mutations started after unmount', async () => {
+    const onSuccessMutate = jest.fn()
+    const onSuccessUseMutation = jest.fn()
+    const onSettledMutate = jest.fn()
+    const onSettledUseMutation = jest.fn()
+
+    function Page() {
+      const [show, setShow] = React.useState(true)
+      return (
+        <div>
+          <button onClick={() => setShow(false)}>hide</button>
+          {show && <Component />}
+        </div>
+      )
+    }
+
+    function Component() {
+      const mutation = useMutation({
+        mutationFn: async (text: string) => {
+          await sleep(10)
+          return text
+        },
+        onSuccess: onSuccessUseMutation,
+        onSettled: onSettledUseMutation,
+      })
+
+      return (
+        <div>
+          <button
+            onClick={() => {
+              setActTimeout(() => {
+                mutation.mutate('todo', {
+                  onSuccess: onSuccessMutate,
+                  onSettled: onSettledMutate,
+                })
+              }, 10)
+            }}
+          >
+            mutate
+          </button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
+    fireEvent.click(rendered.getByRole('button', { name: /hide/i }))
+
+    await waitFor(() => expect(onSuccessUseMutation).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(onSettledUseMutation).toHaveBeenCalledTimes(1))
+
+    expect(onSuccessMutate).toHaveBeenCalledTimes(0)
+    expect(onSettledMutate).toHaveBeenCalledTimes(0)
+  })
 })

package/src/__tests__/useQueries.test.tsx

@@ -45,7 +45,7 @@ describe('useQueries', () => {
           {
             queryKey: key2,
             queryFn: async () => {
-              await sleep(100)
+              await sleep(200)
               return 2
             },
           },
@@ -1050,12 +1050,21 @@ describe('useQueries', () => {
           ],
         })
         results.push(result)
-        return null
+
+        return (
+          <div>
+            <div>data1: {result[0].data}</div>
+            <div>data2: {result[1].data}</div>
+          </div>
+        )
       }
 
-      renderWithClient(queryClient, <Page />, { context })
+      const rendered = renderWithClient(queryClient, <Page />, { context })
 
-      await sleep(30)
+      await waitFor(() => {
+        rendered.getByText('data1: 1')
+        rendered.getByText('data2: 2')
+      })
 
       expect(results[0]).toMatchObject([
         { data: undefined },