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

package/src/__tests__/createQuery.test.tsx

@@ -33,6 +33,9 @@ import {
   setActTimeout,
   sleep,
 } from './utils'
+import { vi } from 'vitest'
+import type { Mock } from 'vitest'
+import { reconcile } from 'solid-js/store'
 
 describe('createQuery', () => {
   const queryCache = new QueryCache()
@@ -77,21 +80,17 @@ describe('createQuery', () => {
       createQuery(() => ({
         queryKey: [key],
         queryFn: async () => true,
-        onSuccess: (data) => expectType<boolean>(data),
-        onSettled: (data) => expectType<boolean | undefined>(data),
       }))
 
       // it should be possible to specify a union type as result type
       const unionTypeSync = createQuery(() => ({
         queryKey: key,
         queryFn: () => (Math.random() > 0.5 ? 'a' : 'b'),
-        onSuccess: (data) => expectType<'a' | 'b'>(data),
       }))
       expectType<'a' | 'b' | undefined>(unionTypeSync.data)
       const unionTypeAsync = createQuery<'a' | 'b'>(() => ({
         queryKey: key,
         queryFn: () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'),
-        onSuccess: (data) => expectType<'a' | 'b'>(data),
       }))
       expectType<'a' | 'b' | undefined>(unionTypeAsync.data)
 
@@ -488,241 +487,6 @@ describe('createQuery', () => {
     })
   })
 
-  it('should call onSuccess after a query has been fetched', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
-    const onSuccess = jest.fn()
-
-    function Page() {
-      const state = createQuery(() => ({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 'data'
-        },
-        onSuccess,
-      }))
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-      return <div>data: {state.data}</div>
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await screen.findByText('data: data')
-    expect(states.length).toBe(2)
-    expect(onSuccess).toHaveBeenCalledTimes(1)
-    expect(onSuccess).toHaveBeenCalledWith('data')
-  })
-
-  it('should call onSuccess after a disabled query has been fetched', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
-    const onSuccess = jest.fn()
-
-    function Page() {
-      const state = createQuery(() => ({
-        queryKey: key,
-        queryFn: () => 'data',
-        enabled: false,
-        onSuccess,
-      }))
-
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-
-      createEffect(() => {
-        const refetch = state.refetch
-        setActTimeout(() => {
-          refetch()
-        }, 10)
-      })
-
-      return null
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await sleep(50)
-    expect(onSuccess).toHaveBeenCalledTimes(1)
-    expect(onSuccess).toHaveBeenCalledWith('data')
-  })
-
-  it('should not call onSuccess if a component has unmounted', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
-    const onSuccess = jest.fn()
-
-    function Page() {
-      const [show, setShow] = createSignal(true)
-
-      createEffect(() => {
-        setShow(false)
-      })
-      return <>{show() && <Component />}</>
-    }
-
-    function Component() {
-      const state = createQuery(() => ({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 'data'
-        },
-        onSuccess,
-      }))
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-      return null
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await sleep(50)
-    expect(states.length).toBe(1)
-    expect(onSuccess).toHaveBeenCalledTimes(0)
-  })
-
-  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()
-
-    function Page() {
-      const state = createQuery(() => ({
-        queryKey: key,
-        queryFn: () => Promise.reject(new Error('error')),
-        retry: false,
-        onError,
-      }))
-
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-
-      return null
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await sleep(10)
-    expect(states.length).toBe(2)
-    expect(onError).toHaveBeenCalledTimes(1)
-    expect(onError).toHaveBeenCalledWith(new Error('error'))
-  })
-
-  it('should not call onError when receiving a CancelledError', async () => {
-    const key = queryKey()
-    const onError = jest.fn()
-
-    function Page() {
-      const state = createQuery(() => ({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 23
-        },
-        onError,
-      }))
-      return (
-        <span>
-          status: {state.status}, fetchStatus: {state.fetchStatus}
-        </span>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await sleep(5)
-    await queryClient.cancelQueries({ queryKey: key })
-    // query cancellation will reset the query to it's initial state
-    await waitFor(() => screen.getByText('status: pending, fetchStatus: idle'))
-    expect(onError).not.toHaveBeenCalled()
-  })
-
-  it('should call onSettled after a query has been fetched', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
-    const onSettled = jest.fn()
-
-    function Page() {
-      const state = createQuery(() => ({
-        queryKey: key,
-        queryFn: () => 'data',
-        onSettled,
-      }))
-
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-      return null
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await sleep(10)
-    expect(states.length).toBe(2)
-    expect(onSettled).toHaveBeenCalledTimes(1)
-    expect(onSettled).toHaveBeenCalledWith('data', null)
-  })
-
-  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()
-
-    function Page() {
-      const state = createQuery(() => ({
-        queryKey: key,
-        queryFn: () => Promise.reject<unknown>('error'),
-        retry: false,
-        onSettled,
-      }))
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-      return null
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await sleep(10)
-    expect(states.length).toBe(2)
-    expect(onSettled).toHaveBeenCalledTimes(1)
-    expect(onSettled).toHaveBeenCalledWith(undefined, 'error')
-  })
-
   it('should not cancel an ongoing fetch when refetch is called with cancelRefetch=false if we have data already', async () => {
     const key = queryKey()
     let fetchCount = 0
@@ -1280,7 +1044,6 @@ describe('createQuery', () => {
           count++
           return count === 1 ? result1 : result2
         },
-        notifyOnChangeProps: 'all',
       }))
 
       createRenderEffect(() => {
@@ -1320,9 +1083,8 @@ describe('createQuery', () => {
 
     expect(todos).toEqual(result1)
     expect(newTodos).toEqual(result2)
-    expect(newTodos).not.toBe(todos)
     expect(newTodo1).toBe(todo1)
-    expect(newTodo2).not.toBe(todo2)
+    expect(newTodo2).toBe(todo2)
 
     return null
   })
@@ -2273,56 +2035,6 @@ describe('createQuery', () => {
     expect(renders).toBe(1)
   })
 
-  it('should batch re-renders including hook callbacks', async () => {
-    const key = queryKey()
-
-    let renders = 0
-    let callbackCount = 0
-
-    const queryFn = async () => {
-      await sleep(10)
-      return 'data'
-    }
-
-    function Page() {
-      const [count, setCount] = createSignal(0)
-      createQuery(() => ({
-        queryKey: key,
-        queryFn,
-        onSuccess: () => {
-          setCount((x) => x + 1)
-        },
-      }))
-      createQuery(() => ({
-        queryKey: key,
-        queryFn,
-        onSuccess: () => {
-          setCount((x) => x + 1)
-        },
-      }))
-
-      createEffect(() => {
-        renders++
-        callbackCount = count()
-      })
-
-      return <div>count: {count()}</div>
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await waitFor(() => screen.getByText('count: 2'))
-
-    // Should be 3 instead of 5
-    expect(renders).toBe(3)
-    // Both callbacks should have been executed
-    expect(callbackCount).toBe(2)
-  })
-
   it('should render latest data even if react has discarded certain renders', async () => {
     const key = queryKey()
 
@@ -2452,7 +2164,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(() => ({
@@ -3255,7 +2967,7 @@ describe('createQuery', () => {
 
   it('should keep initial data when the query key changes', async () => {
     const key = queryKey()
-    const states: DefinedCreateQueryResult<{ count: number }>[] = []
+    const states: Partial<DefinedCreateQueryResult<{ count: number }>>[] = []
 
     function Page() {
       const [count, setCount] = createSignal(0)
@@ -3264,6 +2976,7 @@ describe('createQuery', () => {
         queryFn: () => ({ count: 10 }),
         staleTime: Infinity,
         initialData: () => ({ count: count() }),
+        reconcile: false,
       }))
       createRenderEffect(() => {
         states.push({ ...state })
@@ -3296,7 +3009,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 +3050,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 +3098,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 +3309,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 +3346,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 +3622,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 +3694,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 +3720,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 +3732,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 +3968,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 }))
@@ -4608,13 +4321,68 @@ describe('createQuery', () => {
     expect(states).toHaveLength(1)
   })
 
+  it('The reconcile fn callback should correctly maintain referential equality', async () => {
+    const key1 = queryKey()
+    const states: Array<Array<number>> = []
+
+    function Page() {
+      const [forceValue, setForceValue] = createSignal(1)
+
+      const state = createQuery(() => ({
+        queryKey: key1,
+        queryFn: async () => {
+          await sleep(10)
+          return [1, 2]
+        },
+        select: (res) => res.map((x) => x + 1),
+        reconcile(oldData, newData) {
+          return reconcile(newData)(oldData)
+        },
+      }))
+
+      createEffect(() => {
+        if (state.data) {
+          states.push(state.data)
+        }
+      })
+
+      const forceUpdate = () => {
+        setForceValue((prev) => prev + 1)
+      }
+
+      return (
+        <div>
+          <h2>Data: {JSON.stringify(state.data)}</h2>
+          <h2>forceValue: {forceValue}</h2>
+          <button onClick={forceUpdate}>forceUpdate</button>
+        </div>
+      )
+    }
+
+    render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+    await waitFor(() => screen.getByText('Data: [2,3]'))
+    expect(states).toHaveLength(1)
+
+    fireEvent.click(screen.getByRole('button', { name: /forceUpdate/i }))
+
+    await waitFor(() => screen.getByText('forceValue: 2'))
+    await waitFor(() => screen.getByText('Data: [2,3]'))
+
+    // effect should not be triggered again due to structural sharing
+    expect(states).toHaveLength(1)
+  })
+
   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 +4726,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'))
@@ -6050,40 +5818,6 @@ describe('createQuery', () => {
     })
   })
 
-  it('setQueryData - should not call onSuccess callback of active observers', async () => {
-    const key = queryKey()
-    const onSuccess = jest.fn()
-
-    function Page() {
-      const state = createQuery(() => ({
-        queryKey: key,
-        queryFn: () => 'data',
-        onSuccess,
-      }))
-      return (
-        <div>
-          <div>data: {state.data}</div>
-          <button onClick={() => queryClient.setQueryData(key, 'newData')}>
-            setQueryData
-          </button>
-        </div>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await waitFor(() => screen.getByText('data: data'))
-    fireEvent.click(screen.getByRole('button', { name: /setQueryData/i }))
-    await waitFor(() => screen.getByText('data: newData'))
-
-    expect(onSuccess).toHaveBeenCalledTimes(1)
-    expect(onSuccess).toHaveBeenCalledWith('data')
-  })
-
   it('setQueryData - should respect updatedAt', async () => {
     const key = queryKey()
 

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'
@@ -216,89 +217,6 @@ describe("useQuery's in Suspense mode", () => {
     expect(queryCache.find({ queryKey: key })?.getObserversCount()).toBe(0)
   })
 
-  it('should call onSuccess on the first successful call', async () => {
-    const key = queryKey()
-
-    const successFn = jest.fn()
-
-    function Page() {
-      createQuery(() => ({
-        queryKey: [key],
-        queryFn: async () => {
-          await sleep(10)
-          return key
-        },
-
-        suspense: true,
-        select: () => 'selected',
-        onSuccess: successFn,
-      }))
-
-      return <>rendered</>
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Suspense fallback="loading">
-          <Page />
-        </Suspense>
-      </QueryClientProvider>
-    ))
-
-    await waitFor(() => screen.getByText('rendered'))
-
-    await waitFor(() => expect(successFn).toHaveBeenCalledTimes(1))
-    await waitFor(() => expect(successFn).toHaveBeenCalledWith('selected'))
-  })
-
-  it('should call every onSuccess handler within a suspense boundary', async () => {
-    const key = queryKey()
-
-    const successFn1 = jest.fn()
-    const successFn2 = jest.fn()
-
-    function FirstComponent() {
-      createQuery(() => ({
-        queryKey: key,
-        queryFn: () => {
-          sleep(10)
-          return 'data'
-        },
-        onSuccess: successFn1,
-      }))
-
-      return <span>first</span>
-    }
-
-    function SecondComponent() {
-      createQuery(() => ({
-        queryKey: key,
-        queryFn: () => {
-          sleep(10)
-          return 'data'
-        },
-        onSuccess: successFn2,
-      }))
-
-      return <span>second</span>
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Suspense fallback="loading">
-          <FirstComponent />
-          <SecondComponent />
-        </Suspense>
-        ,
-      </QueryClientProvider>
-    ))
-
-    await waitFor(() => screen.getByText('second'))
-
-    await waitFor(() => expect(successFn1).toHaveBeenCalledTimes(1))
-    await waitFor(() => expect(successFn2).toHaveBeenCalledTimes(1))
-  })
-
   // https://github.com/tannerlinsley/react-query/issues/468
   it('should reset error state if new component instances are mounted', async () => {
     const key = queryKey()
@@ -733,7 +651,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'