@tanstack/solid-query 5.0.0-alpha.2 → 5.0.0-alpha.20

package/src/__tests__/createInfiniteQuery.test.tsx

@@ -10,6 +10,7 @@ import {
   Index,
   Match,
   Switch,
+  on,
 } from 'solid-js'
 import type {
   CreateInfiniteQueryResult,
@@ -23,6 +24,8 @@ import {
   keepPreviousData,
 } from '..'
 import { Blink, queryKey, setActTimeout } from './utils'
+import { vi } from 'vitest'
+import type { Mock } from 'vitest'
 
 interface Result {
   items: number[]
@@ -191,7 +194,8 @@ describe('useInfiniteQuery', () => {
 
   it('should keep the previous data when placeholderData is set', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<string>>>[] =
+      []
 
     function Page() {
       const [order, setOrder] = createSignal('desc')
@@ -210,7 +214,16 @@ describe('useInfiniteQuery', () => {
       }))
 
       createRenderEffect(() => {
-        states.push({ ...state })
+        states.push({
+          data: state.data ? JSON.parse(JSON.stringify(state.data)) : undefined,
+          hasNextPage: state.hasNextPage,
+          hasPreviousPage: state.hasPreviousPage,
+          isFetching: state.isFetching,
+          isFetchingNextPage: state.isFetchingNextPage,
+          isFetchingPreviousPage: state.isFetchingPreviousPage,
+          isSuccess: state.isSuccess,
+          isPlaceholderData: state.isPlaceholderData,
+        })
       })
 
       return (
@@ -373,7 +386,8 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to reverse the data', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
+      []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -392,9 +406,19 @@ describe('useInfiniteQuery', () => {
         defaultPageParam: 0,
       }))
 
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
+      createRenderEffect(
+        on(
+          () => ({ ...state }),
+          () => {
+            states.push({
+              data: state.data
+                ? JSON.parse(JSON.stringify(state.data))
+                : undefined,
+              isSuccess: state.isSuccess,
+            })
+          },
+        ),
+      )
 
       return (
         <div>
@@ -437,7 +461,8 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to fetch a previous page', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
+      []
 
     function Page() {
       const start = 10
@@ -454,7 +479,15 @@ describe('useInfiniteQuery', () => {
       }))
 
       createRenderEffect(() => {
-        states.push({ ...state })
+        states.push({
+          data: state.data ? JSON.parse(JSON.stringify(state.data)) : undefined,
+          hasNextPage: state.hasNextPage,
+          hasPreviousPage: state.hasPreviousPage,
+          isFetching: state.isFetching,
+          isFetchingNextPage: state.isFetchingNextPage,
+          isFetchingPreviousPage: state.isFetchingPreviousPage,
+          isSuccess: state.isSuccess,
+        })
       })
 
       createEffect(() => {
@@ -516,7 +549,8 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to refetch when providing page params automatically', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
+      []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -533,7 +567,13 @@ describe('useInfiniteQuery', () => {
       }))
 
       createRenderEffect(() => {
-        states.push({ ...state })
+        states.push({
+          data: state.data ? JSON.parse(JSON.stringify(state.data)) : undefined,
+          isFetching: state.isFetching,
+          isFetchingNextPage: state.isFetchingNextPage,
+          isRefetching: state.isRefetching,
+          isFetchingPreviousPage: state.isFetchingPreviousPage,
+        })
       })
 
       return (
@@ -630,7 +670,8 @@ describe('useInfiniteQuery', () => {
 
   it('should silently cancel any ongoing fetch when fetching more', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
+      []
 
     function Page() {
       const start = 10
@@ -647,7 +688,13 @@ describe('useInfiniteQuery', () => {
       }))
 
       createRenderEffect(() => {
-        states.push({ ...state })
+        states.push({
+          hasNextPage: state.hasNextPage,
+          data: state.data ? JSON.parse(JSON.stringify(state.data)) : undefined,
+          isFetching: state.isFetching,
+          isFetchingNextPage: state.isFetchingNextPage,
+          isSuccess: state.isSuccess,
+        })
       })
 
       createEffect(() => {
@@ -712,14 +759,14 @@ describe('useInfiniteQuery', () => {
   it('should silently cancel an ongoing fetchNextPage request when another fetchNextPage is invoked', async () => {
     const key = queryKey()
     const start = 10
-    const onAborts: jest.Mock<any, any>[] = []
-    const abortListeners: jest.Mock<any, any>[] = []
-    const fetchPage = jest.fn<
-      Promise<number>,
-      [QueryFunctionContext<typeof key, number>]
+    const onAborts: Mock<any, any>[] = []
+    const abortListeners: Mock<any, any>[] = []
+    const fetchPage = vi.fn<
+      [QueryFunctionContext<typeof key, number>],
+      Promise<number>
     >(async ({ pageParam, signal }) => {
-      const onAbort = jest.fn()
-      const abortListener = jest.fn()
+      const onAbort = vi.fn()
+      const abortListener = vi.fn()
       onAborts.push(onAbort)
       abortListeners.push(abortListener)
       signal.onabort = onAbort
@@ -794,14 +841,14 @@ describe('useInfiniteQuery', () => {
   it('should not cancel an ongoing fetchNextPage request when another fetchNextPage is invoked if `cancelRefetch: false` is used ', async () => {
     const key = queryKey()
     const start = 10
-    const onAborts: jest.Mock<any, any>[] = []
-    const abortListeners: jest.Mock<any, any>[] = []
-    const fetchPage = jest.fn<
-      Promise<number>,
-      [QueryFunctionContext<typeof key, number>]
+    const onAborts: Mock<any, any>[] = []
+    const abortListeners: Mock<any, any>[] = []
+    const fetchPage = vi.fn<
+      [QueryFunctionContext<typeof key, number>],
+      Promise<number>
     >(async ({ pageParam, signal }) => {
-      const onAbort = jest.fn()
-      const abortListener = jest.fn()
+      const onAbort = vi.fn()
+      const abortListener = vi.fn()
       onAborts.push(onAbort)
       abortListeners.push(abortListener)
       signal.onabort = onAbort
@@ -976,7 +1023,8 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to set new pages with the query client', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
+      []
 
     function Page() {
       const [firstPage, setFirstPage] = createSignal(0)
@@ -994,7 +1042,13 @@ describe('useInfiniteQuery', () => {
       }))
 
       createRenderEffect(() => {
-        states.push({ ...state })
+        states.push({
+          hasNextPage: state.hasNextPage,
+          data: state.data ? JSON.parse(JSON.stringify(state.data)) : undefined,
+          isFetching: state.isFetching,
+          isFetchingNextPage: state.isFetchingNextPage,
+          isSuccess: state.isSuccess,
+        })
       })
 
       createEffect(() => {
@@ -1064,7 +1118,8 @@ describe('useInfiniteQuery', () => {
 
   it('should only refetch the first page when initialData is provided', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
+      []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -1081,7 +1136,13 @@ describe('useInfiniteQuery', () => {
       }))
 
       createRenderEffect(() => {
-        states.push({ ...state })
+        states.push({
+          data: JSON.parse(JSON.stringify(state.data)),
+          hasNextPage: state.hasNextPage,
+          isFetching: state.isFetching,
+          isFetchingNextPage: state.isFetchingNextPage,
+          isSuccess: state.isSuccess,
+        })
       })
 
       createEffect(() => {
@@ -1396,7 +1457,7 @@ describe('useInfiniteQuery', () => {
           >
             <Match when={state.status === 'pending'}>Loading...</Match>
             <Match when={state.status === 'error'}>
-              <span>Error: {state.error!.message}</span>
+              <span>Error: {state.error?.message}</span>
             </Match>
           </Switch>
         </div>
@@ -1523,7 +1584,7 @@ describe('useInfiniteQuery', () => {
           >
             <Match when={state.status === 'pending'}>Loading...</Match>
             <Match when={state.status === 'error'}>
-              <span>Error: {state.error!.message}</span>
+              <span>Error: {state.error?.message}</span>
             </Match>
           </Switch>
         </div>
@@ -1587,11 +1648,11 @@ describe('useInfiniteQuery', () => {
 
   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'))
       })

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'))
-  })
 })