@tanstack/react-query 4.22.0 → 4.22.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.22.0",
+  "version": "4.22.3",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -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__/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 },