@tanstack/solid-query 5.0.0-beta.9 → 5.0.0-rc.1

package/src/__tests__/createQuery.test.tsx

@@ -21,7 +21,6 @@ import {
 import {
   Blink,
   createQueryClient,
-  expectType,
   mockOnlineManagerIsOnline,
   mockVisibilityState,
   queryKey,
@@ -49,32 +48,32 @@ describe('createQuery', () => {
     function Page() {
       // unspecified query function should default to unknown
       const noQueryFn = createQuery(() => ({ queryKey: key }))
-      expectType<unknown>(noQueryFn.data)
-      expectType<unknown>(noQueryFn.error)
+      expectTypeOf<unknown>(noQueryFn.data)
+      expectTypeOf<unknown>(noQueryFn.error)
 
       // it should infer the result type from the query function
       const fromQueryFn = createQuery(() => ({
         queryKey: key,
         queryFn: () => 'test',
       }))
-      expectType<string | undefined>(fromQueryFn.data)
-      expectType<unknown>(fromQueryFn.error)
+      expectTypeOf<string | undefined>(fromQueryFn.data)
+      expectTypeOf<unknown>(fromQueryFn.error)
 
       // it should be possible to specify the result type
       const withResult = createQuery<string>(() => ({
         queryKey: key,
         queryFn: () => 'test',
       }))
-      expectType<string | undefined>(withResult.data)
-      expectType<unknown | null>(withResult.error)
+      expectTypeOf<string | undefined>(withResult.data)
+      expectTypeOf<unknown | null>(withResult.error)
 
       // it should be possible to specify the error type
       const withError = createQuery<string, Error>(() => ({
         queryKey: key,
         queryFn: () => 'test',
       }))
-      expectType<string | undefined>(withError.data)
-      expectType<Error | null>(withError.error)
+      expectTypeOf<string | undefined>(withError.data)
+      expectTypeOf<Error | null>(withError.error)
 
       // it should provide the result type in the configuration
       createQuery(() => ({
@@ -87,12 +86,12 @@ describe('createQuery', () => {
         queryKey: key,
         queryFn: () => (Math.random() > 0.5 ? 'a' : 'b'),
       }))
-      expectType<'a' | 'b' | undefined>(unionTypeSync.data)
+      expectTypeOf<'a' | 'b' | undefined>(unionTypeSync.data)
       const unionTypeAsync = createQuery<'a' | 'b'>(() => ({
         queryKey: key,
         queryFn: () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'),
       }))
-      expectType<'a' | 'b' | undefined>(unionTypeAsync.data)
+      expectTypeOf<'a' | 'b' | undefined>(unionTypeAsync.data)
 
       // should error when the query function result does not match with the specified type
       // @ts-expect-error
@@ -107,15 +106,15 @@ describe('createQuery', () => {
         queryKey: key,
         queryFn: () => queryFn(),
       }))
-      expectType<string | undefined>(fromGenericQueryFn.data)
-      expectType<unknown>(fromGenericQueryFn.error)
+      expectTypeOf<string | undefined>(fromGenericQueryFn.data)
+      expectTypeOf<unknown>(fromGenericQueryFn.error)
 
       const fromGenericOptionsQueryFn = createQuery(() => ({
         queryKey: key,
         queryFn: () => queryFn(),
       }))
-      expectType<string | undefined>(fromGenericOptionsQueryFn.data)
-      expectType<unknown>(fromGenericOptionsQueryFn.error)
+      expectTypeOf<string | undefined>(fromGenericOptionsQueryFn.data)
+      expectTypeOf<unknown>(fromGenericOptionsQueryFn.error)
 
       type MyData = number
       type MyQueryKey = readonly ['my-data', number]
@@ -134,7 +133,7 @@ describe('createQuery', () => {
       const getMyDataStringKey: QueryFunction<MyData, ['1']> = async (
         context,
       ) => {
-        expectType<['1']>(context.queryKey)
+        expectTypeOf<['1']>(context.queryKey)
         return Number(context.queryKey[0]) + 42
       }
 
@@ -173,7 +172,7 @@ describe('createQuery', () => {
           ...options,
         }))
       const test = useWrappedQuery([''], async () => '1')
-      expectType<string | undefined>(test.data)
+      expectTypeOf<string | undefined>(test.data)
 
       // handles wrapped queries with custom fetcher passed directly to createQuery
       const useWrappedFuncStyleQuery = <
@@ -190,7 +189,7 @@ describe('createQuery', () => {
         >,
       ) => createQuery(() => ({ queryKey: qk, queryFn: fetcher, ...options }))
       const testFuncStyle = useWrappedFuncStyleQuery([''], async () => true)
-      expectType<boolean | undefined>(testFuncStyle.data)
+      expectTypeOf<boolean | undefined>(testFuncStyle.data)
     }
   })
 
@@ -227,7 +226,7 @@ describe('createQuery', () => {
 
   it('should return the correct states for a successful query', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page(): JSX.Element {
       const state = createQuery<string, Error>(() => ({
@@ -243,14 +242,14 @@ describe('createQuery', () => {
       })
 
       if (state.isPending) {
-        expectType<undefined>(state.data)
-        expectType<null>(state.error)
+        expectTypeOf<undefined>(state.data)
+        expectTypeOf<null>(state.error)
       } else if (state.isLoadingError) {
-        expectType<undefined>(state.data)
-        expectType<Error>(state.error)
+        expectTypeOf<undefined>(state.data)
+        expectTypeOf<Error>(state.error)
       } else {
-        expectType<string>(state.data)
-        expectType<Error | null>(state.error)
+        expectTypeOf<string>(state.data)
+        expectTypeOf<Error | null>(state.error)
       }
 
       return (
@@ -333,7 +332,7 @@ describe('createQuery', () => {
   it('should return the correct states for an unsuccessful query', async () => {
     const key = queryKey()
 
-    const states: CreateQueryResult<unknown, Error>[] = []
+    const states: Array<CreateQueryResult<unknown, Error>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -448,7 +447,7 @@ describe('createQuery', () => {
 
   it('should set isFetchedAfterMount to true after a query has been fetched', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     await queryClient.prefetchQuery({
       queryKey: key,
@@ -605,7 +604,7 @@ describe('createQuery', () => {
 
   it('should be able to watch a query without providing a query function', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     queryClient.setQueryDefaults(key, { queryFn: () => 'data' })
 
@@ -632,7 +631,7 @@ describe('createQuery', () => {
 
   it('should pick up a query when re-mounting with gcTime 0', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page() {
       const [toggle, setToggle] = createSignal(false)
@@ -712,7 +711,7 @@ describe('createQuery', () => {
 
   it('should fetch when refetchOnMount is false and nothing has been fetched yet', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -741,7 +740,7 @@ describe('createQuery', () => {
 
   it('should not fetch when refetchOnMount is false and data has been fetched already', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     queryClient.setQueryData(key, 'prefetched')
 
@@ -771,7 +770,7 @@ describe('createQuery', () => {
 
   it('should be able to select a part of the data with select', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -800,7 +799,7 @@ describe('createQuery', () => {
 
   it('should be able to select a part of the data with select in object syntax', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -829,7 +828,7 @@ describe('createQuery', () => {
 
   it('should be able to select a part of the data with select in object syntax', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -858,7 +857,7 @@ describe('createQuery', () => {
 
   it('should not re-render when it should only re-render only data change and the selected data did not change', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -898,7 +897,7 @@ describe('createQuery', () => {
 
   it('should throw an error when a selector throws', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<{ status: string; data?: unknown; error?: Error }> = []
     const error = new Error('Select Error')
 
     function Page() {
@@ -910,7 +909,10 @@ describe('createQuery', () => {
         },
       }))
       createRenderEffect(() => {
-        states.push({ ...state })
+        if (state.status === 'pending')
+          states.push({ status: 'pending', data: undefined })
+        else if (state.status === 'error')
+          states.push({ status: 'error', error: state.error })
       })
       return null
     }
@@ -931,7 +933,7 @@ describe('createQuery', () => {
 
   it('should track properties and only re-render when a tracked property changes', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -979,7 +981,7 @@ describe('createQuery', () => {
   it('should always re-render if we are tracking props but not using any', async () => {
     const key = queryKey()
     let renderCount = 0
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -1032,7 +1034,7 @@ describe('createQuery', () => {
       { id: '2', done: true },
     ]
 
-    const states: CreateQueryResult<typeof result1>[] = []
+    const states: Array<CreateQueryResult<typeof result1>> = []
 
     let count = 0
 
@@ -1091,7 +1093,7 @@ describe('createQuery', () => {
 
   it('should use query function from hook when the existing query does not have a query function', async () => {
     const key = queryKey()
-    const results: CreateQueryResult<string>[] = []
+    const results: Array<CreateQueryResult<string>> = []
 
     queryClient.setQueryData(key, 'set')
 
@@ -1140,7 +1142,7 @@ describe('createQuery', () => {
 
   it('should update query stale state and refetch when invalidated with invalidateQueries', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -1214,7 +1216,7 @@ describe('createQuery', () => {
 
   it('should not update disabled query when refetched with refetchQueries', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -1260,7 +1262,7 @@ describe('createQuery', () => {
 
   it('should not refetch disabled query when invalidated with invalidateQueries', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -1306,7 +1308,7 @@ describe('createQuery', () => {
 
   it('should not fetch when switching to a disabled query', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
 
     function Page() {
       const [count, setCount] = createSignal(0)
@@ -1363,7 +1365,7 @@ describe('createQuery', () => {
 
   it('should keep the previous data when placeholderData is set', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
 
     function Page() {
       const [count, setCount] = createSignal(0)
@@ -1430,7 +1432,7 @@ describe('createQuery', () => {
 
   it('should not show initial data from next query if placeholderData is set', async () => {
     const key = queryKey()
-    const states: DefinedCreateQueryResult<number>[] = []
+    const states: Array<DefinedCreateQueryResult<number>> = []
 
     function Page() {
       const [count, setCount] = createSignal(0)
@@ -1508,101 +1510,9 @@ describe('createQuery', () => {
     })
   })
 
-  it('should keep the previous data on disabled query when placeholderData is set to identity function', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
-
-    function Page() {
-      const [count, setCount] = createSignal(0)
-
-      const state = createQuery(() => ({
-        queryKey: [key, count()],
-        queryFn: async () => {
-          await sleep(10)
-          return count()
-        },
-        enabled: false,
-        placeholderData: keepPreviousData,
-        notifyOnChangeProps: 'all',
-      }))
-
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-
-      createEffect(() => {
-        const refetch = state.refetch
-        refetch()
-
-        setActTimeout(() => {
-          setCount(1)
-        }, 20)
-
-        setActTimeout(() => {
-          refetch()
-        }, 30)
-      })
-
-      return null
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await sleep(100)
-
-    expect(states.length).toBe(6)
-
-    // Disabled query
-    expect(states[0]).toMatchObject({
-      data: undefined,
-      isFetching: false,
-      isSuccess: false,
-      isPlaceholderData: false,
-    })
-    // Fetching query
-    expect(states[1]).toMatchObject({
-      data: undefined,
-      isFetching: true,
-      isSuccess: false,
-      isPlaceholderData: false,
-    })
-    // Fetched query
-    expect(states[2]).toMatchObject({
-      data: 0,
-      isFetching: false,
-      isSuccess: true,
-      isPlaceholderData: false,
-    })
-    // Set state
-    expect(states[3]).toMatchObject({
-      data: 0,
-      isFetching: false,
-      isSuccess: true,
-      isPlaceholderData: true,
-    })
-    // Fetching new query
-    expect(states[4]).toMatchObject({
-      data: 0,
-      isFetching: true,
-      isSuccess: true,
-      isPlaceholderData: true,
-    })
-    // Fetched new query
-    expect(states[5]).toMatchObject({
-      data: 1,
-      isFetching: false,
-      isSuccess: true,
-      isPlaceholderData: false,
-    })
-  })
-
   it('should keep the previous data on disabled query when placeholderData is set and switching query key multiple times', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
 
     queryClient.setQueryData([key, 10], 10)
 
@@ -1684,7 +1594,7 @@ describe('createQuery', () => {
 
   it('should use the correct query function when components use different configurations', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
 
     function FirstComponent() {
       const state = createQuery(() => ({
@@ -1752,8 +1662,8 @@ describe('createQuery', () => {
 
   it('should be able to set different stale times for a query', async () => {
     const key = queryKey()
-    const states1: CreateQueryResult<string>[] = []
-    const states2: CreateQueryResult<string>[] = []
+    const states1: Array<CreateQueryResult<string>> = []
+    const states2: Array<CreateQueryResult<string>> = []
 
     await queryClient.prefetchQuery({
       queryKey: key,
@@ -1859,7 +1769,7 @@ describe('createQuery', () => {
 
   it('should re-render when a query becomes stale', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -1889,7 +1799,7 @@ describe('createQuery', () => {
 
   it('should not re-render when it should only re-render on data changes and the data did not change', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -2131,7 +2041,7 @@ describe('createQuery', () => {
 
   it('should not refetch query on focus when `enabled` is set to `false`', async () => {
     const key = queryKey()
-    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
+    const queryFn = vi.fn<Array<unknown>, string>().mockReturnValue('data')
 
     function Page() {
       const { data = 'default' } = createQuery(() => ({
@@ -2162,7 +2072,7 @@ describe('createQuery', () => {
 
   it('should not refetch stale query on focus when `refetchOnWindowFocus` is set to `false`', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -2197,7 +2107,7 @@ describe('createQuery', () => {
 
   it('should not refetch stale query on focus when `refetchOnWindowFocus` is set to a function that returns `false`', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -2232,7 +2142,7 @@ describe('createQuery', () => {
 
   it('should not refetch fresh query on focus when `refetchOnWindowFocus` is set to `true`', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -2267,7 +2177,7 @@ describe('createQuery', () => {
 
   it('should refetch fresh query on focus when `refetchOnWindowFocus` is set to `always`', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -2307,7 +2217,7 @@ describe('createQuery', () => {
 
   it('should calculate focus behaviour for refetchOnWindowFocus depending on function', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -2357,7 +2267,7 @@ describe('createQuery', () => {
 
   it('should refetch fresh query when refetchOnMount is set to always', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     await queryClient.prefetchQuery({
       queryKey: key,
@@ -2400,7 +2310,7 @@ describe('createQuery', () => {
 
   it('should refetch stale query when refetchOnMount is set to true', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     await queryClient.prefetchQuery({
       queryKey: key,
@@ -2446,6 +2356,10 @@ describe('createQuery', () => {
   it('should set status to error if queryFn throws', async () => {
     const key = queryKey()
 
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     function Page() {
       const state = createQuery(() => ({
         queryKey: key,
@@ -2471,11 +2385,17 @@ describe('createQuery', () => {
 
     await waitFor(() => screen.getByText('error'))
     await waitFor(() => screen.getByText('Error test jaylen'))
+
+    consoleMock.mockRestore()
   })
 
   it('should throw error if queryFn throws and throwOnError is in use', async () => {
     const key = queryKey()
 
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     function Page() {
       const state = createQuery(() => ({
         queryKey: key,
@@ -2501,6 +2421,8 @@ describe('createQuery', () => {
     ))
 
     await waitFor(() => screen.getByText('error boundary'))
+
+    consoleMock.mockRestore()
   })
 
   it('should update with data if we observe no properties and throwOnError', async () => {
@@ -2719,7 +2641,7 @@ describe('createQuery', () => {
 
   it('should always fetch if refetchOnMount is set to always', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     await queryClient.prefetchQuery({
       queryKey: key,
@@ -2773,7 +2695,7 @@ describe('createQuery', () => {
 
   it('should fetch if initial data is set', async () => {
     const key = queryKey()
-    const states: DefinedCreateQueryResult<string>[] = []
+    const states: Array<DefinedCreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -2811,7 +2733,7 @@ describe('createQuery', () => {
 
   it('should not fetch if initial data is set with a stale time', async () => {
     const key = queryKey()
-    const states: DefinedCreateQueryResult<string>[] = []
+    const states: Array<DefinedCreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -2849,7 +2771,7 @@ describe('createQuery', () => {
 
   it('should fetch if initial data updated at is older than stale time', async () => {
     const key = queryKey()
-    const states: DefinedCreateQueryResult<string>[] = []
+    const states: Array<DefinedCreateQueryResult<string>> = []
 
     const oneSecondAgo = Date.now() - 1000
 
@@ -2895,7 +2817,7 @@ describe('createQuery', () => {
 
   it('should fetch if "initial data updated at" is exactly 0', async () => {
     const key = queryKey()
-    const states: DefinedCreateQueryResult<string>[] = []
+    const states: Array<DefinedCreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -2934,7 +2856,8 @@ describe('createQuery', () => {
 
   it('should keep initial data when the query key changes', async () => {
     const key = queryKey()
-    const states: Partial<DefinedCreateQueryResult<{ count: number }>>[] = []
+    const states: Array<Partial<DefinedCreateQueryResult<{ count: number }>>> =
+      []
 
     function Page() {
       const [count, setCount] = createSignal(0)
@@ -2976,7 +2899,7 @@ describe('createQuery', () => {
   it('should retry specified number of times', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], unknown>()
+    const queryFn = vi.fn<Array<unknown>, unknown>()
     queryFn.mockImplementation(() => {
       return Promise.reject(new Error('Error test Barrett'))
     })
@@ -3017,7 +2940,7 @@ describe('createQuery', () => {
   it('should not retry if retry function `false`', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], unknown>()
+    const queryFn = vi.fn<Array<unknown>, unknown>()
 
     queryFn.mockImplementationOnce(() => {
       return Promise.reject(new Error('Error test Tanner'))
@@ -3065,7 +2988,7 @@ describe('createQuery', () => {
 
     type DelayError = { delay: number }
 
-    const queryFn = vi.fn<unknown[], unknown>()
+    const queryFn = vi.fn<Array<unknown>, unknown>()
     queryFn.mockImplementation(() => {
       return Promise.reject({ delay: 50 })
     })
@@ -3167,7 +3090,7 @@ describe('createQuery', () => {
 
   it('should fetch on mount when a query was already created with setQueryData', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     queryClient.setQueryData(key, 'prefetched')
 
@@ -3207,7 +3130,7 @@ describe('createQuery', () => {
 
   it('should refetch after focus regain', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     // make page unfocused
     const visibilityMock = mockVisibilityState('hidden')
@@ -3274,12 +3197,12 @@ describe('createQuery', () => {
   // See https://github.com/tannerlinsley/react-query/issues/195
   it('should refetch if stale after a prefetch', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
-    const queryFn = vi.fn<unknown[], string>()
+    const queryFn = vi.fn<Array<unknown>, string>()
     queryFn.mockImplementation(() => 'data')
 
-    const prefetchQueryFn = vi.fn<unknown[], string>()
+    const prefetchQueryFn = vi.fn<Array<unknown>, string>()
     prefetchQueryFn.mockImplementation(() => 'not yet...')
 
     await queryClient.prefetchQuery({
@@ -3313,10 +3236,10 @@ describe('createQuery', () => {
   it('should not refetch if not stale after a prefetch', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], string>()
+    const queryFn = vi.fn<Array<unknown>, string>()
     queryFn.mockImplementation(() => 'data')
 
-    const prefetchQueryFn = vi.fn<unknown[], Promise<string>>()
+    const prefetchQueryFn = vi.fn<Array<unknown>, Promise<string>>()
     prefetchQueryFn.mockImplementation(async () => {
       await sleep(10)
       return 'not yet...'
@@ -3482,7 +3405,7 @@ describe('createQuery', () => {
 
   it('should mark query as fetching, when using initialData', async () => {
     const key = queryKey()
-    const results: DefinedCreateQueryResult<string>[] = []
+    const results: Array<DefinedCreateQueryResult<string>> = []
 
     function Page() {
       const result = createQuery(() => ({
@@ -3517,7 +3440,7 @@ describe('createQuery', () => {
 
   it('should initialize state properly, when initialData is falsy', async () => {
     const key = queryKey()
-    const results: DefinedCreateQueryResult<number>[] = []
+    const results: Array<DefinedCreateQueryResult<number>> = []
 
     function Page() {
       const result = createQuery(() => ({
@@ -3549,7 +3472,7 @@ describe('createQuery', () => {
   // // See https://github.com/tannerlinsley/react-query/issues/214
   it('data should persist when enabled is changed to false', async () => {
     const key = queryKey()
-    const results: DefinedCreateQueryResult<string>[] = []
+    const results: Array<DefinedCreateQueryResult<string>> = []
 
     function Page() {
       const [shouldFetch, setShouldFetch] = createSignal(true)
@@ -3589,7 +3512,7 @@ describe('createQuery', () => {
 
   it('it should support enabled:false in query object syntax', async () => {
     const key = queryKey()
-    const queryFn = vi.fn<unknown[], string>()
+    const queryFn = vi.fn<Array<unknown>, string>()
     queryFn.mockImplementation(() => 'data')
 
     function Page() {
@@ -3699,7 +3622,7 @@ describe('createQuery', () => {
 
   it('should not cause memo churn when data does not change', async () => {
     const key = queryKey()
-    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
+    const queryFn = vi.fn<Array<unknown>, string>().mockReturnValue('data')
     const memoFn = vi.fn()
 
     function Page() {
@@ -3782,7 +3705,7 @@ describe('createQuery', () => {
   it('should refetch in an interval depending on function result', async () => {
     const key = queryKey()
     let count = 0
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -3854,7 +3777,7 @@ describe('createQuery', () => {
 
   it('should not interval fetch with a refetchInterval of 0', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -3935,7 +3858,7 @@ describe('createQuery', () => {
   it('should refetch if any query instance becomes enabled', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
+    const queryFn = vi.fn<Array<unknown>, string>().mockReturnValue('data')
 
     function Disabled() {
       createQuery(() => ({ queryKey: key, queryFn, enabled: false }))
@@ -3972,7 +3895,7 @@ describe('createQuery', () => {
   it('should use placeholder data while the query loads', async () => {
     const key1 = queryKey()
 
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -4017,7 +3940,8 @@ describe('createQuery', () => {
   it('should use placeholder data even for disabled queries', async () => {
     const key1 = queryKey()
 
-    const states: { state: CreateQueryResult<string>; count: number }[] = []
+    const states: Array<{ state: CreateQueryResult<string>; count: number }> =
+      []
 
     function Page() {
       const [count, setCount] = createSignal(0)
@@ -4083,7 +4007,7 @@ describe('createQuery', () => {
   it('placeholder data should run through select', async () => {
     const key1 = queryKey()
 
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     function Page() {
       const state = createQuery(() => ({
@@ -4129,7 +4053,7 @@ describe('createQuery', () => {
   it('placeholder data function result should run through select', async () => {
     const key1 = queryKey()
 
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
     let placeholderFunctionRunCount = 0
 
     function Page() {
@@ -4381,7 +4305,7 @@ describe('createQuery', () => {
 
   it('should cancel the query if the signal was consumed and there are no more subscriptions', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     const queryFn: QueryFunction<
       string,
@@ -4451,7 +4375,7 @@ describe('createQuery', () => {
 
   it('should refetch when quickly switching to a failed query', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
+    const states: Array<CreateQueryResult<string>> = []
 
     const queryFn = async () => {
       await sleep(50)
@@ -4501,7 +4425,7 @@ describe('createQuery', () => {
 
   it('should update query state and refetch when reset with resetQueries', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -4575,7 +4499,7 @@ describe('createQuery', () => {
 
   it('should update query state and not refetch when resetting a disabled query with resetQueries', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -4652,11 +4576,10 @@ describe('createQuery', () => {
     })
   })
 
-  it('should only call the query hash function once each render', async () => {
+  it('should only call the query hash function once', async () => {
     const key = queryKey()
 
     let hashes = 0
-    let renders = 0
 
     function queryKeyHashFn(x: any) {
       hashes++
@@ -4664,20 +4587,12 @@ describe('createQuery', () => {
     }
 
     function Page() {
-      const state = createQuery(() => ({
+      createQuery(() => ({
         queryKey: key,
         queryFn: () => 'test',
         queryKeyHashFn,
       }))
 
-      createEffect(
-        on(
-          () => state.status,
-          () => {
-            renders++
-          },
-        ),
-      )
       return null
     }
 
@@ -4688,12 +4603,11 @@ describe('createQuery', () => {
     ))
 
     await sleep(10)
-
-    expect(renders).toBe(hashes)
+    expect(hashes).toBe(1)
   })
 
   it('should refetch when changed enabled to true in error state', async () => {
-    const queryFn = vi.fn<unknown[], unknown>()
+    const queryFn = vi.fn<Array<unknown>, unknown>()
     queryFn.mockImplementation(async () => {
       await sleep(10)
       return Promise.reject(new Error('Suspense Error Bingo'))
@@ -4888,7 +4802,7 @@ describe('createQuery', () => {
 
   it('should have no error in pending state when refetching after error occurred', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
     const error = new Error('oops')
 
     let count = 0
@@ -5747,7 +5661,7 @@ describe('createQuery', () => {
 
   it('it should have status=error on mount when a query has failed', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<unknown>[] = []
+    const states: Array<CreateQueryResult<unknown>> = []
     const error = new Error('oops')
 
     const queryFn = async (): Promise<unknown> => {