(null)
diff --git a/packages/preact-query/src/__tests__/ErrorBoundary/index.ts b/packages/preact-query/src/__tests__/ErrorBoundary/index.ts
new file mode 100644
index 0000000000..51ee3ea0df
--- /dev/null
+++ b/packages/preact-query/src/__tests__/ErrorBoundary/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Custom Error Boundary port from 'react-error-boundary'
+ * Taken directly from https://github.com/bvaughn/react-error-boundary/
+ * and modified to server a preact use case
+ */
+
+export * from './ErrorBoundary'
+export * from './ErrorBoundaryContext'
+export * from './types'
diff --git a/packages/preact-query/src/__tests__/ErrorBoundary/types.ts b/packages/preact-query/src/__tests__/ErrorBoundary/types.ts
new file mode 100644
index 0000000000..31e4123c6e
--- /dev/null
+++ b/packages/preact-query/src/__tests__/ErrorBoundary/types.ts
@@ -0,0 +1,48 @@
+import {
+ ComponentType,
+ ErrorInfo,
+ ComponentChildren,
+ ComponentChild,
+} from 'preact'
+
+export type FallbackProps = {
+ error: any
+ resetErrorBoundary: (...args: any[]) => void
+}
+
+export type PropsWithChildren = P & {
+ children?: ComponentChildren
+}
+
+type ErrorBoundarySharedProps = PropsWithChildren<{
+ onError?: (error: Error, info: ErrorInfo) => void
+ onReset?: (
+ details:
+ | { reason: 'imperative-api'; args: any[] }
+ | { reason: 'keys'; prev: any[] | undefined; next: any[] | undefined },
+ ) => void
+ resetKeys?: any[]
+}>
+
+export type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
+ fallback?: never
+ FallbackComponent: ComponentType
+ fallbackRender?: never
+}
+
+export type ErrorBoundaryPropsWithRender = ErrorBoundarySharedProps & {
+ fallback?: never
+ FallbackComponent?: never
+ fallbackRender: (props: FallbackProps) => ComponentChild
+}
+
+export type ErrorBoundaryPropsWithFallback = ErrorBoundarySharedProps & {
+ fallback: ComponentChild
+ FallbackComponent?: never
+ fallbackRender?: never
+}
+
+export type ErrorBoundaryProps =
+ | ErrorBoundaryPropsWithFallback
+ | ErrorBoundaryPropsWithComponent
+ | ErrorBoundaryPropsWithRender
diff --git a/packages/preact-query/src/__tests__/HydrationBoundary.test.tsx b/packages/preact-query/src/__tests__/HydrationBoundary.test.tsx
new file mode 100644
index 0000000000..b9c90ffba5
--- /dev/null
+++ b/packages/preact-query/src/__tests__/HydrationBoundary.test.tsx
@@ -0,0 +1,483 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { render } from '@testing-library/preact'
+import * as coreModule from '@tanstack/query-core'
+import { sleep } from '@tanstack/query-test-utils'
+import {
+ HydrationBoundary,
+ QueryClient,
+ QueryClientProvider,
+ dehydrate,
+ useQuery,
+} from '..'
+import type { hydrate } from '@tanstack/query-core'
+import { startTransition, Suspense } from 'preact/compat'
+
+describe('React hydration', () => {
+ let stringifiedState: string
+
+ beforeEach(async () => {
+ vi.useFakeTimers()
+ const queryClient = new QueryClient()
+ queryClient.prefetchQuery({
+ queryKey: ['string'],
+ queryFn: () => sleep(10).then(() => ['stringCached']),
+ })
+ await vi.advanceTimersByTimeAsync(10)
+ const dehydrated = dehydrate(queryClient)
+ stringifiedState = JSON.stringify(dehydrated)
+ queryClient.clear()
+ })
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ test('should hydrate queries to the cache on context', async () => {
+ const dehydratedState = JSON.parse(stringifiedState)
+ const queryClient = new QueryClient()
+
+ function Page() {
+ const { data } = useQuery({
+ queryKey: ['string'],
+ queryFn: () => sleep(20).then(() => ['string']),
+ })
+ return (
+
+
{data}
+
+ )
+ }
+
+ const rendered = render(
+
+
+
+ ,
+ )
+
+ expect(rendered.getByText('stringCached')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(21)
+ expect(rendered.getByText('string')).toBeInTheDocument()
+ queryClient.clear()
+ })
+
+ test('should hydrate queries to the cache on custom context', async () => {
+ const queryClientInner = new QueryClient()
+ const queryClientOuter = new QueryClient()
+
+ const dehydratedState = JSON.parse(stringifiedState)
+
+ function Page() {
+ const { data } = useQuery({
+ queryKey: ['string'],
+ queryFn: () => sleep(20).then(() => ['string']),
+ })
+ return (
+
+
{data}
+
+ )
+ }
+
+ const rendered = render(
+
+
+
+
+
+ ,
+ )
+
+ expect(rendered.getByText('stringCached')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(21)
+ expect(rendered.getByText('string')).toBeInTheDocument()
+
+ queryClientInner.clear()
+ queryClientOuter.clear()
+ })
+
+ describe('ReactQueryCacheProvider with hydration support', () => {
+ test('should hydrate new queries if queries change', async () => {
+ const dehydratedState = JSON.parse(stringifiedState)
+ const queryClient = new QueryClient()
+
+ function Page({ queryKey }: { queryKey: [string] }) {
+ const { data } = useQuery({
+ queryKey,
+ queryFn: () => sleep(20).then(() => queryKey),
+ })
+ return (
+
+
{data}
+
+ )
+ }
+
+ const rendered = render(
+
+
+
+ ,
+ )
+
+ expect(rendered.getByText('stringCached')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(21)
+ expect(rendered.getByText('string')).toBeInTheDocument()
+
+ const intermediateClient = new QueryClient()
+
+ intermediateClient.prefetchQuery({
+ queryKey: ['string'],
+ queryFn: () => sleep(20).then(() => ['should change']),
+ })
+ intermediateClient.prefetchQuery({
+ queryKey: ['added'],
+ queryFn: () => sleep(20).then(() => ['added']),
+ })
+ await vi.advanceTimersByTimeAsync(20)
+ const dehydrated = dehydrate(intermediateClient)
+ intermediateClient.clear()
+
+ rendered.rerender(
+
+
+
+ ,
+ )
+
+ // Existing observer should not have updated at this point,
+ // as that would indicate a side effect in the render phase
+ expect(rendered.getByText('string')).toBeInTheDocument()
+ // New query data should be available immediately
+ expect(rendered.getByText('added')).toBeInTheDocument()
+
+ await vi.advanceTimersByTimeAsync(0)
+ // After effects phase has had time to run, the observer should have updated
+ expect(rendered.queryByText('string')).not.toBeInTheDocument()
+ expect(rendered.getByText('should change')).toBeInTheDocument()
+
+ queryClient.clear()
+ })
+
+ // When we hydrate in transitions that are later aborted, it could be
+ // confusing to both developers and users if we suddenly updated existing
+ // state on the screen (why did this update when it was not stale, nothing
+ // remounted, I didn't change tabs etc?).
+ // Any queries that does not exist in the cache yet can still be hydrated
+ // since they don't have any observers on the current page that would update.
+ test('should hydrate new but not existing queries if transition is aborted', async () => {
+ const initialDehydratedState = JSON.parse(stringifiedState)
+ const queryClient = new QueryClient()
+
+ function Page({ queryKey }: { queryKey: [string] }) {
+ const { data } = useQuery({
+ queryKey,
+ queryFn: () => sleep(20).then(() => queryKey),
+ })
+ return (
+
+
{data}
+
+ )
+ }
+
+ const rendered = render(
+
+
+
+ ,
+ )
+
+ expect(rendered.getByText('stringCached')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(21)
+ expect(rendered.getByText('string')).toBeInTheDocument()
+
+ const intermediateClient = new QueryClient()
+ intermediateClient.prefetchQuery({
+ queryKey: ['string'],
+ queryFn: () => sleep(20).then(() => ['should not change']),
+ })
+ intermediateClient.prefetchQuery({
+ queryKey: ['added'],
+ queryFn: () => sleep(20).then(() => ['added']),
+ })
+ await vi.advanceTimersByTimeAsync(20)
+
+ const newDehydratedState = dehydrate(intermediateClient)
+ intermediateClient.clear()
+
+ function Thrower(): never {
+ throw new Promise(() => {
+ // Never resolve
+ })
+ }
+
+ startTransition(() => {
+ rendered.rerender(
+
+
+
+
+
+ ,
+ )
+
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ })
+
+ startTransition(() => {
+ rendered.rerender(
+
+
+
+ ,
+ )
+
+ // This query existed before the transition so it should stay the same
+ expect(rendered.getByText('string')).toBeInTheDocument()
+ expect(
+ rendered.queryByText('should not change'),
+ ).not.toBeInTheDocument()
+ // New query data should be available immediately because it was
+ // hydrated in the previous transition, even though the new dehydrated
+ // state did not contain it
+ expect(rendered.getByText('added')).toBeInTheDocument()
+ })
+
+ await vi.advanceTimersByTimeAsync(20)
+ // It should stay the same even after effects have had a chance to run
+ expect(rendered.getByText('string')).toBeInTheDocument()
+ expect(rendered.queryByText('should not change')).not.toBeInTheDocument()
+
+ queryClient.clear()
+ })
+
+ test('should hydrate queries to new cache if cache changes', async () => {
+ const dehydratedState = JSON.parse(stringifiedState)
+ const queryClient = new QueryClient()
+
+ function Page() {
+ const { data } = useQuery({
+ queryKey: ['string'],
+ queryFn: () => sleep(20).then(() => ['string']),
+ })
+ return (
+
+
{data}
+
+ )
+ }
+
+ const rendered = render(
+
+
+
+ ,
+ )
+
+ expect(rendered.getByText('stringCached')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(21)
+ expect(rendered.getByText('string')).toBeInTheDocument()
+ const newClientQueryClient = new QueryClient()
+
+ rendered.rerender(
+
+
+
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(20)
+ expect(rendered.getByText('string')).toBeInTheDocument()
+
+ queryClient.clear()
+ newClientQueryClient.clear()
+ })
+ })
+
+ test('should not hydrate queries if state is null', async () => {
+ const queryClient = new QueryClient()
+
+ const hydrateSpy = vi.spyOn(coreModule, 'hydrate')
+
+ function Page() {
+ return null
+ }
+
+ render(
+
+
+
+ ,
+ )
+
+ await Promise.all(
+ Array.from({ length: 1000 }).map(async (_, index) => {
+ await vi.advanceTimersByTimeAsync(index)
+ expect(hydrateSpy).toHaveBeenCalledTimes(0)
+ }),
+ )
+
+ hydrateSpy.mockRestore()
+ queryClient.clear()
+ })
+
+ test('should not hydrate queries if state is undefined', async () => {
+ const queryClient = new QueryClient()
+
+ const hydrateSpy = vi.spyOn(coreModule, 'hydrate')
+
+ function Page() {
+ return null
+ }
+
+ render(
+
+
+
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(0)
+ expect(hydrateSpy).toHaveBeenCalledTimes(0)
+
+ hydrateSpy.mockRestore()
+ queryClient.clear()
+ })
+
+ test('should not hydrate queries if state is not an object', async () => {
+ const queryClient = new QueryClient()
+
+ const hydrateSpy = vi.spyOn(coreModule, 'hydrate')
+
+ function Page() {
+ return null
+ }
+
+ render(
+
+
+
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(0)
+ expect(hydrateSpy).toHaveBeenCalledTimes(0)
+
+ hydrateSpy.mockRestore()
+ queryClient.clear()
+ })
+
+ test('should handle state without queries property gracefully', async () => {
+ const queryClient = new QueryClient()
+
+ const hydrateSpy = vi.spyOn(coreModule, 'hydrate')
+
+ function Page() {
+ return null
+ }
+
+ render(
+
+
+
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(0)
+ expect(hydrateSpy).toHaveBeenCalledTimes(0)
+
+ hydrateSpy.mockRestore()
+ queryClient.clear()
+ })
+
+ // https://github.com/TanStack/query/issues/8677
+ test('should not infinite loop when hydrating promises that resolve to errors', async () => {
+ const originalHydrate = coreModule.hydrate
+ const hydrateSpy = vi.spyOn(coreModule, 'hydrate')
+ let hydrationCount = 0
+ hydrateSpy.mockImplementation((...args: Parameters) => {
+ hydrationCount++
+ // Arbitrary number
+ if (hydrationCount > 10) {
+ // This is a rough way to detect it. Calling hydrate multiple times with
+ // the same data is usually fine, but in this case it indicates the
+ // logic in HydrationBoundary is not working as expected.
+ throw new Error('Too many hydrations detected')
+ }
+ return originalHydrate(...args)
+ })
+
+ // For the bug to trigger, there needs to already be a query in the cache,
+ // with a dataUpdatedAt earlier than the dehydratedAt of the next query
+ const clientQueryClient = new QueryClient()
+ clientQueryClient.prefetchQuery({
+ queryKey: ['promise'],
+ queryFn: () => sleep(20).then(() => 'existing'),
+ })
+ await vi.advanceTimersByTimeAsync(20)
+
+ const prefetchQueryClient = new QueryClient({
+ defaultOptions: {
+ dehydrate: {
+ shouldDehydrateQuery: () => true,
+ },
+ },
+ })
+ prefetchQueryClient.prefetchQuery({
+ queryKey: ['promise'],
+ queryFn: () =>
+ sleep(10).then(() => Promise.reject(new Error('Query failed'))),
+ })
+
+ const dehydratedState = dehydrate(prefetchQueryClient)
+
+ // Mimic what React/our synchronous thenable does for already rejected promises
+ // @ts-expect-error
+ dehydratedState.queries[0].promise.status = 'failure'
+
+ function Page() {
+ const { data } = useQuery({
+ queryKey: ['promise'],
+ queryFn: () => sleep(20).then(() => ['new']),
+ })
+ return (
+
+
{data}
+
+ )
+ }
+
+ const rendered = render(
+
+
+
+ ,
+ )
+
+ expect(rendered.getByText('existing')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(21)
+ expect(rendered.getByText('new')).toBeInTheDocument()
+
+ hydrateSpy.mockRestore()
+ prefetchQueryClient.clear()
+ clientQueryClient.clear()
+ })
+})
diff --git a/packages/preact-query/src/__tests__/QueryClientProvider.test.tsx b/packages/preact-query/src/__tests__/QueryClientProvider.test.tsx
new file mode 100644
index 0000000000..bd5f584bbc
--- /dev/null
+++ b/packages/preact-query/src/__tests__/QueryClientProvider.test.tsx
@@ -0,0 +1,165 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { render } from '@testing-library/preact'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import {
+ QueryCache,
+ QueryClient,
+ QueryClientProvider,
+ useQuery,
+ useQueryClient,
+} from '..'
+
+describe('QueryClientProvider', () => {
+ beforeEach(() => {
+ vi.useFakeTimers()
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ test('sets a specific cache for all queries to use', async () => {
+ const key = queryKey()
+
+ const queryCache = new QueryCache()
+ const queryClient = new QueryClient({ queryCache })
+
+ function Page() {
+ const { data } = useQuery({
+ queryKey: key,
+ queryFn: () => sleep(10).then(() => 'test'),
+ })
+
+ return (
+
+
{data}
+
+ )
+ }
+
+ const rendered = render(
+
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('test')).toBeInTheDocument()
+
+ expect(queryCache.find({ queryKey: key })).toBeDefined()
+ })
+
+ test('allows multiple caches to be partitioned', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+
+ const queryCache1 = new QueryCache()
+ const queryCache2 = new QueryCache()
+
+ const queryClient1 = new QueryClient({ queryCache: queryCache1 })
+ const queryClient2 = new QueryClient({ queryCache: queryCache2 })
+
+ function Page1() {
+ const { data } = useQuery({
+ queryKey: key1,
+ queryFn: () => sleep(10).then(() => 'test1'),
+ })
+
+ return (
+
+
{data}
+
+ )
+ }
+ function Page2() {
+ const { data } = useQuery({
+ queryKey: key2,
+ queryFn: () => sleep(10).then(() => 'test2'),
+ })
+
+ return (
+
+
{data}
+
+ )
+ }
+
+ const rendered = render(
+ <>
+
+
+
+
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('test1')).toBeInTheDocument()
+ expect(rendered.getByText('test2')).toBeInTheDocument()
+
+ expect(queryCache1.find({ queryKey: key1 })).toBeDefined()
+ expect(queryCache1.find({ queryKey: key2 })).not.toBeDefined()
+ expect(queryCache2.find({ queryKey: key1 })).not.toBeDefined()
+ expect(queryCache2.find({ queryKey: key2 })).toBeDefined()
+ })
+
+ test("uses defaultOptions for queries when they don't provide their own config", async () => {
+ const key = queryKey()
+
+ const queryCache = new QueryCache()
+ const queryClient = new QueryClient({
+ queryCache,
+ defaultOptions: {
+ queries: {
+ gcTime: Infinity,
+ },
+ },
+ })
+
+ function Page() {
+ const { data } = useQuery({
+ queryKey: key,
+ queryFn: () => sleep(10).then(() => 'test'),
+ })
+
+ return (
+
+
{data}
+
+ )
+ }
+
+ const rendered = render(
+
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('test')).toBeInTheDocument()
+
+ expect(queryCache.find({ queryKey: key })).toBeDefined()
+ expect(queryCache.find({ queryKey: key })?.options.gcTime).toBe(Infinity)
+ })
+
+ describe('useQueryClient', () => {
+ test('should throw an error if no query client has been set', () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+
+ function Page() {
+ useQueryClient()
+ return null
+ }
+
+ expect(() => render({data}
+ }
+
+ const rendered = renderWithClient(
+ queryClient,
+
+ {({ reset }) => (
+ (
+
+
error boundary
+
{
+ resetErrorBoundary()
+ }}
+ >
+ retry
+
+
+ )}
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ succeed = true
+
+ fireEvent.click(rendered.getByText('retry'))
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('data')).toBeInTheDocument()
+
+ consoleMock.mockRestore()
+ })
+
+ it('should not throw error if query is disabled', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+ const key = queryKey()
+
+ let succeed = false
+
+ function Page() {
+ const { data, status } = useQuery({
+ queryKey: key,
+ queryFn: () =>
+ sleep(10).then(() => {
+ if (!succeed) throw new Error('Error')
+ return 'data'
+ }),
+ retry: false,
+ enabled: !succeed,
+ throwOnError: true,
+ })
+
+ return (
+
+
status: {status}
+
{data}
+
+ {({ reset }) => (
+ (
+
+
error boundary
+
{
+ resetErrorBoundary()
+ }}
+ >
+ retry
+
+
+ )}
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ succeed = true
+
+ fireEvent.click(rendered.getByText('retry'))
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('status: error')).toBeInTheDocument()
+
+ consoleMock.mockRestore()
+ })
+
+ it('should not throw error if query is disabled, and refetch if query becomes enabled again', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+
+ const key = queryKey()
+
+ let succeed = false
+
+ function Page() {
+ const [enabled, setEnabled] = useState(false)
+ const { data } = useQuery({
+ queryKey: key,
+ queryFn: () =>
+ sleep(10).then(() => {
+ if (!succeed) throw new Error('Error')
+ return 'data'
+ }),
+ retry: false,
+ enabled,
+ throwOnError: true,
+ })
+
+ useEffect(() => {
+ setEnabled(true)
+ }, [])
+
+ return {data}
+ }
+
+ const rendered = renderWithClient(
+ queryClient,
+
+ {({ reset }) => (
+ (
+
+
error boundary
+
{
+ resetErrorBoundary()
+ }}
+ >
+ retry
+
+
+ )}
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ succeed = true
+
+ fireEvent.click(rendered.getByText('retry'))
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('data')).toBeInTheDocument()
+
+ consoleMock.mockRestore()
+ })
+
+ it('should throw error if query is disabled and manually refetch', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+
+ const key = queryKey()
+
+ function Page() {
+ const { data, refetch, status, fetchStatus } = useQuery({
+ queryKey: key,
+ queryFn: () =>
+ sleep(10).then(() => Promise.reject(new Error('Error'))),
+ retry: false,
+ enabled: false,
+ throwOnError: true,
+ })
+
+ return (
+
+
refetch()}>refetch
+
+ status: {status}, fetchStatus: {fetchStatus}
+
+
{data}
+
+ {({ reset }) => (
+ (
+
+
error boundary
+
{
+ resetErrorBoundary()
+ }}
+ >
+ retry
+
+
+ )}
+ ,
+ )
+
+ expect(
+ rendered.getByText('status: pending, fetchStatus: idle'),
+ ).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(11)
+ expect(
+ rendered.getByText('status: pending, fetchStatus: idle'),
+ ).toBeInTheDocument()
+
+ fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+
+ consoleMock.mockRestore()
+ })
+
+ it('should not retry fetch if the reset error boundary has not been reset', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+
+ const key = queryKey()
+
+ let succeed = false
+
+ function Page() {
+ const { data } = useQuery({
+ queryKey: key,
+ queryFn: () =>
+ sleep(10).then(() => {
+ if (!succeed) throw new Error('Error')
+ return 'data'
+ }),
+ retry: false,
+ throwOnError: true,
+ })
+
+ return {data}
+ }
+
+ const rendered = renderWithClient(
+ queryClient,
+
+ {() => (
+ (
+
+
error boundary
+
{
+ resetErrorBoundary()
+ }}
+ >
+ retry
+
+
+ )}
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ succeed = true
+
+ fireEvent.click(rendered.getByText('retry'))
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+
+ consoleMock.mockRestore()
+ })
+
+ it('should retry fetch if the reset error boundary has been reset and the query contains data from a previous fetch', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+
+ const key = queryKey()
+
+ let succeed = false
+
+ function Page() {
+ const { data } = useQuery({
+ queryKey: key,
+ queryFn: () =>
+ sleep(10).then(() => {
+ if (!succeed) throw new Error('Error')
+ return 'data'
+ }),
+ retry: false,
+ throwOnError: true,
+ initialData: 'initial',
+ })
+
+ return {data}
+ }
+
+ const rendered = renderWithClient(
+ queryClient,
+
+ {({ reset }) => (
+ (
+
+
error boundary
+
{
+ resetErrorBoundary()
+ }}
+ >
+ retry
+
+
+ )}
+ ,
+ )
+
+ expect(rendered.getByText('initial')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ succeed = true
+
+ fireEvent.click(rendered.getByText('retry'))
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('data')).toBeInTheDocument()
+
+ consoleMock.mockRestore()
+ })
+
+ it('should not retry fetch if the reset error boundary has not been reset after a previous reset', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+
+ const key = queryKey()
+
+ let succeed = false
+ let shouldReset = false
+
+ function Page() {
+ const { data } = useQuery({
+ queryKey: key,
+ queryFn: () =>
+ sleep(10).then(() => {
+ if (!succeed) throw new Error('Error')
+ return 'data'
+ }),
+ retry: false,
+ throwOnError: true,
+ })
+
+ return {data}
+ }
+
+ const rendered = renderWithClient(
+ queryClient,
+
+ {({ reset }) => (
+ {
+ if (shouldReset) {
+ reset()
+ }
+ }}
+ fallbackRender={({ resetErrorBoundary }) => (
+
+
error boundary
+
{
+ resetErrorBoundary()
+ }}
+ >
+ retry
+
+
+ )}
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ succeed = false
+ shouldReset = true
+
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ succeed = true
+ shouldReset = false
+
+ fireEvent.click(rendered.getByText('retry'))
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+
+ succeed = true
+ shouldReset = true
+
+ fireEvent.click(rendered.getByText('retry'))
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('data')).toBeInTheDocument()
+
+ consoleMock.mockRestore()
+ })
+
+ it('should throw again on error after the reset error boundary has been reset', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+
+ const key = queryKey()
+ let fetchCount = 0
+
+ function Page() {
+ const { data } = useQuery({
+ queryKey: key,
+ queryFn: () =>
+ sleep(10).then(() => {
+ fetchCount++
+ throw new Error('Error')
+ }),
+ retry: false,
+ throwOnError: true,
+ })
+
+ return {data}
+ }
+
+ const rendered = renderWithClient(
+ queryClient,
+
+ {({ reset }) => (
+ (
+
+
error boundary
+
{
+ resetErrorBoundary()
+ }}
+ >
+ retry
+
+
+ )}
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ fireEvent.click(rendered.getByText('retry'))
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ fireEvent.click(rendered.getByText('retry'))
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+
+ expect(fetchCount).toBe(3)
+
+ consoleMock.mockRestore()
+ })
+
+ it('should never render the component while the query is in error state', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+
+ const key = queryKey()
+ let fetchCount = 0
+ let renders = 0
+
+ function Page() {
+ const { data } = useSuspenseQuery({
+ queryKey: key,
+ queryFn: () =>
+ sleep(10).then(() => {
+ fetchCount++
+ if (fetchCount > 2) return 'data'
+ throw new Error('Error')
+ }),
+ retry: false,
+ })
+
+ renders++
+
+ return {data}
+ }
+
+ const rendered = renderWithClient(
+ queryClient,
+
+ {({ reset }) => (
+ (
+
+
error boundary
+
{
+ resetErrorBoundary()
+ }}
+ >
+ retry
+
+
loading}>
+
+
+ )}
+ ,
+ )
+
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ fireEvent.click(rendered.getByText('retry'))
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ fireEvent.click(rendered.getByText('retry'))
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('data')).toBeInTheDocument()
+
+ expect(fetchCount).toBe(3)
+ expect(renders).toBe(1)
+
+ consoleMock.mockRestore()
+ })
+
+ it('should render children', () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+
+ function Page() {
+ return (
+
+ page
+
+ )
+ }
+
+ const rendered = renderWithClient(
+ queryClient,
+
+ ,
+ )
+
+ expect(rendered.queryByText('page')).not.toBeNull()
+
+ consoleMock.mockRestore()
+ })
+
+ it('should show error boundary when using tracked queries even though we do not track the error field', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+
+ const key = queryKey()
+
+ let succeed = false
+
+ function Page() {
+ const { data } = useQuery({
+ queryKey: key,
+ queryFn: () =>
+ sleep(10).then(() => {
+ if (!succeed) throw new Error('Error')
+ return 'data'
+ }),
+ retry: false,
+ throwOnError: true,
+ })
+
+ return {data}
+ }
+
+ const rendered = renderWithClient(
+ queryClient,
+
+ {({ reset }) => (
+ (
+
+
error boundary
+
{
+ resetErrorBoundary()
+ }}
+ >
+ retry
+
+
+ )}
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ succeed = true
+
+ fireEvent.click(rendered.getByText('retry'))
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('data')).toBeInTheDocument()
+
+ consoleMock.mockRestore()
+ })
+ })
+
+ describe('useQueries', () => {
+ it('should retry fetch if the reset error boundary has been reset', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+ const key = queryKey()
+
+ let succeed = false
+
+ function Page() {
+ const [{ data }] = useQueries({
+ queries: [
+ {
+ queryKey: key,
+ queryFn: () =>
+ sleep(10).then(() => {
+ if (!succeed) throw new Error('Error')
+ return 'data'
+ }),
+ retry: false,
+ throwOnError: true,
+ retryOnMount: true,
+ },
+ ],
+ })
+
+ return {data}
+ }
+
+ const rendered = renderWithClient(
+ queryClient,
+
+ {({ reset }) => (
+ (
+
+
error boundary
+
{
+ resetErrorBoundary()
+ }}
+ >
+ retry
+
+
+ )}
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ succeed = true
+
+ fireEvent.click(rendered.getByText('retry'))
+ await vi.advanceTimersByTimeAsync(11)
+ expect(rendered.getByText('data')).toBeInTheDocument()
+
+ consoleMock.mockRestore()
+ })
+
+ it('with suspense should retry fetch if the reset error boundary has been reset', async () => {
+ const key = queryKey()
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+
+ let succeed = false
+
+ function Page() {
+ const [{ data }] = useSuspenseQueries({
+ queries: [
+ {
+ queryKey: key,
+ queryFn: () =>
+ sleep(10).then(() => {
+ if (!succeed) throw new Error('Error')
+ return 'data'
+ }),
+ retry: false,
+ retryOnMount: true,
+ },
+ ],
+ })
+
+ return {data}
+ }
+
+ const rendered = renderWithClient(
+ queryClient,
+
+ {({ reset }) => (
+ (
+
+
error boundary
+
{
+ resetErrorBoundary()
+ }}
+ >
+ retry
+
+
+
+
+ )}
+ ,
+ )
+
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('error boundary')).toBeInTheDocument()
+ expect(rendered.getByText('retry')).toBeInTheDocument()
+
+ succeed = true
+
+ fireEvent.click(rendered.getByText('retry'))
+ expect(rendered.getByText('loading')).toBeInTheDocument()
+ await vi.advanceTimersByTimeAsync(10)
+ expect(rendered.getByText('data')).toBeInTheDocument()
+
+ consoleMock.mockRestore()
+ })
+ })
+})
diff --git a/packages/preact-query/src/__tests__/fine-grained-persister.test.tsx b/packages/preact-query/src/__tests__/fine-grained-persister.test.tsx
new file mode 100644
index 0000000000..ae9bc5d63b
--- /dev/null
+++ b/packages/preact-query/src/__tests__/fine-grained-persister.test.tsx
@@ -0,0 +1,179 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+ PERSISTER_KEY_PREFIX,
+ experimental_createQueryPersister,
+} from '@tanstack/query-persist-client-core'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import { QueryCache, QueryClient, hashKey, useQuery } from '..'
+import { renderWithClient } from './utils'
+import { useState } from 'preact/hooks'
+
+describe('fine grained persister', () => {
+ beforeEach(() => {
+ vi.useFakeTimers()
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ const queryCache = new QueryCache()
+ const queryClient = new QueryClient({ queryCache })
+
+ it('should restore query state from persister and not refetch', async () => {
+ const key = queryKey()
+ const hash = hashKey(key)
+ const spy = vi.fn(() => Promise.resolve('Works from queryFn'))
+
+ const mapStorage = new Map()
+ const storage = {
+ getItem: (itemKey: string) => Promise.resolve(mapStorage.get(itemKey)),
+ setItem: (itemKey: string, value: unknown) => {
+ mapStorage.set(itemKey, value)
+ return Promise.resolve()
+ },
+ removeItem: (itemKey: string) => {
+ mapStorage.delete(itemKey)
+ return Promise.resolve()
+ },
+ }
+
+ await storage.setItem(
+ `${PERSISTER_KEY_PREFIX}-${hash}`,
+ JSON.stringify({
+ buster: '',
+ queryHash: hash,
+ queryKey: key,
+ state: {
+ dataUpdatedAt: Date.now(),
+ data: 'Works from persister',
+ },
+ }),
+ )
+
+ function Test() {
+ const [_, setRef] = useState()
+
+ const { data } = useQuery({
+ queryKey: key,
+ queryFn: spy,
+ persister: experimental_createQueryPersister({
+ storage,
+ }).persisterFn,
+ staleTime: 5000,
+ })
+
+ return setRef(value)}>{data}
+ }
+
+ const rendered = renderWithClient(queryClient, ()
+
+ const { data } = useQuery({
+ queryKey: key,
+ queryFn: spy,
+ persister: experimental_createQueryPersister({
+ storage,
+ }).persisterFn,
+ })
+
+ return setRef(value)}>{data}
+ }
+
+ const rendered = renderWithClient(queryClient, ()
+
+ const { data } = useQuery({
+ queryKey: key,
+ queryFn: spy,
+ persister: experimental_createQueryPersister({
+ storage,
+ }).persisterFn,
+ })
+
+ return setRef(value)}>{data}
+ }
+
+ const rendered = renderWithClient(queryClient, >()
+ },
+ })
+ })
+ it('should work when passed to useInfiniteQuery', () => {
+ const options = infiniteQueryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve('string'),
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+
+ const { data } = useInfiniteQuery(options)
+
+ // known issue: type of pageParams is unknown when returned from useInfiniteQuery
+ expectTypeOf(data).toEqualTypeOf<
+ InfiniteData | undefined
+ >()
+ })
+ it('should work when passed to useSuspenseInfiniteQuery', () => {
+ const options = infiniteQueryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve('string'),
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+
+ const { data } = useSuspenseInfiniteQuery(options)
+
+ expectTypeOf(data).toEqualTypeOf>()
+ })
+ it('should work when passed to fetchInfiniteQuery', async () => {
+ const options = infiniteQueryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve('string'),
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+
+ const data = await new QueryClient().fetchInfiniteQuery(options)
+
+ expectTypeOf(data).toEqualTypeOf>()
+ })
+ it('should tag the queryKey with the result type of the QueryFn', () => {
+ const { queryKey } = infiniteQueryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve('string'),
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+
+ expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf>()
+ })
+ it('should tag the queryKey even if no promise is returned', () => {
+ const { queryKey } = infiniteQueryOptions({
+ queryKey: ['key'],
+ queryFn: () => 'string',
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+
+ expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf>()
+ })
+ it('should tag the queryKey with the result type of the QueryFn if select is used', () => {
+ const { queryKey } = infiniteQueryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve('string'),
+ select: (data) => data.pages,
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+
+ expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf>()
+ })
+ it('should return the proper type when passed to getQueryData', () => {
+ const { queryKey } = infiniteQueryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve('string'),
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+
+ const queryClient = new QueryClient()
+ const data = queryClient.getQueryData(queryKey)
+
+ expectTypeOf(data).toEqualTypeOf<
+ InfiniteData | undefined
+ >()
+ })
+ it('should properly type when passed to setQueryData', () => {
+ const { queryKey } = infiniteQueryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve('string'),
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+
+ const queryClient = new QueryClient()
+ const data = queryClient.setQueryData(queryKey, (prev) => {
+ expectTypeOf(prev).toEqualTypeOf<
+ InfiniteData | undefined
+ >()
+ return prev
+ })
+
+ expectTypeOf(data).toEqualTypeOf<
+ InfiniteData | undefined
+ >()
+ })
+ it('should throw a type error when using queryFn with skipToken in a suspense query', () => {
+ const options = infiniteQueryOptions({
+ queryKey: ['key'],
+ queryFn:
+ Math.random() > 0.5 ? skipToken : () => Promise.resolve('string'),
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+ // @ts-expect-error TS2345
+ const { data } = useSuspenseInfiniteQuery(options)
+ expectTypeOf(data).toEqualTypeOf>()
+ })
+
+ test('should not be allowed to be passed to non-infinite query functions', () => {
+ const queryClient = new QueryClient()
+ const options = infiniteQueryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve('string'),
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+ assertType(
+ // @ts-expect-error cannot pass infinite options to non-infinite query functions
+ useQuery(options),
+ )
+ assertType(
+ // @ts-expect-error cannot pass infinite options to non-infinite query functions
+ queryClient.ensureQueryData(options),
+ )
+ assertType(
+ // @ts-expect-error cannot pass infinite options to non-infinite query functions
+ queryClient.fetchQuery(options),
+ )
+ assertType(
+ // @ts-expect-error cannot pass infinite options to non-infinite query functions
+ queryClient.prefetchQuery(options),
+ )
+ })
+
+ test('allow optional initialData function', () => {
+ const initialData: { example: boolean } | undefined = { example: true }
+ const queryOptions = infiniteQueryOptions({
+ queryKey: ['example'],
+ queryFn: () => initialData,
+ initialData: initialData
+ ? () => ({ pages: [initialData], pageParams: [] })
+ : undefined,
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+ expectTypeOf(queryOptions.initialData).toMatchTypeOf<
+ | InitialDataFunction>
+ | InfiniteData<{ example: boolean }, number>
+ | undefined
+ >()
+ })
+
+ test('allow optional initialData object', () => {
+ const initialData: { example: boolean } | undefined = { example: true }
+ const queryOptions = infiniteQueryOptions({
+ queryKey: ['example'],
+ queryFn: () => initialData,
+ initialData: initialData
+ ? { pages: [initialData], pageParams: [] }
+ : undefined,
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+ expectTypeOf(queryOptions.initialData).toMatchTypeOf<
+ | InitialDataFunction>
+ | InfiniteData<{ example: boolean }, number>
+ | undefined
+ >()
+ })
+
+ it('should return a custom query key type', () => {
+ type MyQueryKey = [Array, { type: 'foo' }]
+
+ const options = infiniteQueryOptions({
+ queryKey: [['key'], { type: 'foo' }] as MyQueryKey,
+ queryFn: () => Promise.resolve(1),
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+
+ expectTypeOf(options.queryKey).toEqualTypeOf<
+ DataTag, Error>
+ >()
+ })
+
+ it('should return a custom query key type with datatag', () => {
+ type MyQueryKey = DataTag<
+ [Array, { type: 'foo' }],
+ number,
+ Error & { myMessage: string }
+ >
+
+ const options = infiniteQueryOptions({
+ queryKey: [['key'], { type: 'foo' }] as MyQueryKey,
+ queryFn: () => Promise.resolve(1),
+ getNextPageParam: () => 1,
+ initialPageParam: 1,
+ })
+
+ expectTypeOf(options.queryKey).toEqualTypeOf<
+ DataTag, Error & { myMessage: string }>
+ >()
+ })
+})
diff --git a/packages/preact-query/src/__tests__/infiniteQueryOptions.test.tsx b/packages/preact-query/src/__tests__/infiniteQueryOptions.test.tsx
new file mode 100644
index 0000000000..3e876fd5d0
--- /dev/null
+++ b/packages/preact-query/src/__tests__/infiniteQueryOptions.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+
+import { infiniteQueryOptions } from '../infiniteQueryOptions'
+import type { UseInfiniteQueryOptions } from '../types'
+
+describe('infiniteQueryOptions', () => {
+ it('should return the object received as a parameter without any modification.', () => {
+ const object: UseInfiniteQueryOptions = {
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ getNextPageParam: () => null,
+ initialPageParam: null,
+ }
+
+ expect(infiniteQueryOptions(object)).toStrictEqual(object)
+ })
+})
diff --git a/packages/preact-query/src/__tests__/mutationOptions.test-d.tsx b/packages/preact-query/src/__tests__/mutationOptions.test-d.tsx
new file mode 100644
index 0000000000..2988426d65
--- /dev/null
+++ b/packages/preact-query/src/__tests__/mutationOptions.test-d.tsx
@@ -0,0 +1,217 @@
+import { assertType, describe, expectTypeOf, it } from 'vitest'
+import { QueryClient } from '@tanstack/query-core'
+import { useIsMutating, useMutation, useMutationState } from '..'
+import { mutationOptions } from '../mutationOptions'
+import type {
+ DefaultError,
+ MutationFunctionContext,
+ MutationState,
+ WithRequired,
+} from '@tanstack/query-core'
+import type { UseMutationOptions, UseMutationResult } from '../types'
+
+describe('mutationOptions', () => {
+ it('should not allow excess properties', () => {
+ // @ts-expect-error this is a good error, because onMutates does not exist!
+ mutationOptions({
+ mutationFn: () => Promise.resolve(5),
+ mutationKey: ['key'],
+ onMutates: 1000,
+ onSuccess: (data) => {
+ expectTypeOf(data).toEqualTypeOf()
+ },
+ })
+ })
+
+ it('should infer types for callbacks', () => {
+ mutationOptions({
+ mutationFn: () => Promise.resolve(5),
+ mutationKey: ['key'],
+ onSuccess: (data) => {
+ expectTypeOf(data).toEqualTypeOf()
+ },
+ })
+ })
+
+ it('should infer types for onError callback', () => {
+ mutationOptions({
+ mutationFn: () => {
+ throw new Error('fail')
+ },
+ mutationKey: ['key'],
+ onError: (error) => {
+ expectTypeOf(error).toEqualTypeOf()
+ },
+ })
+ })
+
+ it('should infer types for variables', () => {
+ mutationOptions({
+ mutationFn: (vars) => {
+ expectTypeOf(vars).toEqualTypeOf<{ id: string }>()
+ return Promise.resolve(5)
+ },
+ mutationKey: ['with-vars'],
+ })
+ })
+
+ it('should infer result type correctly', () => {
+ mutationOptions({
+ mutationFn: () => Promise.resolve(5),
+ mutationKey: ['key'],
+ onMutate: () => {
+ return { name: 'onMutateResult' }
+ },
+ onSuccess: (_data, _variables, onMutateResult) => {
+ expectTypeOf(onMutateResult).toEqualTypeOf<{ name: string }>()
+ },
+ })
+ })
+
+ it('should infer context type correctly', () => {
+ mutationOptions({
+ mutationFn: (_variables, context) => {
+ expectTypeOf(context).toEqualTypeOf()
+ return Promise.resolve(5)
+ },
+ mutationKey: ['key'],
+ onMutate: (_variables, context) => {
+ expectTypeOf(context).toEqualTypeOf()
+ },
+ onSuccess: (_data, _variables, _onMutateResult, context) => {
+ expectTypeOf(context).toEqualTypeOf()
+ },
+ onError: (_error, _variables, _onMutateResult, context) => {
+ expectTypeOf(context).toEqualTypeOf()
+ },
+ onSettled: (_data, _error, _variables, _onMutateResult, context) => {
+ expectTypeOf(context).toEqualTypeOf()
+ },
+ })
+ })
+
+ it('should error if mutationFn return type mismatches TData', () => {
+ assertType(
+ mutationOptions({
+ // @ts-expect-error this is a good error, because return type is string, not number
+ mutationFn: async () => Promise.resolve('wrong return'),
+ }),
+ )
+ })
+
+ it('should allow mutationKey to be omitted', () => {
+ return mutationOptions({
+ mutationFn: () => Promise.resolve(123),
+ onSuccess: (data) => {
+ expectTypeOf(data).toEqualTypeOf()
+ },
+ })
+ })
+
+ it('should infer all types when not explicitly provided', () => {
+ expectTypeOf(
+ mutationOptions({
+ mutationFn: (id: string) => Promise.resolve(id.length),
+ mutationKey: ['key'],
+ onSuccess: (data) => {
+ expectTypeOf(data).toEqualTypeOf()
+ },
+ }),
+ ).toEqualTypeOf<
+ WithRequired<
+ UseMutationOptions,
+ 'mutationKey'
+ >
+ >()
+ expectTypeOf(
+ mutationOptions({
+ mutationFn: (id: string) => Promise.resolve(id.length),
+ onSuccess: (data) => {
+ expectTypeOf(data).toEqualTypeOf()
+ },
+ }),
+ ).toEqualTypeOf<
+ Omit, 'mutationKey'>
+ >()
+ })
+
+ it('should infer types when used with useMutation', () => {
+ const mutation = useMutation(
+ mutationOptions({
+ mutationKey: ['key'],
+ mutationFn: () => Promise.resolve('data'),
+ onSuccess: (data) => {
+ expectTypeOf(data).toEqualTypeOf()
+ },
+ }),
+ )
+ expectTypeOf(mutation).toEqualTypeOf<
+ UseMutationResult
+ >()
+
+ useMutation(
+ // should allow when used with useMutation without mutationKey
+ mutationOptions({
+ mutationFn: () => Promise.resolve('data'),
+ onSuccess: (data) => {
+ expectTypeOf(data).toEqualTypeOf()
+ },
+ }),
+ )
+ })
+
+ it('should infer types when used with useIsMutating', () => {
+ const isMutating = useIsMutating(
+ mutationOptions({
+ mutationKey: ['key'],
+ mutationFn: () => Promise.resolve(5),
+ }),
+ )
+ expectTypeOf(isMutating).toEqualTypeOf()
+
+ useIsMutating(
+ // @ts-expect-error filters should have mutationKey
+ mutationOptions({
+ mutationFn: () => Promise.resolve(5),
+ }),
+ )
+ })
+
+ it('should infer types when used with queryClient.isMutating', () => {
+ const queryClient = new QueryClient()
+
+ const isMutating = queryClient.isMutating(
+ mutationOptions({
+ mutationKey: ['key'],
+ mutationFn: () => Promise.resolve(5),
+ }),
+ )
+ expectTypeOf(isMutating).toEqualTypeOf()
+
+ queryClient.isMutating(
+ // @ts-expect-error filters should have mutationKey
+ mutationOptions({
+ mutationFn: () => Promise.resolve(5),
+ }),
+ )
+ })
+
+ it('should infer types when used with useMutationState', () => {
+ const mutationState = useMutationState({
+ filters: mutationOptions({
+ mutationKey: ['key'],
+ mutationFn: () => Promise.resolve(5),
+ }),
+ })
+ expectTypeOf(mutationState).toEqualTypeOf<
+ Array>
+ >()
+
+ useMutationState({
+ // @ts-expect-error filters should have mutationKey
+ filters: mutationOptions({
+ mutationFn: () => Promise.resolve(5),
+ }),
+ })
+ })
+})
diff --git a/packages/preact-query/src/__tests__/mutationOptions.test.tsx b/packages/preact-query/src/__tests__/mutationOptions.test.tsx
new file mode 100644
index 0000000000..ac08a3b553
--- /dev/null
+++ b/packages/preact-query/src/__tests__/mutationOptions.test.tsx
@@ -0,0 +1,526 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { QueryClient } from '@tanstack/query-core'
+import { sleep } from '@tanstack/query-test-utils'
+import { fireEvent } from '@testing-library/preact'
+import { mutationOptions } from '../mutationOptions'
+import { useIsMutating, useMutation, useMutationState } from '..'
+import { renderWithClient } from './utils'
+import type { MutationState } from '@tanstack/query-core'
+
+describe('mutationOptions', () => {
+ beforeEach(() => {
+ vi.useFakeTimers()
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ it('should return the object received as a parameter without any modification (with mutationKey in mutationOptions)', () => {
+ const object = {
+ mutationKey: ['key'],
+ mutationFn: () => sleep(10).then(() => 5),
+ } as const
+
+ expect(mutationOptions(object)).toStrictEqual(object)
+ })
+
+ it('should return the object received as a parameter without any modification (without mutationKey in mutationOptions)', () => {
+ const object = {
+ mutationFn: () => sleep(10).then(() => 5),
+ } as const
+
+ expect(mutationOptions(object)).toStrictEqual(object)
+ })
+
+ it('should return the number of fetching mutations when used with useIsMutating (with mutationKey in mutationOptions)', async () => {
+ const isMutatingArray: Array = []
+ const queryClient = new QueryClient()
+ const mutationOpts = mutationOptions({
+ mutationKey: ['key'],
+ mutationFn: () => sleep(50).then(() => 'data'),
+ })
+
+ function IsMutating() {
+ const isMutating = useIsMutating()
+
+ isMutatingArray.push(isMutating)
+
+ return null
+ }
+
+ function Mutation() {
+ const { mutate } = useMutation(mutationOpts)
+
+ return (
+
+ mutate()}>mutate
+
+ )
+ }
+
+ function Page() {
+ return (
+
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, = []
+ const queryClient = new QueryClient()
+ const mutationOpts = mutationOptions({
+ mutationFn: () => sleep(50).then(() => 'data'),
+ })
+
+ function IsMutating() {
+ const isMutating = useIsMutating()
+
+ isMutatingArray.push(isMutating)
+
+ return null
+ }
+
+ function Mutation() {
+ const { mutate } = useMutation(mutationOpts)
+
+ return (
+
+ mutate()}>mutate
+
+ )
+ }
+
+ function Page() {
+ return (
+
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, = []
+ const queryClient = new QueryClient()
+ const mutationOpts1 = mutationOptions({
+ mutationKey: ['key'],
+ mutationFn: () => sleep(50).then(() => 'data1'),
+ })
+ const mutationOpts2 = mutationOptions({
+ mutationFn: () => sleep(50).then(() => 'data2'),
+ })
+
+ function IsMutating() {
+ const isMutating = useIsMutating()
+
+ isMutatingArray.push(isMutating)
+
+ return null
+ }
+
+ function Mutation() {
+ const { mutate: mutate1 } = useMutation(mutationOpts1)
+ const { mutate: mutate2 } = useMutation(mutationOpts2)
+
+ return (
+
+ mutate1()}>mutate1
+ mutate2()}>mutate2
+
+ )
+ }
+
+ function Page() {
+ return (
+
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, = []
+ const queryClient = new QueryClient()
+ const mutationOpts1 = mutationOptions({
+ mutationKey: ['key'],
+ mutationFn: () => sleep(50).then(() => 'data1'),
+ })
+ const mutationOpts2 = mutationOptions({
+ mutationFn: () => sleep(50).then(() => 'data2'),
+ })
+
+ function IsMutating() {
+ const isMutating = useIsMutating({
+ mutationKey: mutationOpts1.mutationKey,
+ })
+
+ isMutatingArray.push(isMutating)
+
+ return null
+ }
+
+ function Mutation() {
+ const { mutate: mutate1 } = useMutation(mutationOpts1)
+ const { mutate: mutate2 } = useMutation(mutationOpts2)
+
+ return (
+
+ mutate1()}>mutate1
+ mutate2()}>mutate2
+
+ )
+ }
+
+ function Page() {
+ return (
+
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, = []
+ const queryClient = new QueryClient()
+ const mutationOpts = mutationOptions({
+ mutationKey: ['mutation'],
+ mutationFn: () => sleep(500).then(() => 'data'),
+ })
+
+ function Mutation() {
+ const isMutating = queryClient.isMutating(mutationOpts)
+ const { mutate } = useMutation(mutationOpts)
+
+ isMutatingArray.push(isMutating)
+
+ return (
+
+ mutate()}>mutate
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, = []
+ const queryClient = new QueryClient()
+ const mutationOpts = mutationOptions({
+ mutationFn: () => sleep(500).then(() => 'data'),
+ })
+
+ function Mutation() {
+ const isMutating = queryClient.isMutating()
+ const { mutate } = useMutation(mutationOpts)
+
+ isMutatingArray.push(isMutating)
+
+ return (
+
+ mutate()}>mutate
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, = []
+ const queryClient = new QueryClient()
+ const mutationOpts1 = mutationOptions({
+ mutationKey: ['mutation'],
+ mutationFn: () => sleep(500).then(() => 'data1'),
+ })
+ const mutationOpts2 = mutationOptions({
+ mutationFn: () => sleep(500).then(() => 'data2'),
+ })
+
+ function Mutation() {
+ const isMutating = queryClient.isMutating()
+ const { mutate: mutate1 } = useMutation(mutationOpts1)
+ const { mutate: mutate2 } = useMutation(mutationOpts2)
+
+ isMutatingArray.push(isMutating)
+
+ return (
+
+ mutate1()}>mutate1
+ mutate2()}>mutate2
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, = []
+ const queryClient = new QueryClient()
+ const mutationOpts1 = mutationOptions({
+ mutationKey: ['mutation'],
+ mutationFn: () => sleep(500).then(() => 'data1'),
+ })
+ const mutationOpts2 = mutationOptions({
+ mutationFn: () => sleep(500).then(() => 'data2'),
+ })
+
+ function Mutation() {
+ const isMutating = queryClient.isMutating({
+ mutationKey: mutationOpts1.mutationKey,
+ })
+ const { mutate: mutate1 } = useMutation(mutationOpts1)
+ const { mutate: mutate2 } = useMutation(mutationOpts2)
+
+ isMutatingArray.push(isMutating)
+
+ return (
+
+ mutate1()}>mutate1
+ mutate2()}>mutate2
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient,
+ > = []
+ const queryClient = new QueryClient()
+ const mutationOpts = mutationOptions({
+ mutationKey: ['mutation'],
+ mutationFn: () => sleep(10).then(() => 'data'),
+ })
+
+ function Mutation() {
+ const { mutate } = useMutation(mutationOpts)
+ const data = useMutationState({
+ filters: { mutationKey: mutationOpts.mutationKey, status: 'success' },
+ })
+
+ mutationStateArray.push(...data)
+
+ return (
+
+ mutate()}>mutate
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient,
+ > = []
+ const queryClient = new QueryClient()
+ const mutationOpts = mutationOptions({
+ mutationFn: () => sleep(10).then(() => 'data'),
+ })
+
+ function Mutation() {
+ const { mutate } = useMutation(mutationOpts)
+ const data = useMutationState({
+ filters: { status: 'success' },
+ })
+
+ mutationStateArray.push(...data)
+
+ return (
+
+ mutate()}>mutate
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient,
+ > = []
+ const queryClient = new QueryClient()
+ const mutationOpts1 = mutationOptions({
+ mutationKey: ['mutation'],
+ mutationFn: () => sleep(10).then(() => 'data1'),
+ })
+ const mutationOpts2 = mutationOptions({
+ mutationFn: () => sleep(10).then(() => 'data2'),
+ })
+
+ function Mutation() {
+ const { mutate: mutate1 } = useMutation(mutationOpts1)
+ const { mutate: mutate2 } = useMutation(mutationOpts2)
+ const data = useMutationState({
+ filters: { status: 'success' },
+ })
+
+ mutationStateArray.push(...data)
+
+ return (
+
+ mutate1()}>mutate1
+ mutate2()}>mutate2
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient,
+ > = []
+ const queryClient = new QueryClient()
+ const mutationOpts1 = mutationOptions({
+ mutationKey: ['mutation'],
+ mutationFn: () => sleep(10).then(() => 'data1'),
+ })
+ const mutationOpts2 = mutationOptions({
+ mutationFn: () => sleep(10).then(() => 'data2'),
+ })
+
+ function Mutation() {
+ const { mutate: mutate1 } = useMutation(mutationOpts1)
+ const { mutate: mutate2 } = useMutation(mutationOpts2)
+ const data = useMutationState({
+ filters: { mutationKey: mutationOpts1.mutationKey, status: 'success' },
+ })
+
+ mutationStateArray.push(...data)
+
+ return (
+
+ mutate1()}>mutate1
+ mutate2()}>mutate2
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, ()
+ },
+ })
+ })
+ it('should work when passed to useQuery', () => {
+ const options = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ })
+
+ const { data } = useQuery(options)
+ expectTypeOf(data).toEqualTypeOf()
+ })
+ it('should work when passed to useSuspenseQuery', () => {
+ const options = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ })
+
+ const { data } = useSuspenseQuery(options)
+ expectTypeOf(data).toEqualTypeOf()
+ })
+
+ it('should work when passed to fetchQuery', async () => {
+ const options = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ })
+
+ const data = await new QueryClient().fetchQuery(options)
+ expectTypeOf(data).toEqualTypeOf()
+ })
+ it('should work when passed to useQueries', () => {
+ const options = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ })
+
+ const [{ data }] = useQueries({
+ queries: [options],
+ })
+
+ expectTypeOf(data).toEqualTypeOf()
+ })
+ it('should tag the queryKey with the result type of the QueryFn', () => {
+ const { queryKey } = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ })
+
+ expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf()
+ })
+ it('should tag the queryKey even if no promise is returned', () => {
+ const { queryKey } = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => 5,
+ })
+
+ expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf()
+ })
+ it('should tag the queryKey with unknown if there is no queryFn', () => {
+ const { queryKey } = queryOptions({
+ queryKey: ['key'],
+ })
+
+ expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf()
+ })
+ it('should tag the queryKey with the result type of the QueryFn if select is used', () => {
+ const { queryKey } = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ select: (data) => data.toString(),
+ })
+
+ expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf()
+ })
+ it('should return the proper type when passed to getQueryData', () => {
+ const { queryKey } = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ })
+
+ const queryClient = new QueryClient()
+ const data = queryClient.getQueryData(queryKey)
+ expectTypeOf(data).toEqualTypeOf()
+ })
+ it('should return the proper type when passed to getQueryState', () => {
+ const { queryKey } = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ })
+
+ const queryClient = new QueryClient()
+ const state = queryClient.getQueryState(queryKey)
+ expectTypeOf(state?.data).toEqualTypeOf()
+ })
+ it('should properly type updaterFn when passed to setQueryData', () => {
+ const { queryKey } = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ })
+
+ const queryClient = new QueryClient()
+ const data = queryClient.setQueryData(queryKey, (prev) => {
+ expectTypeOf(prev).toEqualTypeOf()
+ return prev
+ })
+ expectTypeOf(data).toEqualTypeOf()
+ })
+ it('should properly type value when passed to setQueryData', () => {
+ const { queryKey } = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ })
+
+ const queryClient = new QueryClient()
+
+ // @ts-expect-error value should be a number
+ queryClient.setQueryData(queryKey, '5')
+ // @ts-expect-error value should be a number
+ queryClient.setQueryData(queryKey, () => '5')
+
+ const data = queryClient.setQueryData(queryKey, 5)
+ expectTypeOf(data).toEqualTypeOf()
+ })
+
+ it('should infer even if there is a conditional skipToken', () => {
+ const options = queryOptions({
+ queryKey: ['key'],
+ queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+ })
+
+ const queryClient = new QueryClient()
+ const data = queryClient.getQueryData(options.queryKey)
+ expectTypeOf(data).toEqualTypeOf()
+ })
+
+ it('should infer to unknown if we disable a query with just a skipToken', () => {
+ const options = queryOptions({
+ queryKey: ['key'],
+ queryFn: skipToken,
+ })
+
+ const queryClient = new QueryClient()
+ const data = queryClient.getQueryData(options.queryKey)
+ expectTypeOf(data).toEqualTypeOf()
+ })
+
+ it('should throw a type error when using queryFn with skipToken in a suspense query', () => {
+ const options = queryOptions({
+ queryKey: ['key'],
+ queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+ })
+ // @ts-expect-error TS2345
+ const { data } = useSuspenseQuery(options)
+ expectTypeOf(data).toEqualTypeOf()
+ })
+
+ it('should return the proper type when passed to QueriesObserver', () => {
+ const options = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ })
+
+ const queryClient = new QueryClient()
+ const queriesObserver = new QueriesObserver(queryClient, [options])
+ expectTypeOf(queriesObserver).toEqualTypeOf<
+ QueriesObserver>
+ >()
+ })
+
+ it('should allow undefined response in initialData', () => {
+ assertType((id: string | null) =>
+ queryOptions({
+ queryKey: ['todo', id],
+ queryFn: () =>
+ Promise.resolve({
+ id: '1',
+ title: 'Do Laundry',
+ }),
+ initialData: () =>
+ !id
+ ? undefined
+ : {
+ id,
+ title: 'Initial Data',
+ },
+ }),
+ )
+ })
+
+ it('should allow optional initialData object', () => {
+ const testFn = (id?: string) => {
+ const options = queryOptions({
+ queryKey: ['test'],
+ queryFn: () => Promise.resolve('something string'),
+ initialData: id ? 'initial string' : undefined,
+ })
+ expectTypeOf(options.initialData).toMatchTypeOf<
+ InitialDataFunction | string | undefined
+ >()
+ }
+ testFn('id')
+ testFn()
+ })
+
+ it('should be passable to UseQueryOptions', () => {
+ function somethingWithQueryOptions(
+ options: TQueryOpts,
+ ) {
+ return options.queryKey
+ }
+
+ const options = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(1),
+ })
+
+ assertType(somethingWithQueryOptions(options))
+ })
+
+ it('should return a custom query key type', () => {
+ type MyQueryKey = [Array, { type: 'foo' }]
+
+ const options = queryOptions({
+ queryKey: [['key'], { type: 'foo' }] as MyQueryKey,
+ queryFn: () => Promise.resolve(1),
+ })
+
+ expectTypeOf(options.queryKey).toEqualTypeOf<
+ DataTag
+ >()
+ })
+
+ it('should return a custom query key type with datatag', () => {
+ type MyQueryKey = DataTag<
+ [Array, { type: 'foo' }],
+ number,
+ Error & { myMessage: string }
+ >
+
+ const options = queryOptions({
+ queryKey: [['key'], { type: 'foo' }] as MyQueryKey,
+ queryFn: () => Promise.resolve(1),
+ })
+
+ expectTypeOf(options.queryKey).toEqualTypeOf<
+ DataTag
+ >()
+ })
+})
diff --git a/packages/preact-query/src/__tests__/queryOptions.test.tsx b/packages/preact-query/src/__tests__/queryOptions.test.tsx
new file mode 100644
index 0000000000..28e539690b
--- /dev/null
+++ b/packages/preact-query/src/__tests__/queryOptions.test.tsx
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+import { queryOptions } from '../queryOptions'
+import type { UseQueryOptions } from '../types'
+
+describe('queryOptions', () => {
+ it('should return the object received as a parameter without any modification.', () => {
+ const object: UseQueryOptions = {
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ } as const
+
+ expect(queryOptions(object)).toStrictEqual(object)
+ })
+})
diff --git a/packages/preact-query/src/__tests__/ssr-hydration.test.tsx b/packages/preact-query/src/__tests__/ssr-hydration.test.tsx
new file mode 100644
index 0000000000..dfc75367d5
--- /dev/null
+++ b/packages/preact-query/src/__tests__/ssr-hydration.test.tsx
@@ -0,0 +1,269 @@
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
+import { renderToString } from 'preact-render-to-string'
+import { hydrate as preactHydrate, VNode } from 'preact'
+import {
+ QueryCache,
+ QueryClient,
+ QueryClientProvider,
+ dehydrate,
+ hydrate,
+ useQuery,
+} from '..'
+import { setIsServer } from './utils'
+import { act } from '@testing-library/preact'
+
+const ReactHydrate = (element: VNode, container: Element) => {
+ let root: any
+ act(() => {
+ root = preactHydrate(element, container)
+ })
+ return () => {
+ root.unmount()
+ }
+}
+
+async function fetchData(value: TData, ms?: number): Promise {
+ await vi.advanceTimersByTimeAsync(ms || 1)
+ return value
+}
+
+function PrintStateComponent({ componentName, result }: any): any {
+ return `${componentName} - status:${result.status} fetching:${result.isFetching} data:${result.data}`
+}
+
+describe('Server side rendering with de/rehydration', () => {
+ let previousIsReactActEnvironment: unknown
+ beforeAll(() => {
+ // @ts-expect-error we expect IS_REACT_ACT_ENVIRONMENT to exist
+ previousIsReactActEnvironment = globalThis.IS_REACT_ACT_ENVIRONMENT = true
+ vi.useFakeTimers()
+ })
+
+ afterAll(() => {
+ // @ts-expect-error we expect IS_REACT_ACT_ENVIRONMENT to exist
+ globalThis.IS_REACT_ACT_ENVIRONMENT = previousIsReactActEnvironment
+ vi.useRealTimers()
+ })
+
+ it('should not mismatch on success', async () => {
+ const consoleMock = vi.spyOn(console, 'error')
+ consoleMock.mockImplementation(() => undefined)
+
+ const fetchDataSuccess = vi.fn(fetchData)
+
+ // -- Shared part --
+ function SuccessComponent() {
+ const result = useQuery({
+ queryKey: ['success'],
+ queryFn: () => fetchDataSuccess('success!'),
+ })
+ return (
+
+ ,
+ )
+ const stringifiedState = JSON.stringify(dehydratedStateServer)
+ renderClient.clear()
+ setIsServer(false)
+
+ const expectedMarkup =
+ 'SuccessComponent - status:success fetching:true data:success'
+
+ expect(markup).toBe(expectedMarkup)
+ expect(fetchDataSuccess).toHaveBeenCalledTimes(1)
+
+ // -- Client part --
+ const el = document.createElement('div')
+ el.innerHTML = markup
+
+ const queryCache = new QueryCache()
+ const queryClient = new QueryClient({ queryCache })
+ hydrate(queryClient, JSON.parse(stringifiedState))
+
+ const unmount = ReactHydrate(
+
+ ,
+ el,
+ )
+
+ // Check that we have no React hydration mismatches
+ expect(consoleMock).toHaveBeenCalledTimes(0)
+
+ expect(fetchDataSuccess).toHaveBeenCalledTimes(2)
+ expect(el.innerHTML).toBe(expectedMarkup)
+
+ unmount()
+ queryClient.clear()
+ consoleMock.mockRestore()
+ })
+
+ it('should not mismatch on error', async () => {
+ const consoleMock = vi.spyOn(console, 'error')
+ consoleMock.mockImplementation(() => undefined)
+
+ const fetchDataError = vi.fn(() => {
+ throw new Error('fetchDataError')
+ })
+
+ // -- Shared part --
+ function ErrorComponent() {
+ const result = useQuery({
+ queryKey: ['error'],
+ queryFn: () => fetchDataError(),
+ retry: false,
+ })
+ return (
+
+ ,
+ )
+ const stringifiedState = JSON.stringify(dehydratedStateServer)
+ renderClient.clear()
+ setIsServer(false)
+
+ const expectedMarkup =
+ 'ErrorComponent - status:pending fetching:true data:undefined'
+
+ expect(markup).toBe(expectedMarkup)
+
+ // -- Client part --
+ const el = document.createElement('div')
+ el.innerHTML = markup
+
+ const queryCache = new QueryCache()
+ const queryClient = new QueryClient({ queryCache })
+ hydrate(queryClient, JSON.parse(stringifiedState))
+
+ const unmount = ReactHydrate(
+
+ ,
+ el,
+ )
+
+ expect(consoleMock).toHaveBeenCalledTimes(0)
+ expect(fetchDataError).toHaveBeenCalledTimes(2)
+ expect(el.innerHTML).toBe(expectedMarkup)
+ await vi.advanceTimersByTimeAsync(50)
+ expect(fetchDataError).toHaveBeenCalledTimes(2)
+ expect(el.innerHTML).toBe(
+ 'ErrorComponent - status:error fetching:false data:undefined',
+ )
+
+ unmount()
+ queryClient.clear()
+ consoleMock.mockRestore()
+ })
+
+ it('should not mismatch on queries that were not prefetched', async () => {
+ const consoleMock = vi.spyOn(console, 'error')
+ consoleMock.mockImplementation(() => undefined)
+
+ const fetchDataSuccess = vi.fn(fetchData)
+
+ // -- Shared part --
+ function SuccessComponent() {
+ const result = useQuery({
+ queryKey: ['success'],
+ queryFn: () => fetchDataSuccess('success!'),
+ })
+ return (
+
+ ,
+ )
+ const stringifiedState = JSON.stringify(dehydratedStateServer)
+ renderClient.clear()
+ setIsServer(false)
+
+ const expectedMarkup =
+ 'SuccessComponent - status:pending fetching:true data:undefined'
+
+ expect(markup).toBe(expectedMarkup)
+
+ // -- Client part --
+ const el = document.createElement('div')
+ el.innerHTML = markup
+
+ const queryCache = new QueryCache()
+ const queryClient = new QueryClient({ queryCache })
+ hydrate(queryClient, JSON.parse(stringifiedState))
+
+ const unmount = ReactHydrate(
+
+ ,
+ el,
+ )
+
+ // Check that we have no React hydration mismatches
+ expect(consoleMock).toHaveBeenCalledTimes(0)
+ expect(fetchDataSuccess).toHaveBeenCalledTimes(1)
+ expect(el.innerHTML).toBe(expectedMarkup)
+ await vi.advanceTimersByTimeAsync(50)
+ expect(fetchDataSuccess).toHaveBeenCalledTimes(1)
+ expect(el.innerHTML).toBe(
+ 'SuccessComponent - status:success fetching:false data:success!',
+ )
+
+ unmount()
+ queryClient.clear()
+ consoleMock.mockRestore()
+ })
+})
diff --git a/packages/preact-query/src/__tests__/ssr.test.tsx b/packages/preact-query/src/__tests__/ssr.test.tsx
new file mode 100644
index 0000000000..56769d3afb
--- /dev/null
+++ b/packages/preact-query/src/__tests__/ssr.test.tsx
@@ -0,0 +1,176 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import {
+ QueryCache,
+ QueryClient,
+ QueryClientProvider,
+ useInfiniteQuery,
+ useQuery,
+} from '..'
+import { setIsServer } from './utils'
+import { renderToString } from 'preact-render-to-string'
+import { useState } from 'preact/hooks'
+
+describe('Server Side Rendering', () => {
+ setIsServer(true)
+
+ let queryCache: QueryCache
+ let queryClient: QueryClient
+
+ beforeEach(() => {
+ vi.useFakeTimers()
+ queryCache = new QueryCache()
+ queryClient = new QueryClient({ queryCache })
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ it('should not trigger fetch', () => {
+ const key = queryKey()
+ const queryFn = vi.fn(() => sleep(10).then(() => 'data'))
+
+ function Page() {
+ const query = useQuery({ queryKey: key, queryFn })
+
+ const content = `status ${query.status}`
+
+ return (
+
+ )
+ }
+
+ const markup = renderToString(
+
+ ,
+ )
+
+ expect(markup).toContain('status pending')
+ expect(queryFn).toHaveBeenCalledTimes(0)
+
+ queryCache.clear()
+ })
+
+ it('should add prefetched data to cache', async () => {
+ const key = queryKey()
+
+ const promise = queryClient.fetchQuery({
+ queryKey: key,
+ queryFn: () => sleep(10).then(() => 'data'),
+ })
+ await vi.advanceTimersByTimeAsync(10)
+
+ const data = await promise
+
+ expect(data).toBe('data')
+ expect(queryCache.find({ queryKey: key })?.state.data).toBe('data')
+
+ queryCache.clear()
+ })
+
+ it('should return existing data from the cache', async () => {
+ const key = queryKey()
+ const queryFn = vi.fn(() => sleep(10).then(() => 'data'))
+
+ function Page() {
+ const query = useQuery({ queryKey: key, queryFn })
+
+ const content = `status ${query.status}`
+
+ return (
+
+ )
+ }
+
+ queryClient.prefetchQuery({ queryKey: key, queryFn })
+ await vi.advanceTimersByTimeAsync(10)
+
+ const markup = renderToString(
+
+ ,
+ )
+
+ expect(markup).toContain('status success')
+ expect(queryFn).toHaveBeenCalledTimes(1)
+
+ queryCache.clear()
+ })
+
+ it('should add initialData to the cache', () => {
+ const key = queryKey()
+
+ function Page() {
+ const [page, setPage] = useState(1)
+ const { data } = useQuery({
+ queryKey: [key, page],
+ queryFn: () => sleep(10).then(() => page),
+ initialData: 1,
+ })
+
+ return (
+
+
{data}
+ setPage(page + 1)}>next
+
+ )
+ }
+
+ renderToString(
+
+ ,
+ )
+
+ const keys = queryCache.getAll().map((query) => query.queryKey)
+
+ expect(keys).toEqual([[key, 1]])
+
+ queryCache.clear()
+ })
+
+ it('useInfiniteQuery should return the correct state', async () => {
+ const key = queryKey()
+ const queryFn = vi.fn(() => sleep(10).then(() => 'page 1'))
+
+ function Page() {
+ const query = useInfiniteQuery({
+ queryKey: key,
+ queryFn,
+ getNextPageParam: () => undefined,
+ initialPageParam: 0,
+ })
+ return (
+
+ {query.data?.pages.map((page) => (
+ {page}
+ ))}
+
+ )
+ }
+
+ queryClient.prefetchInfiniteQuery({
+ queryKey: key,
+ queryFn,
+ initialPageParam: 0,
+ })
+ await vi.advanceTimersByTimeAsync(10)
+
+ const markup = renderToString(
+
+ ,
+ )
+
+ expect(markup).toContain('page 1')
+ expect(queryFn).toHaveBeenCalledTimes(1)
+
+ queryCache.clear()
+ })
+})
diff --git a/packages/preact-query/src/__tests__/suspense.test.tsx b/packages/preact-query/src/__tests__/suspense.test.tsx
new file mode 100644
index 0000000000..7c6bc5ca9b
--- /dev/null
+++ b/packages/preact-query/src/__tests__/suspense.test.tsx
@@ -0,0 +1,184 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render } from '@testing-library/preact'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import { QueryClient, QueryClientProvider, useSuspenseQuery } from '..'
+import type { QueryKey } from '..'
+import { Suspense } from 'preact/compat'
+
+function renderWithSuspense(client: QueryClient, ui: React.ReactNode) {
+ return render(
+
+ {ui}
+ ,
+ )
+}
+
+function createTestQuery(options: {
+ fetchCount: { count: number }
+ queryKey: QueryKey
+ staleTime?: number | (() => number)
+}) {
+ return function TestComponent() {
+ const { data } = useSuspenseQuery({
+ queryKey: options.queryKey,
+ queryFn: () =>
+ sleep(10).then(() => {
+ options.fetchCount.count++
+ return 'data'
+ }),
+ staleTime: options.staleTime,
+ })
+ return data: {data}
+ }
+}
+
+describe('Suspense Timer Tests', () => {
+ let queryClient: QueryClient
+ let fetchCount: { count: number }
+
+ beforeEach(() => {
+ vi.useFakeTimers()
+ queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+ })
+ fetchCount = { count: 0 }
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ it('should enforce minimum staleTime of 1000ms when using suspense with number', async () => {
+ const TestComponent = createTestQuery({
+ fetchCount,
+ queryKey: ['test'],
+ staleTime: 10,
+ })
+
+ const rendered = renderWithSuspense(queryClient,
+
+
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(10)
+
+ expect(fetchCount.count).toBe(1)
+ })
+
+ it('should enforce minimum staleTime of 1000ms when using suspense with function', async () => {
+ const TestComponent = createTestQuery({
+ fetchCount,
+ queryKey: ['test-func'],
+ staleTime: () => 10,
+ })
+
+ const rendered = renderWithSuspense(queryClient,
+
+
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(10)
+
+ expect(fetchCount.count).toBe(1)
+ })
+
+ it('should respect staleTime when value is greater than 1000ms', async () => {
+ const TestComponent = createTestQuery({
+ fetchCount,
+ queryKey: queryKey(),
+ staleTime: 2000,
+ })
+
+ const rendered = renderWithSuspense(queryClient,
+
+
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(1500)
+
+ expect(fetchCount.count).toBe(1)
+ })
+
+ it('should enforce minimum staleTime when undefined is provided', async () => {
+ const TestComponent = createTestQuery({
+ fetchCount,
+ queryKey: queryKey(),
+ staleTime: undefined,
+ })
+
+ const rendered = renderWithSuspense(queryClient,
+
+
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(500)
+
+ expect(fetchCount.count).toBe(1)
+ })
+
+ it('should respect staleTime when function returns value greater than 1000ms', async () => {
+ const TestComponent = createTestQuery({
+ fetchCount,
+ queryKey: queryKey(),
+ staleTime: () => 3000,
+ })
+
+ const rendered = renderWithSuspense(queryClient,
+
+
+ ,
+ )
+
+ await vi.advanceTimersByTimeAsync(2000)
+
+ expect(fetchCount.count).toBe(1)
+ })
+})
diff --git a/packages/preact-query/src/__tests__/useInfiniteQuery.test-d.tsx b/packages/preact-query/src/__tests__/useInfiniteQuery.test-d.tsx
new file mode 100644
index 0000000000..a231d20600
--- /dev/null
+++ b/packages/preact-query/src/__tests__/useInfiniteQuery.test-d.tsx
@@ -0,0 +1,142 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { QueryClient } from '@tanstack/query-core'
+import { useInfiniteQuery } from '../useInfiniteQuery'
+import type { InfiniteData } from '@tanstack/query-core'
+
+describe('pageParam', () => {
+ it('initialPageParam should define type of param passed to queryFunctionContext', () => {
+ useInfiniteQuery({
+ queryKey: ['key'],
+ queryFn: ({ pageParam }) => {
+ expectTypeOf(pageParam).toEqualTypeOf()
+ },
+ initialPageParam: 1,
+ getNextPageParam: () => undefined,
+ })
+ })
+
+ it('direction should be passed to queryFn of useInfiniteQuery', () => {
+ useInfiniteQuery({
+ queryKey: ['key'],
+ queryFn: ({ direction }) => {
+ expectTypeOf(direction).toEqualTypeOf<'forward' | 'backward'>()
+ },
+ initialPageParam: 1,
+ getNextPageParam: () => undefined,
+ })
+ })
+
+ it('initialPageParam should define type of param passed to queryFunctionContext for fetchInfiniteQuery', () => {
+ const queryClient = new QueryClient()
+ queryClient.fetchInfiniteQuery({
+ queryKey: ['key'],
+ queryFn: ({ pageParam }) => {
+ expectTypeOf(pageParam).toEqualTypeOf()
+ },
+ initialPageParam: 1,
+ })
+ })
+
+ it('initialPageParam should define type of param passed to queryFunctionContext for prefetchInfiniteQuery', () => {
+ const queryClient = new QueryClient()
+ queryClient.prefetchInfiniteQuery({
+ queryKey: ['key'],
+ queryFn: ({ pageParam }) => {
+ expectTypeOf(pageParam).toEqualTypeOf()
+ },
+ initialPageParam: 1,
+ })
+ })
+})
+describe('select', () => {
+ it('should still return paginated data if no select result', () => {
+ const infiniteQuery = useInfiniteQuery({
+ queryKey: ['key'],
+ queryFn: ({ pageParam }) => {
+ return pageParam * 5
+ },
+ initialPageParam: 1,
+ getNextPageParam: () => undefined,
+ })
+
+ // TODO: Order of generics prevents pageParams to be typed correctly. Using `unknown` for now
+ expectTypeOf(infiniteQuery.data).toEqualTypeOf<
+ InfiniteData | undefined
+ >()
+ })
+
+ it('should be able to transform data to arbitrary result', () => {
+ const infiniteQuery = useInfiniteQuery({
+ queryKey: ['key'],
+ queryFn: ({ pageParam }) => {
+ return pageParam * 5
+ },
+ initialPageParam: 1,
+ getNextPageParam: () => undefined,
+ select: (data) => {
+ expectTypeOf(data).toEqualTypeOf>()
+ return 'selected' as const
+ },
+ })
+
+ expectTypeOf(infiniteQuery.data).toEqualTypeOf<'selected' | undefined>()
+ })
+})
+describe('getNextPageParam / getPreviousPageParam', () => {
+ it('should get typed params', () => {
+ const infiniteQuery = useInfiniteQuery({
+ queryKey: ['key'],
+ queryFn: ({ pageParam }) => {
+ return String(pageParam)
+ },
+ initialPageParam: 1,
+ getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => {
+ expectTypeOf(lastPage).toEqualTypeOf()
+ expectTypeOf(allPages).toEqualTypeOf>()
+ expectTypeOf(lastPageParam).toEqualTypeOf()
+ expectTypeOf(allPageParams).toEqualTypeOf>()
+ return undefined
+ },
+ getPreviousPageParam: (
+ firstPage,
+ allPages,
+ firstPageParam,
+ allPageParams,
+ ) => {
+ expectTypeOf(firstPage).toEqualTypeOf()
+ expectTypeOf(allPages).toEqualTypeOf>()
+ expectTypeOf(firstPageParam).toEqualTypeOf()
+ expectTypeOf(allPageParams).toEqualTypeOf>()
+ return undefined
+ },
+ })
+
+ // TODO: Order of generics prevents pageParams to be typed correctly. Using `unknown` for now
+ expectTypeOf(infiniteQuery.data).toEqualTypeOf<
+ InfiniteData | undefined
+ >()
+ })
+})
+
+describe('error booleans', () => {
+ it('should not be permanently `false`', () => {
+ const {
+ isFetchNextPageError,
+ isFetchPreviousPageError,
+ isLoadingError,
+ isRefetchError,
+ } = useInfiniteQuery({
+ queryKey: ['key'],
+ queryFn: ({ pageParam }) => {
+ return pageParam * 5
+ },
+ initialPageParam: 1,
+ getNextPageParam: () => undefined,
+ })
+
+ expectTypeOf(isFetchNextPageError).toEqualTypeOf()
+ expectTypeOf(isFetchPreviousPageError).toEqualTypeOf()
+ expectTypeOf(isLoadingError).toEqualTypeOf()
+ expectTypeOf(isRefetchError).toEqualTypeOf()
+ })
+})
diff --git a/packages/preact-query/src/__tests__/useInfiniteQuery.test.tsx b/packages/preact-query/src/__tests__/useInfiniteQuery.test.tsx
new file mode 100644
index 0000000000..27e070f898
--- /dev/null
+++ b/packages/preact-query/src/__tests__/useInfiniteQuery.test.tsx
@@ -0,0 +1,1860 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render } from '@testing-library/preact'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import {
+ QueryCache,
+ QueryClient,
+ QueryClientProvider,
+ keepPreviousData,
+ useInfiniteQuery,
+} from '..'
+import { renderWithClient, setActTimeout } from './utils'
+import type {
+ InfiniteData,
+ QueryFunctionContext,
+ UseInfiniteQueryResult,
+} from '..'
+import type { Mock } from 'vitest'
+import { Suspense } from 'preact/compat'
+
+interface Result {
+ items: Array
+ nextId?: number
+ prevId?: number
+ ts: number
+}
+
+const pageSize = 10
+
+const fetchItems = async (
+ page: number,
+ ts: number,
+ noNext?: boolean,
+ noPrev?: boolean,
+): Promise => {
+ await sleep(10)
+ return {
+ items: [...new Array(10)].fill(null).map((_, d) => page * pageSize + d),
+ nextId: noNext ? undefined : page + 1,
+ prevId: noPrev ? undefined : page - 1,
+ ts,
+ }
+}
+
+describe('useInfiniteQuery', () => {
+ beforeEach(() => {
+ vi.useFakeTimers()
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ const queryCache = new QueryCache()
+ const queryClient = new QueryClient({
+ queryCache,
+ defaultOptions: {
+ queries: {
+ experimental_prefetchInRender: true,
+ },
+ },
+ })
+
+ it('should return the correct states for a successful query', async () => {
+ const key = queryKey()
+ const states: Array>> = []
+
+ function Page() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
+ getNextPageParam: (lastPage) => lastPage + 1,
+ initialPageParam: 0,
+ })
+ states.push(state)
+ return null
+ }
+
+ renderWithClient(queryClient, >> = []
+
+ function Page() {
+ const [order, setOrder] = useState('desc')
+
+ const state = useInfiniteQuery({
+ queryKey: [key, order],
+ queryFn: ({ pageParam }) =>
+ sleep(10).then(() => `${pageParam}-${order}`),
+ getNextPageParam: () => 1,
+ initialPageParam: 0,
+ placeholderData: keepPreviousData,
+ notifyOnChangeProps: 'all',
+ })
+
+ states.push(state)
+
+ return (
+
+
state.fetchNextPage()}>fetchNextPage
+
setOrder('asc')}>order
+
data: {state.data?.pages.join(',') ?? 'null'}
+
isFetching: {String(state.isFetching)}
+
>> = []
+
+ function Page() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: () => sleep(10).then(() => ({ count: 1 })),
+ select: (data) => ({
+ pages: data.pages.map((x) => `count: ${x.count}`),
+ pageParams: data.pageParams,
+ }),
+ getNextPageParam: () => undefined,
+ initialPageParam: 0,
+ })
+ states.push(state)
+
+ return {state.data?.pages.join(',')}
+ }
+
+ const rendered = renderWithClient(queryClient, >
+ > = []
+ let selectCalled = 0
+
+ function Page() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: () => sleep(10).then(() => ({ count: 1 })),
+ select: useCallback((data: InfiniteData<{ count: number }>) => {
+ selectCalled++
+ return {
+ pages: data.pages.map((x) => ({ ...x, id: Math.random() })),
+ pageParams: data.pageParams,
+ }
+ }, []),
+ getNextPageParam: () => undefined,
+ initialPageParam: 0,
+ })
+ states.push(state)
+
+ return (
+
+ {state.data?.pages.map((page) => (
+
count: {page.count}
+ ))}
+
>> = []
+
+ function Page() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
+ select: (data) => ({
+ pages: [...data.pages].reverse(),
+ pageParams: [...data.pageParams].reverse(),
+ }),
+ notifyOnChangeProps: 'all',
+ getNextPageParam: () => 1,
+ initialPageParam: 0,
+ })
+
+ states.push(state)
+
+ return (
+
+
state.fetchNextPage()}>fetchNextPage
+
data: {state.data?.pages.join(',') ?? 'null'}
+
isFetching: {state.isFetching}
+
>> = []
+
+ function Page() {
+ const start = 10
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
+ initialPageParam: start,
+ getNextPageParam: (lastPage) => lastPage + 1,
+ getPreviousPageParam: (firstPage) => firstPage - 1,
+ notifyOnChangeProps: 'all',
+ })
+
+ states.push(state)
+
+ return (
+
+
data: {state.data?.pages.join(',') ?? null}
+
state.fetchPreviousPage()}>
+ fetch previous page
+
+
>> = []
+
+ function Page() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
+ initialPageParam: 10,
+ getPreviousPageParam: (firstPage) => firstPage - 1,
+ getNextPageParam: (lastPage) => lastPage + 1,
+ notifyOnChangeProps: 'all',
+ })
+
+ states.push(state)
+
+ return (
+
+
state.fetchNextPage()}>fetchNextPage
+
state.fetchPreviousPage()}>
+ fetchPreviousPage
+
+
state.refetch()}>refetch
+
data: {state.data?.pages.join(',') ?? 'null'}
+
isFetching: {String(state.isFetching)}
+
>> = []
+ let isRefetch = false
+
+ function Page() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) =>
+ sleep(10).then(() => {
+ if (isRefetch) throw new Error()
+ return pageParam
+ }),
+ initialPageParam: 10,
+ getPreviousPageParam: (firstPage) => firstPage - 1,
+ getNextPageParam: (lastPage) => lastPage + 1,
+ notifyOnChangeProps: 'all',
+ retry: false,
+ })
+
+ states.push(state)
+
+ return (
+
+
{
+ isRefetch = true
+ state.refetch()
+ }}
+ >
+ refetch
+
+
data: {state.data?.pages.join(',') ?? 'null'}
+
isFetching: {String(state.isFetching)}
+
>> = []
+
+ function Page() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) =>
+ sleep(10).then(() => {
+ if (pageParam !== 10) throw new Error()
+ return pageParam
+ }),
+ initialPageParam: 10,
+ getPreviousPageParam: (firstPage) => firstPage - 1,
+ getNextPageParam: (lastPage) => lastPage + 1,
+ notifyOnChangeProps: 'all',
+ retry: false,
+ })
+
+ states.push(state)
+
+ return (
+
+
state.fetchNextPage()}>fetchNextPage
+
data: {state.data?.pages.join(',') ?? 'null'}
+
isFetching: {String(state.isFetching)}
+
>> = []
+
+ function Page() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) =>
+ sleep(10).then(() => {
+ if (pageParam !== 10) throw new Error()
+ return pageParam
+ }),
+ initialPageParam: 10,
+ getPreviousPageParam: (firstPage) => firstPage - 1,
+ getNextPageParam: (lastPage) => lastPage + 1,
+ notifyOnChangeProps: 'all',
+ retry: false,
+ })
+
+ states.push(state)
+
+ return (
+
+
state.fetchPreviousPage()}>
+ fetchPreviousPage
+
+
data: {state.data?.pages.join(',') ?? 'null'}
+
isFetching: {String(state.isFetching)}
+
+
fetchNextPage()}>fetchNextPage
+
refetch()}>refetch
+
data: {JSON.stringify(data)}
+
+ status: {status}, {fetchStatus}
+
+
) => any>> = []
+ const abortListeners: Array) => any>> = []
+ const fetchPage = vi.fn<
+ (context: QueryFunctionContext) => Promise
+ >(async ({ pageParam, signal }) => {
+ const onAbort = vi.fn()
+ const abortListener = vi.fn()
+ onAborts.push(onAbort)
+ abortListeners.push(abortListener)
+ signal.onabort = onAbort
+ signal.addEventListener('abort', abortListener)
+ await sleep(50)
+ return pageParam
+ })
+
+ function Page() {
+ const { fetchNextPage } = useInfiniteQuery({
+ queryKey: key,
+ queryFn: fetchPage,
+ initialPageParam: start,
+ getNextPageParam: (lastPage) => lastPage + 1,
+ })
+
+ useEffect(() => {
+ setActTimeout(() => {
+ fetchNextPage()
+ }, 100)
+ setActTimeout(() => {
+ fetchNextPage()
+ }, 110)
+ }, [fetchNextPage])
+
+ return null
+ }
+
+ renderWithClient(queryClient, ) => any>> = []
+ const abortListeners: Array) => any>> = []
+ const fetchPage = vi.fn<
+ (context: QueryFunctionContext) => Promise
+ >(async ({ pageParam, signal }) => {
+ const onAbort = vi.fn()
+ const abortListener = vi.fn()
+ onAborts.push(onAbort)
+ abortListeners.push(abortListener)
+ signal.onabort = onAbort
+ signal.addEventListener('abort', abortListener)
+ await sleep(50)
+ return pageParam
+ })
+
+ function Page() {
+ const { fetchNextPage } = useInfiniteQuery({
+ queryKey: key,
+ queryFn: fetchPage,
+ initialPageParam: start,
+ getNextPageParam: (lastPage) => lastPage + 1,
+ })
+
+ useEffect(() => {
+ setActTimeout(() => {
+ fetchNextPage()
+ }, 100)
+ setActTimeout(() => {
+ fetchNextPage({ cancelRefetch: false })
+ }, 110)
+ }, [fetchNextPage])
+
+ return null
+ }
+
+ renderWithClient(queryClient, >> = []
+
+ function Page() {
+ const start = 10
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) => sleep(50).then(() => pageParam),
+ initialPageParam: start,
+ getNextPageParam: (lastPage) => lastPage + 1,
+ notifyOnChangeProps: 'all',
+ })
+
+ states.push(state)
+
+ const { fetchNextPage } = state
+
+ useEffect(() => {
+ setActTimeout(() => {
+ fetchNextPage()
+ }, 10)
+ }, [fetchNextPage])
+
+ return null
+ }
+
+ renderWithClient(queryClient,
: null
+ }
+
+ renderWithClient(queryClient,
+
{
+ queryClient.setQueryData(key, {
+ pages: [7, 8],
+ pageParams: [7, 8],
+ })
+ setFirstPage(7)
+ }}
+ >
+ setPages
+
+
state.refetch()}>refetch
+
data: {JSON.stringify(state.data)}
+
>>()
+
+ // function Page() {
+ // const state = useInfiniteQuery({
+ // queryKey: key,
+ // queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
+ // initialData: { pages: [1], pageParams: [1] },
+ // getNextPageParam: (lastPage) => lastPage + 1,
+ // initialPageParam: 0,
+ // notifyOnChangeProps: 'all',
+ // })
+
+ // renderStream.replaceSnapshot(state)
+
+ // return (
+ // state.fetchNextPage()}>fetchNextPage
+ // )
+ // }
+
+ // const rendered = await renderStream.render(
+ //
+ // ,
+ // )
+
+ // {
+ // const { snapshot } = await renderStream.takeRender()
+ // expect(snapshot).toMatchObject({
+ // data: { pages: [1] },
+ // hasNextPage: true,
+ // isFetching: true,
+ // isFetchingNextPage: false,
+ // isSuccess: true,
+ // })
+ // }
+
+ // {
+ // const { snapshot } = await renderStream.takeRender()
+ // expect(snapshot).toMatchObject({
+ // data: { pages: [1] },
+ // hasNextPage: true,
+ // isFetching: false,
+ // isFetchingNextPage: false,
+ // isSuccess: true,
+ // })
+ // }
+
+ // fireEvent.click(rendered.getByText('fetchNextPage'))
+
+ // {
+ // const { snapshot } = await renderStream.takeRender()
+ // expect(snapshot).toMatchObject({
+ // data: { pages: [1] },
+ // hasNextPage: true,
+ // isFetching: true,
+ // isFetchingNextPage: true,
+ // isSuccess: true,
+ // })
+ // }
+ // {
+ // const { snapshot } = await renderStream.takeRender()
+ // expect(snapshot).toMatchObject({
+ // data: { pages: [1, 2] },
+ // hasNextPage: true,
+ // isFetching: false,
+ // isFetchingNextPage: false,
+ // isSuccess: true,
+ // })
+ // }
+ // })
+
+ it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
+ const key = queryKey()
+ const states: Array>> = []
+
+ function Page() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
+ getNextPageParam: () => undefined,
+ initialPageParam: 1,
+ })
+
+ states.push(state)
+
+ return null
+ }
+
+ renderWithClient(queryClient, >> = []
+
+ function Page() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
+ initialData: { pages: [10], pageParams: [10] },
+ getNextPageParam: (lastPage) => (lastPage === 10 ? 11 : undefined),
+ initialPageParam: 10,
+ })
+
+ states.push(state)
+
+ return null
+ }
+
+ renderWithClient(queryClient, >> = []
+
+ function Page() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
+ initialPageParam: 10,
+ initialData: { pages: [10], pageParams: [10] },
+ getNextPageParam: () => undefined,
+ })
+
+ states.push(state)
+
+ return null
+ }
+
+ renderWithClient(queryClient, >> = []
+
+ function Page() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
+ getNextPageParam: (lastPage) => (lastPage === 1 ? 2 : undefined),
+ select: (data) => ({
+ pages: data.pages.map((x) => x.toString()),
+ pageParams: data.pageParams,
+ }),
+ initialPageParam: 1,
+ })
+
+ states.push(state)
+
+ return null
+ }
+
+ renderWithClient(queryClient,
+
Pagination
+ {status === 'pending' ? (
+ 'Loading...'
+ ) : status === 'error' ? (
+
Error: {error.message}
+ ) : (
+ <>
+
Data:
+ {data.pages.map((page, i) => (
+
+
+ Page {i}: {page.ts}
+
+
+ {page.items.map((item) => (
+
Item: {item}
+ ))}
+
+
+ ))}
+
+ fetchNextPage()}
+ disabled={!hasNextPage || isFetchingNextPage}
+ >
+ {isFetchingNextPage
+ ? 'Loading more...'
+ : hasNextPage
+ ? 'Load More'
+ : 'Nothing more to load'}
+
+ refetch()}>Refetch
+ {
+ // Imagine that this mutation happens somewhere else
+ // makes an actual network request
+ // and calls invalidateQueries in an onSuccess
+ items.splice(4, 1)
+ queryClient.invalidateQueries({ queryKey: key })
+ }}
+ >
+ Remove item
+
+
+
{!isFetchingNextPage ? 'Background Updating...' : null}
+
+ )}
+
(false)
+ const {
+ status,
+ data,
+ error,
+ isFetching,
+ isFetchingNextPage,
+ fetchNextPage,
+ hasNextPage,
+ refetch,
+ } = useInfiniteQuery({
+ queryKey: key,
+ queryFn: ({ pageParam }) =>
+ fetchItems(
+ pageParam,
+ fetchCountRef.current++,
+ pageParam === MAX || (pageParam === MAX - 1 && isRemovedLastPage),
+ ),
+ getNextPageParam: (lastPage) => lastPage.nextId,
+ initialPageParam: 0,
+ })
+
+ return (
+
+
Pagination
+ {status === 'pending' ? (
+ 'Loading...'
+ ) : status === 'error' ? (
+
Error: {error.message}
+ ) : (
+ <>
+
Data:
+ {data.pages.map((page, i) => (
+
+
+ Page {i}: {page.ts}
+
+
+ {page.items.map((item) => (
+
Item: {item}
+ ))}
+
+
+ ))}
+
+ fetchNextPage()}
+ disabled={!hasNextPage || isFetchingNextPage}
+ >
+ {isFetchingNextPage
+ ? 'Loading more...'
+ : hasNextPage
+ ? 'Load More'
+ : 'Nothing more to load'}
+
+ refetch()}>Refetch
+ setIsRemovedLastPage(true)}>
+ Remove Last Page
+
+
+
+ {isFetching && !isFetchingNextPage
+ ? 'Background Updating...'
+ : null}
+
+
+ )}
+
((resolve, reject) => {
+ cancelFn = vi.fn(() => reject('Cancelled'))
+ signal?.addEventListener('abort', cancelFn)
+ sleep(1000).then(() => resolve('OK'))
+ })
+
+ return promise
+ }
+
+ function Inner() {
+ const state = useInfiniteQuery({
+ queryKey: key,
+ queryFn,
+ getNextPageParam: () => undefined,
+ initialPageParam: 0,
+ })
+ return (
+
+
Status: {state.status}
+
+ )
+ }
+
+ function Page() {
+ const [isVisible, setIsVisible] = useState(true)
+
+ return (
+ <>
+ setIsVisible(false)}>hide
+ {isVisible && {isVisible ? 'visible' : 'hidden'}
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, data: {data?.pages[0]}
+ }
+
+ const rendered = render(
+ //
+ //
Page: {index + 1}
+ //
Item: {item}
+ // ))}
+ //
+ // ))}
+ // query.fetchNextPage()}>fetchNextPage
+ //
+ // )
+ // }
+
+ // function Page() {
+ // useTrackRenders()
+ // return (
+ //
+ // ,
+ // )
+
+ // {
+ // const { renderedComponents, withinDOM } = await renderStream.takeRender()
+ // withinDOM().getByText('loading...')
+ // expect(renderedComponents).toEqual([Page, Loading])
+ // }
+
+ // {
+ // const { renderedComponents, withinDOM } = await renderStream.takeRender()
+ // withinDOM().getByText('Page: 1')
+ // withinDOM().getByText('Item: 1')
+ // expect(renderedComponents).toEqual([MyComponent])
+ // }
+
+ // // click button
+ // rendered.getByRole('button', { name: 'fetchNextPage' }).click()
+
+ // {
+ // const { renderedComponents, withinDOM } = await renderStream.takeRender()
+ // withinDOM().getByText('Page: 1')
+ // expect(renderedComponents).toEqual([MyComponent])
+ // }
+ // })
+})
diff --git a/packages/preact-query/src/__tests__/useIsFetching.test.tsx b/packages/preact-query/src/__tests__/useIsFetching.test.tsx
new file mode 100644
index 0000000000..614b70d962
--- /dev/null
+++ b/packages/preact-query/src/__tests__/useIsFetching.test.tsx
@@ -0,0 +1,246 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render } from '@testing-library/preact'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import { QueryCache, QueryClient, useIsFetching, useQuery } from '..'
+import { renderWithClient, setActTimeout } from './utils'
+import { useEffect, useState } from 'preact/hooks'
+
+describe('useIsFetching', () => {
+ beforeEach(() => {
+ vi.useFakeTimers()
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ // See https://github.com/tannerlinsley/react-query/issues/105
+ it('should update as queries start and stop fetching', async () => {
+ const queryClient = new QueryClient()
+ const key = queryKey()
+
+ function IsFetching() {
+ const isFetching = useIsFetching()
+
+ return isFetching: {isFetching}
+ }
+
+ function Query() {
+ const [ready, setReady] = useState(false)
+
+ useQuery({
+ queryKey: key,
+ queryFn: () => sleep(50).then(() => 'test'),
+ enabled: ready,
+ })
+
+ return setReady(true)}>setReady
+ }
+
+ function Page() {
+ return (
+
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, = []
+
+ function IsFetching() {
+ const isFetching = useIsFetching()
+
+ isFetchingArray.push(isFetching)
+
+ return null
+ }
+
+ function FirstQuery() {
+ useQuery({
+ queryKey: key1,
+ queryFn: () => sleep(100).then(() => 'data1'),
+ })
+
+ return null
+ }
+
+ function SecondQuery() {
+ useQuery({
+ queryKey: key2,
+ queryFn: () => sleep(100).then(() => 'data2'),
+ })
+
+ return null
+ }
+
+ function Page() {
+ const [renderSecond, setRenderSecond] = useState(false)
+
+ useEffect(() => {
+ setActTimeout(() => {
+ setRenderSecond(true)
+ }, 50)
+ }, [])
+
+ return (
+ <>
+ = []
+
+ function One() {
+ useQuery({
+ queryKey: key1,
+ queryFn: () => sleep(10).then(() => 'test1'),
+ })
+
+ return null
+ }
+
+ function Two() {
+ useQuery({
+ queryKey: key2,
+ queryFn: () => sleep(20).then(() => 'test2'),
+ })
+
+ return null
+ }
+
+ function Page() {
+ const [started, setStarted] = useState(false)
+ const isFetching = useIsFetching({ queryKey: key1 })
+
+ isFetchingArray.push(isFetching)
+
+ return (
+
+
setStarted(true)}>setStarted
+
isFetching: {isFetching}
+ {started ? (
+ <>
+
+
+
+ ) : null}
+
+
isFetching: {isFetching}
+
+
isFetching: {isFetching}
+
+
{data}
+ reset()}>reset
+ mutate()}>mutate
+
+ )
+ }
+
+ const { getByRole } = renderWithClient(queryClient, ({
+ mutationFn: () => {
+ const err = new Error('Expected mock error. All is well!')
+ err.stack = ''
+ return Promise.reject(err)
+ },
+ })
+
+ return (
+
+ {error &&
{error.message} }
+ reset()}>reset
+ mutate()}>mutate
+
+ )
+ }
+
+ const { getByRole, queryByRole } = renderWithClient(queryClient,
+
{count}
+ mutate({ count: ++count })}>mutate
+
+ )
+ }
+
+ const { getByRole } = renderWithClient(queryClient, >()
+
+ mutateFn.mockImplementationOnce(() => {
+ return Promise.reject(new Error('Error test Jonas'))
+ })
+
+ mutateFn.mockImplementation(async (value) => {
+ await sleep(10)
+ return Promise.resolve(value)
+ })
+
+ function Page() {
+ const { mutate, failureCount, failureReason, data, status } = useMutation(
+ { mutationFn: mutateFn },
+ )
+
+ return (
+
+
Data {data?.count}
+ Status {status}
+ Failed {failureCount} times
+ Failed because {failureReason?.message ?? 'null'}
+ mutate({ count: ++count })}>mutate
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient,
+
{count}
+ mutate({ count: ++count })}>mutate
+
+ )
+ }
+
+ const { getByRole } = renderWithClient(queryClient, = []
+
+ function Page() {
+ const { mutateAsync } = useMutation({
+ mutationFn: (text: string) => Promise.resolve(text),
+ onSuccess: () => {
+ callbacks.push('useMutation.onSuccess')
+ return Promise.resolve()
+ },
+ onSettled: () => {
+ callbacks.push('useMutation.onSettled')
+ return Promise.resolve()
+ },
+ })
+
+ useEffect(() => {
+ setActTimeout(async () => {
+ try {
+ const result = await mutateAsync('todo', {
+ onSuccess: () => {
+ callbacks.push('mutateAsync.onSuccess')
+ return Promise.resolve()
+ },
+ onSettled: () => {
+ callbacks.push('mutateAsync.onSettled')
+ return Promise.resolve()
+ },
+ })
+ callbacks.push(`mutateAsync.result:${result}`)
+ } catch {}
+ }, 10)
+ }, [mutateAsync])
+
+ return null
+ }
+
+ renderWithClient(queryClient, = []
+
+ function Page() {
+ const { mutateAsync } = useMutation({
+ mutationFn: async (_text: string) => Promise.reject(new Error('oops')),
+ onError: () => {
+ callbacks.push('useMutation.onError')
+ return Promise.resolve()
+ },
+ onSettled: () => {
+ callbacks.push('useMutation.onSettled')
+ return Promise.resolve()
+ },
+ })
+
+ useEffect(() => {
+ setActTimeout(async () => {
+ try {
+ await mutateAsync('todo', {
+ onError: () => {
+ callbacks.push('mutateAsync.onError')
+ return Promise.resolve()
+ },
+ onSettled: () => {
+ callbacks.push('mutateAsync.onSettled')
+ return Promise.resolve()
+ },
+ })
+ } catch (error) {
+ callbacks.push(`mutateAsync.error:${(error as Error).message}`)
+ }
+ }, 10)
+ }, [mutateAsync])
+
+ return null
+ }
+
+ renderWithClient(queryClient, > = []
+
+ function Page() {
+ const state = useMutation({ mutationKey: key })
+
+ states.push(state)
+
+ const { mutate } = state
+
+ useEffect(() => {
+ setActTimeout(() => {
+ mutate('todo')
+ }, 10)
+ }, [mutate])
+
+ return null
+ }
+
+ renderWithClient(queryClient,
+
mutation.mutate('todo')}>mutate
+
+ error:{' '}
+ {mutation.error instanceof Error ? mutation.error.message : 'null'},
+ status: {mutation.status}, isPaused: {String(mutation.isPaused)}
+
+
+
mutation.mutate('todo')}>mutate
+
+ data: {mutation.data ?? 'null'}, status: {mutation.status},
+ isPaused: {String(mutation.isPaused)}
+
+
= []
+
+ function Page() {
+ const mutation = useMutation({
+ mutationFn: async (_text: string) => {
+ count++
+ await sleep(10)
+ return count
+ },
+ })
+
+ states.push(`${mutation.status}, ${mutation.isPaused}`)
+
+ return (
+
+
mutation.mutate('todo')}>mutate
+
+ data: {mutation.data ?? 'null'}, status: {mutation.status},
+ isPaused: {String(mutation.isPaused)}
+
+
+
state.mutate('todo')}>mutate
+
status: {state.status}
+
isPaused: {String(state.isPaused)}
+
data: {state.data ?? 'null'}
+
mutate()}>mutate
+ }
+ function Page() {
+ const [mounted, setMounted] = useState(true)
+ return (
+
+ setMounted(false)}>unmount
+ {mounted &&
+ )
+ }
+
+ const { getByText } = renderWithClient(queryClient, ({
+ mutationFn: () => {
+ return Promise.reject(err)
+ },
+ throwOnError: true,
+ })
+
+ return (
+
+ mutate()}>mutate
+
+ )
+ }
+
+ const { getByText, queryByText } = renderWithClient(
+ queryClient,
+ (
+
+ error
+
+ )}
+ >
+ ,
+ )
+
+ fireEvent.click(getByText('mutate'))
+
+ await vi.advanceTimersByTimeAsync(0)
+ expect(queryByText('error')).not.toBeNull()
+
+ expect(consoleMock.mock.calls[0]?.[1]).toBe(err)
+
+ consoleMock.mockRestore()
+ })
+
+ it('should be able to throw an error when throwOnError is a function that returns true', async () => {
+ const consoleMock = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined)
+ let boundary = false
+ function Page() {
+ const { mutate, error } = useMutation({
+ mutationFn: () => {
+ const err = new Error('mock error')
+ err.stack = ''
+ return Promise.reject(err)
+ },
+ throwOnError: () => {
+ return boundary
+ },
+ })
+
+ return (
+
+ mutate()}>mutate
+ {error && error.message}
+
+ )
+ }
+
+ const { getByText, queryByText } = renderWithClient(
+ queryClient,
+ (
+
+ error boundary
+
+ )}
+ >
+ ,
+ )
+
+ // first error goes to component
+ fireEvent.click(getByText('mutate'))
+ await vi.advanceTimersByTimeAsync(0)
+ expect(queryByText('mock error')).not.toBeNull()
+
+ // second error goes to boundary
+ boundary = true
+ fireEvent.click(getByText('mutate'))
+ await vi.advanceTimersByTimeAsync(0)
+ expect(queryByText('error boundary')).not.toBeNull()
+ consoleMock.mockRestore()
+ })
+
+ it('should pass meta to mutation', async () => {
+ const errorMock = vi.fn()
+ const successMock = vi.fn()
+
+ const queryClientMutationMeta = new QueryClient({
+ mutationCache: new MutationCache({
+ onSuccess: (_, __, ___, mutation) => {
+ successMock(mutation.meta?.metaSuccessMessage)
+ },
+ onError: (_, __, ___, mutation) => {
+ errorMock(mutation.meta?.metaErrorMessage)
+ },
+ }),
+ })
+
+ const metaSuccessMessage = 'mutation succeeded'
+ const metaErrorMessage = 'mutation failed'
+
+ function Page() {
+ const { mutate: succeed, isSuccess } = useMutation({
+ mutationFn: () => Promise.resolve(''),
+ meta: { metaSuccessMessage },
+ })
+ const { mutate: error, isError } = useMutation({
+ mutationFn: () => {
+ return Promise.reject(new Error(''))
+ },
+ meta: { metaErrorMessage },
+ })
+
+ return (
+
+
succeed()}>succeed
+
error()}>error
+ {isSuccess &&
successTest
}
+ {isError &&
errorTest
}
+
+ setShow(false)}>hide
+ {show &&
+ )
+ }
+
+ function Component() {
+ const mutation = useMutation({
+ mutationFn: async (_text: string) => {
+ count++
+ await sleep(10)
+ return count
+ },
+ mutationKey,
+ gcTime: 0,
+ onSuccess,
+ onSettled,
+ })
+
+ return (
+
+
+ mutation.mutate('todo', {
+ onSuccess: onSuccessMutate,
+ onSettled: onSettledMutate,
+ })
+ }
+ >
+ mutate
+
+
+ data: {mutation.data ?? 'null'}, status: {mutation.status},
+ isPaused: {String(mutation.isPaused)}
+
+
+
+ mutation.mutate('todo1', {
+ onSuccess: onSuccessMutate,
+ onSettled: onSettledMutate,
+ })
+ }
+ >
+ mutate1
+
+
+ mutation.mutate('todo2', {
+ onSuccess: onSuccessMutate,
+ onSettled: onSettledMutate,
+ })
+ }
+ >
+ mutate2
+
+
+ data: {mutation.data ?? 'null'}, status: {mutation.status}
+
+
+
mutation.mutate('todo')}>mutate
+
status: {mutation.status}
+
+
mutation.mutate('todo')}>mutate
+
+ error:{' '}
+ {mutation.error instanceof Error ? mutation.error.message : 'null'},
+ status: {mutation.status}
+
+
+
mutation.mutate('todo')}>mutate
+
+ error:{' '}
+ {mutation.error instanceof Error ? mutation.error.message : 'null'},
+ status: {mutation.status}
+
+
+
mutation.mutate('custom client')}>
+ mutate
+
+
+ data: {mutation.data ?? 'null'}, status: {mutation.status}
+
+
>
+ >()
+ })
+ it('should infer with select', () => {
+ const result = useMutationState({
+ filters: { status: 'pending' },
+ select: (mutation) => mutation.state.status,
+ })
+
+ expectTypeOf(result).toEqualTypeOf>()
+ })
+})
diff --git a/packages/preact-query/src/__tests__/useMutationState.test.tsx b/packages/preact-query/src/__tests__/useMutationState.test.tsx
new file mode 100644
index 0000000000..8a00db36fd
--- /dev/null
+++ b/packages/preact-query/src/__tests__/useMutationState.test.tsx
@@ -0,0 +1,238 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render } from '@testing-library/preact'
+import { sleep } from '@tanstack/query-test-utils'
+import { QueryClient, useIsMutating, useMutation, useMutationState } from '..'
+import { renderWithClient } from './utils'
+import { useEffect } from 'preact/hooks'
+
+describe('useIsMutating', () => {
+ beforeEach(() => {
+ vi.useFakeTimers()
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ it('should return the number of fetching mutations', async () => {
+ const isMutatingArray: Array = []
+ const queryClient = new QueryClient()
+
+ function IsMutating() {
+ const isMutating = useIsMutating()
+
+ isMutatingArray.push(isMutating)
+
+ return null
+ }
+
+ function Mutations() {
+ const { mutate: mutate1 } = useMutation({
+ mutationKey: ['mutation1'],
+ mutationFn: () => sleep(50).then(() => 'data'),
+ })
+ const { mutate: mutate2 } = useMutation({
+ mutationKey: ['mutation2'],
+ mutationFn: () => sleep(10).then(() => 'data'),
+ })
+
+ return (
+
+ mutate1()}>mutate1
+ mutate2()}>mutate2
+
+ )
+ }
+
+ function Page() {
+ return (
+
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, = []
+ const queryClient = new QueryClient()
+
+ function IsMutating() {
+ const isMutating = useIsMutating({ mutationKey: ['mutation1'] })
+ isMutatingArray.push(isMutating)
+ return null
+ }
+
+ function Page() {
+ const { mutate: mutate1 } = useMutation({
+ mutationKey: ['mutation1'],
+ mutationFn: () => sleep(100).then(() => 'data'),
+ })
+ const { mutate: mutate2 } = useMutation({
+ mutationKey: ['mutation2'],
+ mutationFn: () => sleep(100).then(() => 'data'),
+ })
+
+ useEffect(() => {
+ mutate1()
+ mutate2()
+ }, [mutate1, mutate2])
+
+ return = []
+ const queryClient = new QueryClient()
+
+ function IsMutating() {
+ const isMutating = useIsMutating({
+ predicate: (mutation) =>
+ mutation.options.mutationKey?.[0] === 'mutation1',
+ })
+ isMutatingArray.push(isMutating)
+ return null
+ }
+
+ function Page() {
+ const { mutate: mutate1 } = useMutation({
+ mutationKey: ['mutation1'],
+ mutationFn: () => sleep(100).then(() => 'data'),
+ })
+ const { mutate: mutate2 } = useMutation({
+ mutationKey: ['mutation2'],
+ mutationFn: () => sleep(100).then(() => 'data'),
+ })
+
+ useEffect(() => {
+ mutate1()
+ mutate2()
+ }, [mutate1, mutate2])
+
+ return
+
mutating: {isMutating}
+
> = []
+ const mutationKey = ['mutation']
+
+ function Variables() {
+ variables.push(
+ useMutationState({
+ filters: { mutationKey, status: 'pending' },
+ select: (mutation) => mutation.state.variables,
+ }),
+ )
+
+ return null
+ }
+
+ function Mutate() {
+ const { mutate, data } = useMutation({
+ mutationKey,
+ mutationFn: (input: number) => sleep(150).then(() => 'data' + input),
+ })
+
+ return (
+
+ data: {data ?? 'null'}
+ mutate(1)}>mutate
+
+ )
+ }
+
+ function Page() {
+ return (
+
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, ()
+ })
+
+ it('should require initialPageParam and getNextPageParam', () => {
+ assertType(
+ // @ts-expect-error TS2345
+ usePrefetchInfiniteQuery({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ }),
+ )
+ })
+
+ it('should not allow refetchInterval, enabled or throwOnError options', () => {
+ assertType(
+ usePrefetchInfiniteQuery({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ initialPageParam: 1,
+ getNextPageParam: () => 1,
+ // @ts-expect-error TS2353
+ refetchInterval: 1000,
+ }),
+ )
+
+ assertType(
+ usePrefetchInfiniteQuery({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ initialPageParam: 1,
+ getNextPageParam: () => 1,
+ // @ts-expect-error TS2353
+ enabled: true,
+ }),
+ )
+
+ assertType(
+ usePrefetchInfiniteQuery({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ initialPageParam: 1,
+ getNextPageParam: () => 1,
+ // @ts-expect-error TS2353
+ throwOnError: true,
+ }),
+ )
+ })
+})
diff --git a/packages/preact-query/src/__tests__/usePrefetchInfiniteQuery.test.tsx b/packages/preact-query/src/__tests__/usePrefetchInfiniteQuery.test.tsx
new file mode 100644
index 0000000000..5a0b8fb0e7
--- /dev/null
+++ b/packages/preact-query/src/__tests__/usePrefetchInfiniteQuery.test.tsx
@@ -0,0 +1,202 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, fireEvent } from '@testing-library/preact'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import {
+ QueryCache,
+ QueryClient,
+ usePrefetchInfiniteQuery,
+ useSuspenseInfiniteQuery,
+} from '..'
+import { renderWithClient } from './utils'
+import type { InfiniteData, UseSuspenseInfiniteQueryOptions } from '..'
+import type { Mock } from 'vitest'
+import { Suspense } from 'preact/compat'
+import { VNode } from 'preact'
+
+const generateInfiniteQueryOptions = (
+ data: Array<{ data: string; currentPage: number; totalPages: number }>,
+) => {
+ let currentPage = 0
+
+ return {
+ queryFn: vi
+ .fn<(...args: Array) => Promise<(typeof data)[number]>>()
+ .mockImplementation(async () => {
+ const currentPageData = data[currentPage]
+ if (!currentPageData) {
+ throw new Error('No data defined for page ' + currentPage)
+ }
+
+ await sleep(10)
+ currentPage++
+
+ return currentPageData
+ }),
+ initialPageParam: 1,
+ getNextPageParam: (lastPage: (typeof data)[number]) =>
+ lastPage.currentPage === lastPage.totalPages
+ ? undefined
+ : lastPage.currentPage + 1,
+ }
+}
+
+describe('usePrefetchInfiniteQuery', () => {
+ beforeEach(() => {
+ vi.useFakeTimers()
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ const queryCache = new QueryCache()
+ const queryClient = new QueryClient({ queryCache })
+
+ const Fallback = vi.fn().mockImplementation(() => Loading...
)
+
+ function Suspended(props: {
+ queryOpts: UseSuspenseInfiniteQueryOptions<
+ T,
+ Error,
+ InfiniteData,
+ Array,
+ any
+ >
+ renderPage: (page: T) => VNode
+ }) {
+ const state = useSuspenseInfiniteQuery(props.queryOpts)
+
+ return (
+
+ {state.data.pages.map((page, index) => (
+
{props.renderPage(page)}
+ ))}
+
state.fetchNextPage()}>Next Page
+
data: {page.data}
}
+ />
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, data: {page.data}
}
+ />
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, }>
+
+ data: {page.data}
}
+ />
+
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, ()
+ })
+
+ it('should not allow refetchInterval, enabled or throwOnError options', () => {
+ assertType(
+ usePrefetchQuery({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ // @ts-expect-error TS2345
+ refetchInterval: 1000,
+ }),
+ )
+
+ assertType(
+ usePrefetchQuery({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ // @ts-expect-error TS2345
+ enabled: true,
+ }),
+ )
+
+ assertType(
+ usePrefetchQuery({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(5),
+ // @ts-expect-error TS2345
+ throwOnError: true,
+ }),
+ )
+ })
+
+ it('should not allow skipToken in queryFn', () => {
+ assertType(
+ usePrefetchQuery({
+ queryKey: ['key'],
+ // @ts-expect-error
+ queryFn: skipToken,
+ }),
+ )
+ assertType(
+ usePrefetchQuery({
+ queryKey: ['key'],
+ // @ts-expect-error
+ queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+ }),
+ )
+ })
+})
diff --git a/packages/preact-query/src/__tests__/usePrefetchQuery.test.tsx b/packages/preact-query/src/__tests__/usePrefetchQuery.test.tsx
new file mode 100644
index 0000000000..5804893bee
--- /dev/null
+++ b/packages/preact-query/src/__tests__/usePrefetchQuery.test.tsx
@@ -0,0 +1,291 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, fireEvent } from '@testing-library/preact'
+import { ErrorBoundary } from './ErrorBoundary'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import {
+ QueryCache,
+ QueryClient,
+ usePrefetchQuery,
+ useQueryErrorResetBoundary,
+ useSuspenseQuery,
+} from '..'
+import { renderWithClient } from './utils'
+
+import type { UseSuspenseQueryOptions } from '..'
+import { Suspense } from 'preact/compat'
+import { VNode } from 'preact'
+
+const generateQueryFn = (data: string) =>
+ vi
+ .fn<(...args: Array) => Promise>()
+ .mockImplementation(async () => {
+ await sleep(10)
+
+ return data
+ })
+
+describe('usePrefetchQuery', () => {
+ const queryCache = new QueryCache()
+ const queryClient = new QueryClient({ queryCache })
+
+ beforeEach(() => {
+ vi.useFakeTimers()
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ function Suspended(props: {
+ queryOpts: UseSuspenseQueryOptions>
+ children?: VNode
+ }) {
+ const state = useSuspenseQuery(props.queryOpts)
+
+ return (
+
+
data: {String(state.data)}
+ {props.children}
+
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient,
+
+ )
+ }
+
+ queryClient.fetchQuery(queryOpts)
+ await vi.advanceTimersByTimeAsync(10)
+ queryOpts.queryFn.mockClear()
+ const rendered = renderWithClient(queryClient, Oops!
}>
+
+
+
+ )
+ }
+
+ queryClient.prefetchQuery(queryOpts)
+ await vi.advanceTimersByTimeAsync(10)
+ queryFn.mockClear()
+ const rendered = renderWithClient(queryClient, }>
+
+
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, (
+
+ )}
+ >
+
+
+
+ )
+ }
+
+ queryClient.prefetchQuery(queryOpts)
+ await vi.advanceTimersByTimeAsync(10)
+ queryFn.mockClear()
+
+ const rendered = renderWithClient(queryClient, Loading...
)
+
+ function App() {
+ usePrefetchQuery(firstQueryOpts)
+ usePrefetchQuery(secondQueryOpts)
+ usePrefetchQuery(thirdQueryOpts)
+
+ return (
+
+
+
+
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, ()
+ expectTypeOf(query3Data).toEqualTypeOf()
+ })
+
+ it('TData should be defined when passed through queryOptions', () => {
+ const options = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => {
+ return {
+ wow: true,
+ }
+ },
+ initialData: {
+ wow: true,
+ },
+ })
+ const queryResults = useQueries({ queries: [options] })
+
+ const data = queryResults[0].data
+
+ expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>()
+ })
+
+ it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQuery', () => {
+ const query1 = queryOptions({
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(1),
+ select: (data) => data > 1,
+ })
+
+ const query2 = {
+ queryKey: ['key'],
+ queryFn: () => Promise.resolve(1),
+ select: (data: number) => data > 1,
+ }
+
+ const queryResults = useQueries({ queries: [query1, query2] })
+ const query1Data = queryResults[0].data
+ const query2Data = queryResults[1].data
+
+ expectTypeOf(query1Data).toEqualTypeOf()
+ expectTypeOf(query2Data).toEqualTypeOf()
+ })
+
+ it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
+ const queryResults = useQueries({
+ queries: [
+ {
+ queryKey: ['key'],
+ queryFn: () => {
+ return {
+ wow: true,
+ }
+ },
+ initialData: () => undefined as { wow: boolean } | undefined,
+ },
+ ],
+ })
+
+ const data = queryResults[0].data
+
+ expectTypeOf(data).toEqualTypeOf<{ wow: boolean } | undefined>()
+ })
+
+ describe('custom hook', () => {
+ it('should allow custom hooks using UseQueryOptions', () => {
+ type Data = string
+
+ const useCustomQueries = (
+ options?: OmitKeyof, 'queryKey' | 'queryFn'>,
+ ) => {
+ return useQueries({
+ queries: [
+ {
+ ...options,
+ queryKey: ['todos-key'],
+ queryFn: () => Promise.resolve('data'),
+ },
+ ],
+ })
+ }
+
+ const queryResults = useCustomQueries()
+ const data = queryResults[0].data
+
+ expectTypeOf(data).toEqualTypeOf()
+ })
+ })
+
+ it('TData should have correct type when conditional skipToken is passed', () => {
+ const queryResults = useQueries({
+ queries: [
+ {
+ queryKey: ['withSkipToken'],
+ queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+ },
+ ],
+ })
+
+ const firstResult = queryResults[0]
+
+ expectTypeOf(firstResult).toEqualTypeOf>()
+ expectTypeOf(firstResult.data).toEqualTypeOf()
+ })
+
+ it('should return correct data for dynamic queries with mixed result types', () => {
+ const Queries1 = {
+ get: () =>
+ queryOptions({
+ queryKey: ['key1'],
+ queryFn: () => Promise.resolve(1),
+ }),
+ }
+ const Queries2 = {
+ get: () =>
+ queryOptions({
+ queryKey: ['key2'],
+ queryFn: () => Promise.resolve(true),
+ }),
+ }
+
+ const queries1List = [1, 2, 3].map(() => ({ ...Queries1.get() }))
+ const result = useQueries({
+ queries: [...queries1List, { ...Queries2.get() }],
+ })
+
+ expectTypeOf(result).toEqualTypeOf<
+ [...Array>, UseQueryResult]
+ >()
+ })
+})
diff --git a/packages/preact-query/src/__tests__/useQueries.test.tsx b/packages/preact-query/src/__tests__/useQueries.test.tsx
new file mode 100644
index 0000000000..0b83765cf8
--- /dev/null
+++ b/packages/preact-query/src/__tests__/useQueries.test.tsx
@@ -0,0 +1,1814 @@
+import {
+ afterEach,
+ beforeEach,
+ describe,
+ expect,
+ expectTypeOf,
+ it,
+ vi,
+} from 'vitest'
+import { fireEvent, render } from '@testing-library/preact'
+import { ErrorBoundary } from './ErrorBoundary'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import {
+ QueryCache,
+ QueryClient,
+ queryOptions,
+ skipToken,
+ useQueries,
+} from '..'
+import { renderWithClient } from './utils'
+import type {
+ QueryFunction,
+ QueryKey,
+ QueryObserverResult,
+ UseQueryOptions,
+ UseQueryResult,
+} from '..'
+import type { QueryFunctionContext } from '@tanstack/query-core'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+
+describe('useQueries', () => {
+ beforeEach(() => {
+ vi.useFakeTimers()
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ const queryCache = new QueryCache()
+ const queryClient = new QueryClient({ queryCache })
+
+ it('should return the correct states', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const results: Array> = []
+
+ function Page() {
+ const result = useQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: async () => {
+ await sleep(10)
+ return 1
+ },
+ },
+ {
+ queryKey: key2,
+ queryFn: async () => {
+ await sleep(200)
+ return 2
+ },
+ },
+ ],
+ })
+ results.push(result)
+
+ return (
+
+
+ data1: {String(result[0].data ?? 'null')}, data2:{' '}
+ {String(result[1].data ?? 'null')}
+
+
> = []
+ let count = 0
+
+ function Page() {
+ const result = useQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: async () => {
+ await sleep(10)
+ count++
+ return count
+ },
+ },
+ ],
+ })
+ results.push(result)
+
+ return (
+
+
data: {String(result[0].data ?? 'null')}
+
result[0].refetch()}>refetch
+
, boolean]]
+ >({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 1,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ },
+ {
+ queryKey: key3,
+ queryFn: () => ['string[]'],
+ },
+ ],
+ })
+ expectTypeOf(result1[0]).toEqualTypeOf>()
+ expectTypeOf(result1[1]).toEqualTypeOf>()
+ expectTypeOf(result1[2]).toEqualTypeOf<
+ UseQueryResult, boolean>
+ >()
+ expectTypeOf(result1[0].data).toEqualTypeOf()
+ expectTypeOf(result1[1].data).toEqualTypeOf()
+ expectTypeOf(result1[2].data).toEqualTypeOf | undefined>()
+ expectTypeOf(result1[2].error).toEqualTypeOf()
+
+ // TData (3rd element) takes precedence over TQueryFnData (1st element)
+ const result2 = useQueries<
+ [[string, unknown, string], [string, unknown, number]]
+ >({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectTypeOf(a).toEqualTypeOf()
+ return a.toLowerCase()
+ },
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectTypeOf(a).toEqualTypeOf()
+ return parseInt(a)
+ },
+ },
+ ],
+ })
+ expectTypeOf(result2[0]).toEqualTypeOf>()
+ expectTypeOf(result2[1]).toEqualTypeOf>()
+ expectTypeOf(result2[0].data).toEqualTypeOf()
+ expectTypeOf(result2[1].data).toEqualTypeOf()
+
+ // types should be enforced
+ useQueries<[[string, unknown, string], [string, boolean, number]]>({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectTypeOf(a).toEqualTypeOf()
+ return a.toLowerCase()
+ },
+ placeholderData: 'string',
+ // @ts-expect-error (initialData: string)
+ initialData: 123,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectTypeOf(a).toEqualTypeOf()
+ return parseInt(a)
+ },
+ placeholderData: 'string',
+ // @ts-expect-error (initialData: string)
+ initialData: 123,
+ },
+ ],
+ })
+
+ // field names should be enforced
+ useQueries<[[string]]>({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ // @ts-expect-error (invalidField)
+ someInvalidField: [],
+ },
+ ],
+ })
+ }
+ })
+
+ it('handles type parameter - tuple of objects', () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const key3 = queryKey()
+
+ // @ts-expect-error (Page component is not rendered)
+ function Page() {
+ const result1 = useQueries<
+ [
+ { queryFnData: number },
+ { queryFnData: string },
+ { queryFnData: Array; error: boolean },
+ ]
+ >({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 1,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ },
+ {
+ queryKey: key3,
+ queryFn: () => ['string[]'],
+ },
+ ],
+ })
+ expectTypeOf(result1[0]).toEqualTypeOf>()
+ expectTypeOf(result1[1]).toEqualTypeOf>()
+ expectTypeOf(result1[2]).toEqualTypeOf<
+ UseQueryResult, boolean>
+ >()
+ expectTypeOf(result1[0].data).toEqualTypeOf()
+ expectTypeOf(result1[1].data).toEqualTypeOf()
+ expectTypeOf(result1[2].data).toEqualTypeOf | undefined>()
+ expectTypeOf(result1[2].error).toEqualTypeOf()
+
+ // TData (data prop) takes precedence over TQueryFnData (queryFnData prop)
+ const result2 = useQueries<
+ [
+ { queryFnData: string; data: string },
+ { queryFnData: string; data: number },
+ ]
+ >({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectTypeOf(a).toEqualTypeOf()
+ return a.toLowerCase()
+ },
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectTypeOf(a).toEqualTypeOf()
+ return parseInt(a)
+ },
+ },
+ ],
+ })
+ expectTypeOf(result2[0]).toEqualTypeOf>()
+ expectTypeOf(result2[1]).toEqualTypeOf>()
+ expectTypeOf(result2[0].data).toEqualTypeOf()
+ expectTypeOf(result2[1].data).toEqualTypeOf()
+
+ // can pass only TData (data prop) although TQueryFnData will be left unknown
+ const result3 = useQueries<[{ data: string }, { data: number }]>({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectTypeOf(a).toEqualTypeOf()
+ return a as string
+ },
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectTypeOf(a).toEqualTypeOf()
+ return a as number
+ },
+ },
+ ],
+ })
+ expectTypeOf(result3[0]).toEqualTypeOf>()
+ expectTypeOf(result3[1]).toEqualTypeOf>()
+ expectTypeOf(result3[0].data).toEqualTypeOf()
+ expectTypeOf(result3[1].data).toEqualTypeOf()
+
+ // types should be enforced
+ useQueries<
+ [
+ { queryFnData: string; data: string },
+ { queryFnData: string; data: number; error: boolean },
+ ]
+ >({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectTypeOf(a).toEqualTypeOf()
+ return a.toLowerCase()
+ },
+ placeholderData: 'string',
+ // @ts-expect-error (initialData: string)
+ initialData: 123,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectTypeOf(a).toEqualTypeOf()
+ return parseInt(a)
+ },
+ placeholderData: 'string',
+ // @ts-expect-error (initialData: string)
+ initialData: 123,
+ },
+ ],
+ })
+
+ // field names should be enforced
+ useQueries<[{ queryFnData: string }]>({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ // @ts-expect-error (invalidField)
+ someInvalidField: [],
+ },
+ ],
+ })
+ }
+ })
+
+ it('correctly returns types when passing through queryOptions', () => {
+ // @ts-expect-error (Page component is not rendered)
+ function Page() {
+ // data and results types are correct when using queryOptions
+ const result4 = useQueries({
+ queries: [
+ queryOptions({
+ queryKey: ['key1'],
+ queryFn: () => 'string',
+ select: (a) => {
+ expectTypeOf(a).toEqualTypeOf()
+ return a.toLowerCase()
+ },
+ }),
+ queryOptions({
+ queryKey: ['key2'],
+ queryFn: () => 'string',
+ select: (a) => {
+ expectTypeOf(a).toEqualTypeOf()
+ return parseInt(a)
+ },
+ }),
+ ],
+ })
+ expectTypeOf(result4[0]).toEqualTypeOf>()
+ expectTypeOf(result4[1]).toEqualTypeOf>()
+ expectTypeOf(result4[0].data).toEqualTypeOf()
+ expectTypeOf(result4[1].data).toEqualTypeOf()
+ }
+ })
+
+ it('handles array literal without type parameter to infer result type', () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const key3 = queryKey()
+ const key4 = queryKey()
+ const key5 = queryKey()
+
+ type BizError = { code: number }
+ const throwOnError = (_error: BizError) => true
+
+ // @ts-expect-error (Page component is not rendered)
+ function Page() {
+ // Array.map preserves TQueryFnData
+ const result1 = useQueries({
+ queries: Array(50).map((_, i) => ({
+ queryKey: ['key', i] as const,
+ queryFn: () => i + 10,
+ })),
+ })
+ expectTypeOf(result1).toEqualTypeOf<
+ Array>
+ >()
+ if (result1[0]) {
+ expectTypeOf(result1[0].data).toEqualTypeOf()
+ }
+
+ // Array.map preserves TError
+ const result1_err = useQueries({
+ queries: Array(50).map((_, i) => ({
+ queryKey: ['key', i] as const,
+ queryFn: () => i + 10,
+ throwOnError,
+ })),
+ })
+ expectTypeOf(result1_err).toEqualTypeOf<
+ Array>
+ >()
+ if (result1_err[0]) {
+ expectTypeOf(result1_err[0].data).toEqualTypeOf()
+ expectTypeOf(result1_err[0].error).toEqualTypeOf()
+ }
+
+ // Array.map preserves TData
+ const result2 = useQueries({
+ queries: Array(50).map((_, i) => ({
+ queryKey: ['key', i] as const,
+ queryFn: () => i + 10,
+ select: (data: number) => data.toString(),
+ })),
+ })
+ expectTypeOf(result2).toEqualTypeOf<
+ Array>
+ >()
+
+ const result2_err = useQueries({
+ queries: Array(50).map((_, i) => ({
+ queryKey: ['key', i] as const,
+ queryFn: () => i + 10,
+ select: (data: number) => data.toString(),
+ throwOnError,
+ })),
+ })
+ expectTypeOf(result2_err).toEqualTypeOf<
+ Array>
+ >()
+
+ const result3 = useQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 1,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ },
+ {
+ queryKey: key3,
+ queryFn: () => ['string[]'],
+ select: () => 123,
+ },
+ {
+ queryKey: key5,
+ queryFn: () => 'string',
+ throwOnError,
+ },
+ ],
+ })
+ expectTypeOf(result3[0]).toEqualTypeOf>()
+ expectTypeOf(result3[1]).toEqualTypeOf>()
+ expectTypeOf(result3[2]).toEqualTypeOf>()
+ expectTypeOf(result3[0].data).toEqualTypeOf()
+ expectTypeOf(result3[1].data).toEqualTypeOf()
+ expectTypeOf(result3[3].data).toEqualTypeOf()
+ // select takes precedence over queryFn
+ expectTypeOf(result3[2].data).toEqualTypeOf()
+ // infer TError from throwOnError
+ expectTypeOf(result3[3].error).toEqualTypeOf()
+
+ // initialData/placeholderData are enforced
+ useQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ placeholderData: 'string',
+ // @ts-expect-error (initialData: string)
+ initialData: 123,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 123,
+ // @ts-expect-error (placeholderData: number)
+ placeholderData: 'string',
+ initialData: 123,
+ },
+ ],
+ })
+
+ // select and throwOnError params are "indirectly" enforced
+ useQueries({
+ queries: [
+ // unfortunately TS will not suggest the type for you
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ },
+ // however you can add a type to the callback
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ },
+ // the type you do pass is enforced
+ {
+ queryKey: key3,
+ queryFn: () => 'string',
+ },
+ {
+ queryKey: key4,
+ queryFn: () => 'string',
+ select: (a: string) => parseInt(a),
+ },
+ {
+ queryKey: key5,
+ queryFn: () => 'string',
+ throwOnError,
+ },
+ ],
+ })
+
+ // callbacks are also indirectly enforced with Array.map
+ useQueries({
+ queries: Array(50).map((_, i) => ({
+ queryKey: ['key', i] as const,
+ queryFn: () => i + 10,
+ select: (data: number) => data.toString(),
+ })),
+ })
+ useQueries({
+ queries: Array(50).map((_, i) => ({
+ queryKey: ['key', i] as const,
+ queryFn: () => i + 10,
+ select: (data: number) => data.toString(),
+ })),
+ })
+
+ // results inference works when all the handlers are defined
+ const result4 = useQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ },
+ {
+ queryKey: key4,
+ queryFn: () => 'string',
+ select: (a: string) => parseInt(a),
+ },
+ {
+ queryKey: key5,
+ queryFn: () => 'string',
+ select: (a: string) => parseInt(a),
+ throwOnError,
+ },
+ ],
+ })
+ expectTypeOf(result4[0]).toEqualTypeOf>()
+ expectTypeOf(result4[1]).toEqualTypeOf>()
+ expectTypeOf(result4[2]).toEqualTypeOf>()
+ expectTypeOf(result4[3]).toEqualTypeOf>()
+
+ // handles when queryFn returns a Promise
+ const result5 = useQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => Promise.resolve('string'),
+ },
+ ],
+ })
+ expectTypeOf(result5[0]).toEqualTypeOf>()
+
+ // Array as const does not throw error
+ const result6 = useQueries({
+ queries: [
+ {
+ queryKey: ['key1'],
+ queryFn: () => 'string',
+ },
+ {
+ queryKey: ['key1'],
+ queryFn: () => 123,
+ },
+ {
+ queryKey: key5,
+ queryFn: () => 'string',
+ throwOnError,
+ },
+ ],
+ } as const)
+ expectTypeOf(result6[0]).toEqualTypeOf>()
+ expectTypeOf(result6[1]).toEqualTypeOf>()
+ expectTypeOf(result6[2]).toEqualTypeOf>()
+
+ // field names should be enforced - array literal
+ useQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ // @ts-expect-error (invalidField)
+ someInvalidField: [],
+ },
+ ],
+ })
+
+ // field names should be enforced - Array.map() result
+ useQueries({
+ // @ts-expect-error (invalidField)
+ queries: Array(10).map(() => ({
+ someInvalidField: '',
+ })),
+ })
+
+ // field names should be enforced - array literal
+ useQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ // @ts-expect-error (invalidField)
+ someInvalidField: [],
+ },
+ ],
+ })
+
+ // supports queryFn using fetch() to return Promise - Array.map() result
+ useQueries({
+ queries: Array(50).map((_, i) => ({
+ queryKey: ['key', i] as const,
+ queryFn: () =>
+ fetch('return Promise').then((resp) => resp.json()),
+ })),
+ })
+
+ // supports queryFn using fetch() to return Promise - array literal
+ useQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () =>
+ fetch('return Promise').then((resp) => resp.json()),
+ },
+ ],
+ })
+ }
+ })
+
+ it('handles strongly typed queryFn factories and useQueries wrappers', () => {
+ // QueryKey + queryFn factory
+ type QueryKeyA = ['queryA']
+ const getQueryKeyA = (): QueryKeyA => ['queryA']
+ type GetQueryFunctionA = () => QueryFunction
+ const getQueryFunctionA: GetQueryFunctionA = () => () => {
+ return Promise.resolve(1)
+ }
+ type SelectorA = (data: number) => [number, string]
+ const getSelectorA = (): SelectorA => (data) => [data, data.toString()]
+
+ type QueryKeyB = ['queryB', string]
+ const getQueryKeyB = (id: string): QueryKeyB => ['queryB', id]
+ type GetQueryFunctionB = () => QueryFunction
+ const getQueryFunctionB: GetQueryFunctionB = () => () => {
+ return Promise.resolve('1')
+ }
+ type SelectorB = (data: string) => [string, number]
+ const getSelectorB = (): SelectorB => (data) => [data, +data]
+
+ // Wrapper with strongly typed array-parameter
+ function useWrappedQueries<
+ TQueryFnData,
+ TError,
+ TData,
+ TQueryKey extends QueryKey,
+ >(queries: Array>) {
+ return useQueries({
+ queries: queries.map(
+ // no need to type the mapped query
+ (query) => {
+ const { queryFn: fn, queryKey: key } = query
+ expectTypeOf(fn).toEqualTypeOf<
+ | typeof skipToken
+ | QueryFunction
+ | undefined
+ >()
+ return {
+ queryKey: key,
+ queryFn:
+ fn && fn !== skipToken
+ ? (ctx: QueryFunctionContext 
+
+
+
+
+Hooks for fetching, caching and updating asynchronous data in React
+
+
+ 
+
+ 
+
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [TanStack Table](https://github.com/TanStack/table), [TanStack Router](https://github.com/tanstack/router), [TanStack Virtual](https://github.com/tanstack/virtual), [React Charts](https://github.com/TanStack/react-charts), [React Ranger](https://github.com/TanStack/ranger)
+
+## Visit [tanstack.com/query](https://tanstack.com/query) for docs, guides, API and more!
+
+## Quick Features
+
+- Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
+- Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
+- Parallel + Dependent Queries
+- Mutations + Reactive Query Refetching
+- Multi-layer Cache + Automatic Garbage Collection
+- Paginated + Cursor-based Queries
+- Load-More + Infinite Scroll Queries w/ Scroll Recovery
+- Request Cancellation
+- [React Suspense](https://react.dev/reference/react/Suspense) + Fetch-As-You-Render Query Prefetching
+- Dedicated Devtools
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+
diff --git a/packages/preact-query/eslint.config.js b/packages/preact-query/eslint.config.js
new file mode 100644
index 0000000000..83caf4e0a9
--- /dev/null
+++ b/packages/preact-query/eslint.config.js
@@ -0,0 +1,38 @@
+// @ts-check
+
+import rootConfig from './root.eslint.config.js'
+// @ts-ignore: no types for eslint-config-preact
+import preact from 'eslint-config-preact'
+import tseslint from 'typescript-eslint'
+
+export default [
+ ...rootConfig,
+ ...preact,
+ {
+ files: ['**/*.{ts,tsx}'],
+ languageOptions: {
+ parser: tseslint.parser,
+ parserOptions: {
+ project: true,
+ },
+ },
+ plugins: {
+ 'typescript-eslint': tseslint.plugin,
+ },
+ rules: {
+ // Disable base rule to prevent overload false positives
+ 'no-redeclare': 'off',
+ 'no-duplicate-imports': 'off',
+ // TS-aware version handles overloads correctly
+ '@typescript-eslint/no-redeclare': 'error',
+ '@typescript-eslint/no-duplicate-imports': 'error',
+ },
+ },
+ {
+ files: ['**/__tests__/**'],
+ rules: {
+ '@eslint-react/dom/no-missing-button-type': 'off',
+ '@typescript-eslint/no-unnecessary-condition': 'off',
+ },
+ },
+]
diff --git a/packages/preact-query/package.json b/packages/preact-query/package.json
new file mode 100644
index 0000000000..47b003df0c
--- /dev/null
+++ b/packages/preact-query/package.json
@@ -0,0 +1,87 @@
+{
+ "name": "@tanstack/preact-query",
+ "version": "5.90.11",
+ "description": "Hooks for managing, caching and syncing asynchronous and remote data in preact",
+ "author": "tannerlinsley",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/TanStack/query.git",
+ "directory": "packages/preact-query"
+ },
+ "homepage": "https://tanstack.com/query",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "scripts": {
+ "clean": "premove ./build ./coverage ./dist-ts",
+ "compile": "tsc --build",
+ "test:eslint": "eslint --concurrency=auto ./src",
+ "test:types": "npm-run-all --serial test:types:*",
+ "test:types:ts50": "node ../../node_modules/typescript50/lib/tsc.js --build tsconfig.legacy.json",
+ "test:types:ts51": "node ../../node_modules/typescript51/lib/tsc.js --build tsconfig.legacy.json",
+ "test:types:ts52": "node ../../node_modules/typescript52/lib/tsc.js --build tsconfig.legacy.json",
+ "test:types:ts53": "node ../../node_modules/typescript53/lib/tsc.js --build tsconfig.legacy.json",
+ "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js --build tsconfig.legacy.json",
+ "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js --build tsconfig.legacy.json",
+ "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js --build tsconfig.legacy.json",
+ "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --build tsconfig.legacy.json",
+ "test:types:tscurrent": "tsc --build",
+ "test:lib": "vitest",
+ "test:lib:dev": "pnpm run test:lib --watch",
+ "test:build": "publint --strict && attw --pack",
+ "build": "pnpm build:tsup && pnpm build:codemods",
+ "build:tsup": "tsup --tsconfig tsconfig.prod.json",
+ "build:codemods": "cpy ../query-codemods/* ./build/codemods"
+ },
+ "type": "module",
+ "types": "build/legacy/index.d.ts",
+ "main": "build/legacy/index.cjs",
+ "module": "build/legacy/index.js",
+ "react-native": "src/index.ts",
+ "exports": {
+ ".": {
+ "@tanstack/custom-condition": "./src/index.ts",
+ "import": {
+ "types": "./build/modern/index.d.ts",
+ "default": "./build/modern/index.js"
+ },
+ "require": {
+ "types": "./build/modern/index.d.cts",
+ "default": "./build/modern/index.cjs"
+ }
+ },
+ "./package.json": "./package.json"
+ },
+ "sideEffects": false,
+ "files": [
+ "build",
+ "src",
+ "!src/__tests__",
+ "!build/codemods/node_modules",
+ "!build/codemods/vite.config.ts",
+ "!build/codemods/**/__testfixtures__",
+ "!build/codemods/**/__tests__"
+ ],
+ "dependencies": {
+ "@tanstack/query-core": "workspace:*"
+ },
+ "devDependencies": {
+ "@preact/preset-vite": "^2.10.2",
+ "@tanstack/query-persist-client-core": "workspace:*",
+ "@tanstack/query-test-utils": "workspace:*",
+ "@testing-library/preact": "^3.2.4",
+ "@testing-library/react-render-stream": "^2.0.0",
+ "cpy-cli": "^5.0.0",
+ "eslint-config-preact": "^2.0.0",
+ "npm-run-all2": "^5.0.2",
+ "preact": "^10.28.0",
+ "preact-iso": "^2.11.1",
+ "preact-render-to-string": "^6.6.4",
+ "typescript-eslint": "^8.50.0"
+ },
+ "peerDependencies": {
+ "preact": "^10.0.0"
+ }
+}
diff --git a/packages/preact-query/root.eslint.config.js b/packages/preact-query/root.eslint.config.js
new file mode 100644
index 0000000000..8b07108d25
--- /dev/null
+++ b/packages/preact-query/root.eslint.config.js
@@ -0,0 +1,56 @@
+// @ts-check
+
+// @ts-ignore Needed due to moduleResolution Node vs Bundler
+import { tanstackConfig } from '@tanstack/eslint-config'
+import pluginCspell from '@cspell/eslint-plugin'
+import vitest from '@vitest/eslint-plugin'
+
+export default [
+ ...tanstackConfig,
+ {
+ name: 'tanstack/temp',
+ plugins: {
+ cspell: pluginCspell,
+ },
+ rules: {
+ 'cspell/spellchecker': [
+ 'warn',
+ {
+ cspell: {
+ words: [
+ 'Promisable', // Our public interface
+ 'TSES', // @typescript-eslint package's interface
+ 'codemod', // We support our codemod
+ 'combinate', // Library name
+ 'datatag', // Query options tagging
+ 'extralight', // Our public interface
+ 'jscodeshift',
+ 'refetches', // Query refetch operations
+ 'retryer', // Our public interface
+ 'solidjs', // Our target framework
+ 'tabular-nums', // https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
+ 'tanstack', // Our package scope
+ 'todos', // Too general word to be caught as error
+ 'tsqd', // Our public interface (TanStack Query Devtools shorthand)
+ 'tsup', // We use tsup as builder
+ 'typecheck', // Field of vite.config.ts
+ 'vue-demi', // dependency of @tanstack/vue-query
+ 'ɵkind', // Angular specific
+ 'ɵproviders', // Angular specific
+ ],
+ },
+ },
+ ],
+ '@typescript-eslint/no-empty-function': 'off',
+ '@typescript-eslint/no-unsafe-function-type': 'off',
+ 'no-case-declarations': 'off',
+ 'prefer-const': 'off',
+ },
+ },
+ {
+ files: ['**/*.spec.ts*', '**/*.test.ts*', '**/*.test-d.ts*'],
+ plugins: { vitest },
+ rules: vitest.configs.recommended.rules,
+ settings: { vitest: { typecheck: true } },
+ },
+]
diff --git a/packages/preact-query/root.tsup.config.js b/packages/preact-query/root.tsup.config.js
new file mode 100644
index 0000000000..28fd7edde9
--- /dev/null
+++ b/packages/preact-query/root.tsup.config.js
@@ -0,0 +1,39 @@
+// @ts-check
+
+import { esbuildPluginFilePathExtensions } from 'esbuild-plugin-file-path-extensions'
+
+/**
+ * @param {Object} opts - Options for building configurations.
+ * @param {string[]} opts.entry - The entry array.
+ * @returns {import('tsup').Options}
+ */
+export function modernConfig(opts) {
+ return {
+ entry: opts.entry,
+ format: ['cjs', 'esm'],
+ target: ['chrome91', 'firefox90', 'edge91', 'safari15', 'ios15', 'opera77'],
+ outDir: 'build/modern',
+ dts: true,
+ sourcemap: true,
+ clean: true,
+ esbuildPlugins: [esbuildPluginFilePathExtensions({ esmExtension: 'js' })],
+ }
+}
+
+/**
+ * @param {Object} opts - Options for building configurations.
+ * @param {string[]} opts.entry - The entry array.
+ * @returns {import('tsup').Options}
+ */
+export function legacyConfig(opts) {
+ return {
+ entry: opts.entry,
+ format: ['cjs', 'esm'],
+ target: ['es2020', 'node16'],
+ outDir: 'build/legacy',
+ dts: true,
+ sourcemap: true,
+ clean: true,
+ esbuildPlugins: [esbuildPluginFilePathExtensions({ esmExtension: 'js' })],
+ }
+}
diff --git a/packages/preact-query/src/HydrationBoundary.tsx b/packages/preact-query/src/HydrationBoundary.tsx
new file mode 100644
index 0000000000..7ca9d2546b
--- /dev/null
+++ b/packages/preact-query/src/HydrationBoundary.tsx
@@ -0,0 +1,112 @@
+'use client'
+
+import { hydrate } from '@tanstack/query-core'
+import { useQueryClient } from './QueryClientProvider'
+import type {
+ DehydratedState,
+ HydrateOptions,
+ OmitKeyof,
+ QueryClient,
+} from '@tanstack/query-core'
+import { useEffect, useMemo, useRef } from 'preact/hooks'
+import { ComponentChildren } from 'preact'
+
+export interface HydrationBoundaryProps {
+ state: DehydratedState | null | undefined
+ options?: OmitKeyof