@tanstack/solid-query 5.0.0-alpha.1 → 5.0.0-alpha.15

package/src/__tests__/createMutation.test.tsx

@@ -20,6 +20,7 @@ import {
   setActTimeout,
   sleep,
 } from './utils'
+import { vi } from 'vitest'
 
 describe('createMutation', () => {
   const queryCache = new QueryCache()
@@ -108,8 +109,8 @@ describe('createMutation', () => {
 
   it('should be able to call `onSuccess` and `onSettled` after each successful mutate', async () => {
     const [count, setCount] = createSignal(0)
-    const onSuccessMock = jest.fn()
-    const onSettledMock = jest.fn()
+    const onSuccessMock = vi.fn()
+    const onSettledMock = vi.fn()
 
     function Page() {
       const mutation = createMutation(() => ({
@@ -174,7 +175,7 @@ describe('createMutation', () => {
     const [count, setCount] = createSignal(0)
     type Value = { count: number }
 
-    const mutateFn = jest.fn<Promise<Value>, [value: Value]>()
+    const mutateFn = vi.fn<[value: Value], Promise<Value>>()
 
     mutateFn.mockImplementationOnce(() => {
       return Promise.reject(new Error('Error test Jonas'))
@@ -231,8 +232,8 @@ describe('createMutation', () => {
   })
 
   it('should be able to call `onError` and `onSettled` after each failed mutate', async () => {
-    const onErrorMock = jest.fn()
-    const onSettledMock = jest.fn()
+    const onErrorMock = vi.fn()
+    const onSettledMock = vi.fn()
     const [count, setCount] = createSignal(0)
 
     function Page() {
@@ -562,7 +563,7 @@ describe('createMutation', () => {
 
   it('should call onMutate even if paused', async () => {
     const onlineMock = mockNavigatorOnLine(false)
-    const onMutate = jest.fn()
+    const onMutate = vi.fn()
     let count = 0
 
     function Page() {
@@ -870,8 +871,8 @@ describe('createMutation', () => {
   })
 
   it('should pass meta to mutation', async () => {
-    const errorMock = jest.fn()
-    const successMock = jest.fn()
+    const errorMock = vi.fn()
+    const successMock = vi.fn()
 
     const queryClientMutationMeta = createQueryClient({
       mutationCache: new MutationCache({
@@ -930,10 +931,10 @@ describe('createMutation', () => {
   })
 
   it('should call cache callbacks when unmounted', async () => {
-    const onSuccess = jest.fn()
-    const onSuccessMutate = jest.fn()
-    const onSettled = jest.fn()
-    const onSettledMutate = jest.fn()
+    const onSuccess = vi.fn()
+    const onSuccessMutate = vi.fn()
+    const onSettled = vi.fn()
+    const onSettledMutate = vi.fn()
     const mutationKey = queryKey()
     let count = 0
 
@@ -1006,10 +1007,10 @@ describe('createMutation', () => {
   })
 
   it('should call mutate callbacks only for the last observer', async () => {
-    const onSuccess = jest.fn()
-    const onSuccessMutate = jest.fn()
-    const onSettled = jest.fn()
-    const onSettledMutate = jest.fn()
+    const onSuccess = vi.fn()
+    const onSuccessMutate = vi.fn()
+    const onSettled = vi.fn()
+    const onSettledMutate = vi.fn()
     let count = 0
 
     function Page() {
@@ -1072,7 +1073,7 @@ describe('createMutation', () => {
 
   it('should go to error state if onSuccess callback errors', async () => {
     const error = new Error('error from onSuccess')
-    const onError = jest.fn()
+    const onError = vi.fn()
 
     function Page() {
       const mutation = createMutation(() => ({
@@ -1148,7 +1149,7 @@ describe('createMutation', () => {
   it('should go to error state if onSettled callback errors', async () => {
     const error = new Error('error from onSettled')
     const mutateFnError = new Error('mutateFnError')
-    const onError = jest.fn()
+    const onError = vi.fn()
 
     function Page() {
       const mutation = createMutation(() => ({

package/src/__tests__/createQueries.test.tsx

@@ -23,6 +23,7 @@ import {
   queryKey,
   sleep,
 } from './utils'
+import { vi } from 'vitest'
 
 describe('useQueries', () => {
   const queryCache = new QueryCache()
@@ -739,7 +740,7 @@ describe('useQueries', () => {
       }
     }
 
-    const QueriesObserverSpy = jest
+    const QueriesObserverSpy = vi
       .spyOn(QueriesObserverModule, 'QueriesObserver')
       .mockImplementation((fn) => {
         return new QueriesObserverMock(fn)
@@ -789,27 +790,4 @@ describe('useQueries', () => {
     await sleep(20)
     QueriesObserverSpy.mockRestore()
   })
-
-  it('should use provided custom queryClient', async () => {
-    const key = queryKey()
-    const queryFn = () => {
-      return Promise.resolve('custom client')
-    }
-
-    function Page() {
-      const state = createQueries(() => ({
-        queries: [{ queryKey: key, queryFn }],
-        queryClient,
-      }))
-      return (
-        <div>
-          <h1>Status: {state[0].data}</h1>
-        </div>
-      )
-    }
-
-    render(() => <Page />)
-
-    await waitFor(() => screen.getByText('Status: custom client'))
-  })
 })

package/src/__tests__/createQuery.test.tsx

@@ -33,6 +33,8 @@ import {
   setActTimeout,
   sleep,
 } from './utils'
+import { vi } from 'vitest'
+import type { Mock } from 'vitest'
 
 describe('createQuery', () => {
   const queryCache = new QueryCache()
@@ -491,7 +493,7 @@ describe('createQuery', () => {
   it('should call onSuccess after a query has been fetched', async () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
-    const onSuccess = jest.fn()
+    const onSuccess = vi.fn()
 
     function Page() {
       const state = createQuery(() => ({
@@ -523,7 +525,7 @@ describe('createQuery', () => {
   it('should call onSuccess after a disabled query has been fetched', async () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
-    const onSuccess = jest.fn()
+    const onSuccess = vi.fn()
 
     function Page() {
       const state = createQuery(() => ({
@@ -561,7 +563,7 @@ describe('createQuery', () => {
   it('should not call onSuccess if a component has unmounted', async () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
-    const onSuccess = jest.fn()
+    const onSuccess = vi.fn()
 
     function Page() {
       const [show, setShow] = createSignal(true)
@@ -601,7 +603,7 @@ describe('createQuery', () => {
   it('should call onError after a query has been fetched with an error', async () => {
     const key = queryKey()
     const states: CreateQueryResult<unknown>[] = []
-    const onError = jest.fn()
+    const onError = vi.fn()
 
     function Page() {
       const state = createQuery(() => ({
@@ -632,7 +634,7 @@ describe('createQuery', () => {
 
   it('should not call onError when receiving a CancelledError', async () => {
     const key = queryKey()
-    const onError = jest.fn()
+    const onError = vi.fn()
 
     function Page() {
       const state = createQuery(() => ({
@@ -666,7 +668,7 @@ describe('createQuery', () => {
   it('should call onSettled after a query has been fetched', async () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
-    const onSettled = jest.fn()
+    const onSettled = vi.fn()
 
     function Page() {
       const state = createQuery(() => ({
@@ -696,7 +698,7 @@ describe('createQuery', () => {
   it('should call onSettled after a query has been fetched with an error', async () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
-    const onSettled = jest.fn()
+    const onSettled = vi.fn()
 
     function Page() {
       const state = createQuery(() => ({
@@ -2452,7 +2454,7 @@ describe('createQuery', () => {
 
   it('should not refetch query on focus when `enabled` is set to `false`', async () => {
     const key = queryKey()
-    const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
+    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
 
     function Page() {
       const { data = 'default' } = createQuery(() => ({
@@ -3296,7 +3298,7 @@ describe('createQuery', () => {
   it('should retry specified number of times', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<unknown, unknown[]>()
+    const queryFn = vi.fn<unknown[], unknown>()
     queryFn.mockImplementation(() => {
       return Promise.reject(new Error('Error test Barrett'))
     })
@@ -3337,7 +3339,7 @@ describe('createQuery', () => {
   it('should not retry if retry function `false`', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<unknown, unknown[]>()
+    const queryFn = vi.fn<unknown[], unknown>()
 
     queryFn.mockImplementationOnce(() => {
       return Promise.reject(new Error('Error test Tanner'))
@@ -3385,7 +3387,7 @@ describe('createQuery', () => {
 
     type DelayError = { delay: number }
 
-    const queryFn = jest.fn<unknown, unknown[]>()
+    const queryFn = vi.fn<unknown[], unknown>()
     queryFn.mockImplementation(() => {
       return Promise.reject({ delay: 50 })
     })
@@ -3596,10 +3598,10 @@ describe('createQuery', () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
 
-    const queryFn = jest.fn<string, unknown[]>()
+    const queryFn = vi.fn<unknown[], string>()
     queryFn.mockImplementation(() => 'data')
 
-    const prefetchQueryFn = jest.fn<string, unknown[]>()
+    const prefetchQueryFn = vi.fn<unknown[], string>()
     prefetchQueryFn.mockImplementation(() => 'not yet...')
 
     await queryClient.prefetchQuery({
@@ -3633,10 +3635,10 @@ describe('createQuery', () => {
   it('should not refetch if not stale after a prefetch', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<string, unknown[]>()
+    const queryFn = vi.fn<unknown[], string>()
     queryFn.mockImplementation(() => 'data')
 
-    const prefetchQueryFn = jest.fn<Promise<string>, unknown[]>()
+    const prefetchQueryFn = vi.fn<unknown[], Promise<string>>()
     prefetchQueryFn.mockImplementation(async () => {
       await sleep(10)
       return 'not yet...'
@@ -3909,7 +3911,7 @@ describe('createQuery', () => {
 
   it('it should support enabled:false in query object syntax', async () => {
     const key = queryKey()
-    const queryFn = jest.fn<string, unknown[]>()
+    const queryFn = vi.fn<unknown[], string>()
     queryFn.mockImplementation(() => 'data')
 
     function Page() {
@@ -3981,7 +3983,7 @@ describe('createQuery', () => {
     ))
 
     await waitFor(() => screen.getByText('fetched data'))
-    const setTimeoutSpy = jest.spyOn(window, 'setTimeout')
+    const setTimeoutSpy = vi.spyOn(window, 'setTimeout')
 
     result.unmount()
 
@@ -4007,7 +4009,7 @@ describe('createQuery', () => {
     ))
 
     await waitFor(() => screen.getByText('fetched data'))
-    const setTimeoutSpy = jest.spyOn(window, 'setTimeout')
+    const setTimeoutSpy = vi.spyOn(window, 'setTimeout')
 
     result.unmount()
 
@@ -4019,8 +4021,8 @@ describe('createQuery', () => {
 
   it('should not cause memo churn when data does not change', async () => {
     const key = queryKey()
-    const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
-    const memoFn = jest.fn()
+    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
+    const memoFn = vi.fn()
 
     function Page() {
       const result = createQuery(() => ({
@@ -4255,7 +4257,7 @@ describe('createQuery', () => {
   it('should refetch if any query instance becomes enabled', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
+    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
 
     function Disabled() {
       createQuery(() => ({ queryKey: key, queryFn, enabled: false }))
@@ -4610,11 +4612,11 @@ describe('createQuery', () => {
 
   it('should cancel the query function when there are no more subscriptions', async () => {
     const key = queryKey()
-    let cancelFn: jest.Mock = jest.fn()
+    let cancelFn: Mock = vi.fn()
 
     const queryFn = ({ signal }: { signal?: AbortSignal }) => {
       const promise = new Promise<string>((resolve, reject) => {
-        cancelFn = jest.fn(() => reject('Cancelled'))
+        cancelFn = vi.fn(() => reject('Cancelled'))
         signal?.addEventListener('abort', cancelFn)
         sleep(20).then(() => resolve('OK'))
       })
@@ -4958,7 +4960,7 @@ describe('createQuery', () => {
   })
 
   it('should refetch when changed enabled to true in error state', async () => {
-    const queryFn = jest.fn<unknown, unknown[]>()
+    const queryFn = vi.fn<unknown[], unknown>()
     queryFn.mockImplementation(async () => {
       await sleep(10)
       return Promise.reject(new Error('Suspense Error Bingo'))
@@ -6052,7 +6054,7 @@ describe('createQuery', () => {
 
   it('setQueryData - should not call onSuccess callback of active observers', async () => {
     const key = queryKey()
-    const onSuccess = jest.fn()
+    const onSuccess = vi.fn()
 
     function Page() {
       const state = createQuery(() => ({

package/src/__tests__/suspense.test.tsx

@@ -20,6 +20,7 @@ import {
   QueryClientProvider,
 } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
+import { vi } from 'vitest'
 
 describe("useQuery's in Suspense mode", () => {
   const queryCache = new QueryCache()
@@ -142,7 +143,7 @@ describe("useQuery's in Suspense mode", () => {
   it('should not call the queryFn twice when used in Suspense mode', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<string, unknown[]>()
+    const queryFn = vi.fn<unknown[], string>()
     queryFn.mockImplementation(() => {
       sleep(10)
       return 'data'
@@ -219,7 +220,7 @@ describe("useQuery's in Suspense mode", () => {
   it('should call onSuccess on the first successful call', async () => {
     const key = queryKey()
 
-    const successFn = jest.fn()
+    const successFn = vi.fn()
 
     function Page() {
       createQuery(() => ({
@@ -254,8 +255,8 @@ describe("useQuery's in Suspense mode", () => {
   it('should call every onSuccess handler within a suspense boundary', async () => {
     const key = queryKey()
 
-    const successFn1 = jest.fn()
-    const successFn2 = jest.fn()
+    const successFn1 = vi.fn()
+    const successFn2 = vi.fn()
 
     function FirstComponent() {
       createQuery(() => ({
@@ -733,7 +734,7 @@ describe("useQuery's in Suspense mode", () => {
   it('should not call the queryFn when not enabled', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<Promise<string>, unknown[]>()
+    const queryFn = vi.fn<unknown[], Promise<string>>()
     queryFn.mockImplementation(async () => {
       await sleep(10)
       return '23'

package/src/__tests__/useIsFetching.test.tsx

@@ -152,9 +152,7 @@ describe('useIsFetching', () => {
     function Page() {
       const [started, setStarted] = createSignal(false)
       const isFetching = useIsFetching(() => ({
-        filters: {
-          queryKey: key1,
-        },
+        queryKey: key1,
       }))
 
       createRenderEffect(() => {
@@ -237,7 +235,7 @@ describe('useIsFetching', () => {
         () => queryClient,
       )
 
-      const isFetching = useIsFetching(() => ({ queryClient }))
+      const isFetching = useIsFetching(undefined, () => queryClient)
 
       return (
         <div>

package/src/__tests__/useIsMutating.test.tsx

@@ -6,6 +6,7 @@ import { createEffect, createRenderEffect, createSignal, Show } from 'solid-js'
 import { render } from 'solid-testing-library'
 import * as MutationCacheModule from '../../../query-core/src/mutationCache'
 import { setActTimeout } from './utils'
+import { vi } from 'vitest'
 
 describe('useIsMutating', () => {
   it('should return the number of fetching mutations', async () => {
@@ -68,9 +69,7 @@ describe('useIsMutating', () => {
     const queryClient = createQueryClient()
 
     function IsMutating() {
-      const isMutating = useIsMutating(() => ({
-        filters: { mutationKey: ['mutation1'] },
-      }))
+      const isMutating = useIsMutating(() => ({ mutationKey: ['mutation1'] }))
       createRenderEffect(() => {
         isMutatings.push(isMutating())
       })
@@ -116,10 +115,8 @@ describe('useIsMutating', () => {
 
     function IsMutating() {
       const isMutating = useIsMutating(() => ({
-        filters: {
-          predicate: (mutation) =>
-            mutation.options.mutationKey?.[0] === 'mutation1',
-        },
+        predicate: (mutation) =>
+          mutation.options.mutationKey?.[0] === 'mutation1',
       }))
       createRenderEffect(() => {
         isMutatings.push(isMutating())
@@ -161,6 +158,33 @@ describe('useIsMutating', () => {
     await waitFor(() => expect(isMutatings).toEqual([0, 1, 0]))
   })
 
+  it('should use provided custom queryClient', async () => {
+    const queryClient = createQueryClient()
+    function Page() {
+      const isMutating = useIsMutating(undefined, () => queryClient)
+      const { mutate } = createMutation(
+        () => ({
+          mutationKey: ['mutation1'],
+          mutationFn: async () => {
+            await sleep(10)
+            return 'data'
+          },
+        }),
+        () => queryClient,
+      )
+      createEffect(() => {
+        mutate()
+      })
+      return (
+        <div>
+          <div>mutating: {isMutating}</div>
+        </div>
+      )
+    }
+    render(() => <Page></Page>)
+    await waitFor(() => screen.findByText('mutating: 1'))
+  })
+
   it('should not change state if unmounted', async () => {
     // We have to mock the MutationCache to not unsubscribe
     // the listener when the component is unmounted
@@ -171,7 +195,7 @@ describe('useIsMutating', () => {
       }
     }
 
-    const MutationCacheSpy = jest
+    const MutationCacheSpy = vi
       .spyOn(MutationCacheModule, 'MutationCache')
       .mockImplementation((fn) => {
         return new MutationCacheMock(fn)
@@ -221,36 +245,4 @@ describe('useIsMutating', () => {
     await sleep(20)
     MutationCacheSpy.mockRestore()
   })
-
-  it('should use provided custom queryClient', async () => {
-    const queryClient = createQueryClient()
-
-    function Page() {
-      const isMutating = useIsMutating(() => ({ queryClient }))
-      const { mutate } = createMutation(
-        () => ({
-          mutationKey: ['mutation1'],
-          mutationFn: async () => {
-            await sleep(10)
-            return 'data'
-          },
-        }),
-        () => queryClient,
-      )
-
-      createEffect(() => {
-        mutate()
-      })
-
-      return (
-        <div>
-          <div>mutating: {isMutating}</div>
-        </div>
-      )
-    }
-
-    render(() => <Page></Page>)
-
-    await waitFor(() => screen.findByText('mutating: 1'))
-  })
 })

package/src/__tests__/utils.tsx

@@ -2,6 +2,7 @@ import type { QueryClientConfig } from '@tanstack/query-core'
 import { QueryClient } from '@tanstack/query-core'
 import type { ParentProps } from 'solid-js'
 import { createEffect, createSignal, onCleanup, Show } from 'solid-js'
+import { vi } from 'vitest'
 
 let queryKeyCount = 0
 export function queryKey(): Array<string> {
@@ -34,11 +35,11 @@ export function createQueryClient(config?: QueryClientConfig): QueryClient {
 }
 
 export function mockVisibilityState(value: DocumentVisibilityState) {
-  return jest.spyOn(document, 'visibilityState', 'get').mockReturnValue(value)
+  return vi.spyOn(document, 'visibilityState', 'get').mockReturnValue(value)
 }
 
 export function mockNavigatorOnLine(value: boolean) {
-  return jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
+  return vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
 }
 
 export function sleep(timeout: number): Promise<void> {

package/src/createBaseQuery.ts

@@ -18,7 +18,6 @@ import {
   createResource,
   on,
   onCleanup,
-  onMount,
 } from 'solid-js'
 import { createStore, unwrap } from 'solid-js/store'
 import { useQueryClient } from './QueryClientProvider'
@@ -37,7 +36,7 @@ export function createBaseQuery<
     CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
   >,
   Observer: typeof QueryObserver,
-  queryClient?: () => QueryClient,
+  queryClient?: Accessor<QueryClient>,
 ) {
   const client = createMemo(() => useQueryClient(queryClient?.()))
 
@@ -64,7 +63,20 @@ export function createBaseQuery<
   ) => {
     return observer.subscribe((result) => {
       notifyManager.batchCalls(() => {
-        const unwrappedResult = { ...unwrap(result) }
+        const query = observer.getCurrentQuery()
+        const unwrappedResult = {
+          ...unwrap(result),
+
+          // hydrate() expects a QueryState object, which is similar but not
+          // quite the same as a QueryObserverResult object. Thus, for now, we're
+          // copying over the missing properties from state in order to support hydration
+          dataUpdateCount: query.state.dataUpdateCount,
+          fetchFailureCount: query.state.fetchFailureCount,
+          fetchFailureReason: query.state.fetchFailureReason,
+          fetchMeta: query.state.fetchMeta,
+          isInvalidated: query.state.isInvalidated,
+        }
+
         if (unwrappedResult.isError) {
           if (process.env['NODE_ENV'] === 'development') {
             console.error(unwrappedResult.error)
@@ -178,13 +190,17 @@ export function createBaseQuery<
     }
   })
 
-  onMount(() => {
-    observer.setOptions(defaultedOptions, { listeners: false })
-  })
-
-  createComputed(() => {
-    observer.setOptions(client().defaultQueryOptions(options()))
-  })
+  createComputed(
+    on(
+      () => client().defaultQueryOptions(options()),
+      () => observer.setOptions(client().defaultQueryOptions(options())),
+      {
+        // Defer because we don't need to trigger on first render
+        // This only cares about changes to options after the observer is created
+        defer: true,
+      },
+    ),
+  )
 
   createComputed(
     on(
@@ -209,10 +225,8 @@ export function createBaseQuery<
       target: QueryObserverResult<TData, TError>,
       prop: keyof QueryObserverResult<TData, TError>,
     ): any {
-      if (prop === 'data') {
-        return queryResource()?.data
-      }
-      return Reflect.get(target, prop)
+      const val = queryResource()?.[prop]
+      return val !== undefined ? val : Reflect.get(target, prop)
     },
   }
 

package/src/createInfiniteQuery.ts

@@ -2,7 +2,7 @@ import type {
   QueryObserver,
   QueryKey,
   QueryClient,
-  RegisteredError,
+  DefaultError,
   InfiniteData,
 } from '@tanstack/query-core'
 import { InfiniteQueryObserver } from '@tanstack/query-core'
@@ -12,10 +12,11 @@ import type {
 } from './types'
 import { createBaseQuery } from './createBaseQuery'
 import { createMemo } from 'solid-js'
+import type { Accessor } from 'solid-js'
 
 export function createInfiniteQuery<
   TQueryFnData,
-  TError = RegisteredError,
+  TError = DefaultError,
   TData = InfiniteData<TQueryFnData>,
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
@@ -27,7 +28,7 @@ export function createInfiniteQuery<
     TQueryKey,
     TPageParam
   >,
-  queryClient?: () => QueryClient,
+  queryClient?: Accessor<QueryClient>,
 ): CreateInfiniteQueryResult<TData, TError> {
   return createBaseQuery(
     createMemo(() => options()),