feat(preact-query*): support Preact v11

.changeset/preact-v11-peer-dependency.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/preact-query': patch
+'@tanstack/preact-query-devtools': patch
+'@tanstack/preact-query-persist-client': patch
+---
+
+Add Preact v11 to peerDependencies

packages/preact-query-devtools/package.json

@@ -89,6 +89,6 @@
   },
   "peerDependencies": {
     "@tanstack/preact-query": "workspace:^",
-    "preact": "^10.0.0"
+    "preact": "^10.0.0 || ^11.0.0-0"
   }
 }

packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { render } from '@testing-library/preact'
+import { act, render } from '@testing-library/preact'
 import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
 import { TanstackQueryDevtools } from '@tanstack/query-devtools'
 import type { PreactQueryDevtools as PreactQueryDevtoolsComponent } from '../PreactQueryDevtools'
@@ -216,7 +216,9 @@ describe('PreactQueryDevtools', () => {
 
   it('should call "unmount" on the devtools instance when the component unmounts', () => {
     const { unmount } = render(<PreactQueryDevtools client={queryClient} />)
-    unmount()
+    act(() => {
+      unmount()
+    })
 
     expect(unmountMock).toHaveBeenCalled()
   })

packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { render } from '@testing-library/preact'
+import { act, render } from '@testing-library/preact'
 import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
 import type { PreactQueryDevtoolsPanel as PreactQueryDevtoolsPanelComponent } from '../PreactQueryDevtoolsPanel'
@@ -175,7 +175,9 @@ describe('PreactQueryDevtoolsPanel', () => {
     const { unmount } = render(
       <PreactQueryDevtoolsPanel client={queryClient} />,
     )
-    unmount()
+    act(() => {
+      unmount()
+    })
 
     expect(unmountMock).toHaveBeenCalled()
   })

packages/preact-query-devtools/test-setup.ts

@@ -4,8 +4,11 @@ import { notifyManager } from '@tanstack/preact-query'
 import { afterEach } from 'vitest'
 
 // https://testing-library.com/docs/preact-testing-library/api#cleanup
+// Wrap in act so effect cleanups Preact defers on unmount run synchronously
 afterEach(() => {
-  cleanupRTL()
+  act(() => {
+    cleanupRTL()
+  })
 })
 
 // Wrap notifications with act to make sure Preact knows about Query updates

packages/preact-query-persist-client/package.json

@@ -69,6 +69,6 @@
   },
   "peerDependencies": {
     "@tanstack/preact-query": "workspace:^",
-    "preact": "^10.0.0"
+    "preact": "^10.0.0 || ^11.0.0-0"
   }
 }

packages/preact-query-persist-client/test-setup.ts

@@ -4,8 +4,11 @@ import { afterEach } from 'vitest'
 import { notifyManager } from '@tanstack/preact-query'
 
 // https://testing-library.com/docs/preact-testing-library/api#cleanup
+// Wrap in act so effect cleanups Preact defers on unmount run synchronously
 afterEach(() => {
-  cleanupRTL()
+  act(() => {
+    cleanupRTL()
+  })
 })
 
 // Wrap notifications with act to make sure Preact knows about Query updates

packages/preact-query/package.json

@@ -75,6 +75,6 @@
     "typescript-eslint": "^8.54.0"
   },
   "peerDependencies": {
-    "preact": "^10.0.0"
+    "preact": "^10.0.0 || ^11.0.0-0"
   }
 }

packages/preact-query/src/__tests__/useQuery.test.tsx

@@ -3966,7 +3966,9 @@ describe('useQuery', () => {
     rendered.getByText('fetched data')
     const setTimeoutSpy = vi.spyOn(globalThis.window, 'setTimeout')
 
-    rendered.unmount()
+    act(() => {
+      rendered.unmount()
+    })
 
     expect(setTimeoutSpy).not.toHaveBeenCalled()
   })
@@ -3990,7 +3992,9 @@ describe('useQuery', () => {
 
     const setTimeoutSpy = vi.spyOn(globalThis.window, 'setTimeout')
 
-    rendered.unmount()
+    act(() => {
+      rendered.unmount()
+    })
 
     expect(setTimeoutSpy).toHaveBeenLastCalledWith(
       expect.any(Function),

packages/preact-query/src/utils.ts

@@ -67,7 +67,7 @@ export function useSyncExternalStoreWithSelector<TSnapshot, TSelected>(
   selector: (snapshot: TSnapshot) => TSelected,
   isEqual: (a: TSelected, b: TSelected) => boolean,
 ): TSelected {
-  const selectedSnapshotRef = useRef<TSelected | undefined>()
+  const selectedSnapshotRef = useRef<TSelected | undefined>(undefined)
 
   const getSelectedSnapshot = () => {
     const snapshot = getSnapshot()

packages/preact-query/test-setup.ts

@@ -4,8 +4,11 @@ import { act, cleanup as cleanupRTL } from '@testing-library/preact'
 import { afterEach } from 'vitest'
 
 // https://testing-library.com/docs/preact-testing-library/api#cleanup
+// Wrap in act so effect cleanups Preact defers on unmount run synchronously
 afterEach(() => {
-  cleanupRTL()
+  act(() => {
+    cleanupRTL()
+  })
 })
 
 // Wrap notifications with act to make sure React knows about React Query updates