@tanstack/solid-query 4.24.10 → 5.0.0-alpha.0

package/src/__tests__/createQueries.test.tsx

@@ -2,21 +2,13 @@ import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
 
 import * as QueriesObserverModule from '../../../query-core/src/queriesObserver'
 
-import type { QueryFunctionContext } from '@tanstack/query-core'
-import {
-  createContext,
-  createMemo,
-  createRenderEffect,
-  createSignal,
-  ErrorBoundary,
-} from 'solid-js'
+import type { QueryFunctionContext, QueryKey } from '@tanstack/query-core'
+import { createRenderEffect, createSignal } from 'solid-js'
 import type {
-  CreateQueryOptions,
   CreateQueryResult,
-  QueryClient,
   QueryFunction,
   QueryObserverResult,
-  SolidQueryKey,
+  SolidQueryOptions,
 } from '..'
 import {
   createQueries,
@@ -42,7 +34,7 @@ describe('useQueries', () => {
     const results: CreateQueryResult[][] = []
 
     function Page() {
-      const result = createQueries({
+      const result = createQueries(() => ({
         queries: [
           {
             queryKey: key1,
@@ -59,7 +51,7 @@ describe('useQueries', () => {
             },
           },
         ],
-      })
+      }))
 
       createRenderEffect(() => {
         results.push([...result])
@@ -89,305 +81,32 @@ describe('useQueries', () => {
     expect(results[2]).toMatchObject([{ data: 1 }, { data: 2 }])
   })
 
-  it('should keep previous data if amount of queries is the same', async () => {
+  it('handles type parameter - tuple of tuples', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
-    const states: CreateQueryResult[][] = []
+    const key3 = queryKey()
 
+    // @ts-expect-error (Page component is not rendered)
+    // eslint-disable-next-line
     function Page() {
-      const [count, setCount] = createSignal(1)
-      const result = createQueries({
-        queries: [
-          {
-            queryKey: () => [key1(), count()],
-            keepPreviousData: true,
-            queryFn: async () => {
-              await sleep(10)
-              return count() * 2
-            },
-          },
-          {
-            queryKey: () => [key2(), count()],
-            keepPreviousData: true,
-            queryFn: async () => {
-              await sleep(35)
-              return count() * 5
+      const result1 = createQueries<[[number], [string], [string[], boolean]]>(
+        () => ({
+          queries: [
+            {
+              queryKey: key1,
+              queryFn: () => 1,
             },
-          },
-        ],
-      })
-
-      createRenderEffect(() => {
-        states.push([...result])
-      })
-
-      const isFetching = createMemo(() => result.some((r) => r.isFetching))
-
-      return (
-        <div>
-          <div>
-            data1: {String(result[0].data ?? 'null')}, data2:{' '}
-            {String(result[1].data ?? 'null')}
-          </div>
-          <div>isFetching: {String(isFetching())}</div>
-          <button onClick={() => setCount((prev) => prev + 1)}>inc</button>
-        </div>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await waitFor(() => screen.getByText('data1: 2, data2: 5'))
-    fireEvent.click(screen.getByRole('button', { name: /inc/i }))
-
-    await waitFor(() => screen.getByText('data1: 4, data2: 10'))
-    await waitFor(() => screen.getByText('isFetching: false'))
-
-    expect(states[states.length - 1]).toMatchObject([
-      { status: 'success', data: 4, isPreviousData: false, isFetching: false },
-      { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-    ])
-  })
-
-  it('should keep previous data for variable amounts of useQueries', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult[][] = []
-
-    function Page() {
-      const [count, setCount] = createSignal(2)
-      const result = createQueries({
-        // TODO(lukemurray): reactive queries doesn't appear to work
-        get queries() {
-          return Array.from({ length: count() }, (_, i) => ({
-            queryKey: () => [key(), count(), i + 1],
-            keepPreviousData: true,
-            queryFn: async () => {
-              await sleep(35 * (i + 1))
-              return (i + 1) * count() * 2
+            {
+              queryKey: key2,
+              queryFn: () => 'string',
             },
-          }))
-        },
-      })
-
-      createRenderEffect(() => {
-        states.push([...result])
-      })
-
-      const isFetching = createMemo(() => result.some((r) => r.isFetching))
-
-      return (
-        <div>
-          <div>data: {result.map((it) => it.data).join(',')}</div>
-          <div>isFetching: {String(isFetching())}</div>
-          <button onClick={() => setCount((prev) => prev + 1)}>inc</button>
-        </div>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await waitFor(() => screen.getByText('data: 4,8'))
-    fireEvent.click(screen.getByRole('button', { name: /inc/i }))
-
-    await waitFor(() => screen.getByText('data: 6,12,18'))
-    await waitFor(() => screen.getByText('isFetching: false'))
-
-    expect(states[states.length - 1]).toMatchObject([
-      { status: 'success', data: 6, isPreviousData: false, isFetching: false },
-      { status: 'success', data: 12, isPreviousData: false, isFetching: false },
-      { status: 'success', data: 18, isPreviousData: false, isFetching: false },
-    ])
-  })
-
-  it('should keep previous data when switching between queries', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult[][] = []
-
-    function Page() {
-      const [series1, setSeries1] = createSignal(1)
-      const [series2, setSeries2] = createSignal(2)
-      const ids = [series1, series2]
-
-      const result = createQueries({
-        queries: ids.map((id) => {
-          return {
-            queryKey: () => [key(), id()],
-            queryFn: async () => {
-              await sleep(5)
-              return id() * 5
+            {
+              queryKey: key3,
+              queryFn: () => ['string[]'],
             },
-            keepPreviousData: true,
-          }
+          ],
         }),
-      })
-
-      createRenderEffect(() => {
-        states.push([...result])
-      })
-
-      const isFetching = createMemo(() => result.some((r) => r.isFetching))
-
-      return (
-        <div>
-          <div>
-            data1: {String(result[0]?.data ?? 'null')}, data2:{' '}
-            {String(result[1]?.data ?? 'null')}
-          </div>
-          <div>isFetching: {String(isFetching())}</div>
-          <button onClick={() => setSeries2(3)}>setSeries2</button>
-          <button onClick={() => setSeries1(2)}>setSeries1</button>
-        </div>
       )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await waitFor(() => screen.getByText('data1: 5, data2: 10'))
-    fireEvent.click(screen.getByRole('button', { name: /setSeries2/i }))
-
-    await waitFor(() => screen.getByText('data1: 5, data2: 15'))
-    fireEvent.click(screen.getByRole('button', { name: /setSeries1/i }))
-
-    await waitFor(() => screen.getByText('data1: 10, data2: 15'))
-    await waitFor(() => screen.getByText('isFetching: false'))
-
-    expect(states[states.length - 1]).toMatchObject([
-      { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-      { status: 'success', data: 15, isPreviousData: false, isFetching: false },
-    ])
-  })
-
-  it('should not go to infinite render loop with previous data when toggling queries', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult[][] = []
-
-    function Page() {
-      const [enableId1, setEnableId1] = createSignal(true)
-      const ids = createMemo(() => (enableId1() ? [1, 2] : [2]))
-
-      const result = createQueries({
-        // TODO(lukemurray): same issue queries should be reactive
-        get queries() {
-          return ids().map((id) => {
-            return {
-              queryKey: () => [key(), id],
-              queryFn: async () => {
-                await sleep(5)
-                return id * 5
-              },
-              keepPreviousData: true,
-            }
-          })
-        },
-      })
-
-      createRenderEffect(() => {
-        states.push([...result])
-      })
-
-      const text = createMemo(() => {
-        return result
-          .map((r, idx) => `data${idx + 1}: ${r.data ?? 'null'}`)
-          .join(' ')
-      })
-
-      const isFetching = createMemo(() => result.some((r) => r.isFetching))
-
-      return (
-        <div>
-          <div>{text()}</div>
-          <div>isFetching: {String(isFetching())}</div>
-          <button onClick={() => setEnableId1(false)}>set1Disabled</button>
-          <button onClick={() => setEnableId1(true)}>set2Enabled</button>
-        </div>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await waitFor(() => screen.getByText('data1: 5 data2: 10'))
-    fireEvent.click(screen.getByRole('button', { name: /set1Disabled/i }))
-
-    await waitFor(() => screen.getByText('data1: 10'))
-    await waitFor(() => screen.getByText('isFetching: false'))
-    fireEvent.click(screen.getByRole('button', { name: /set2Enabled/i }))
-
-    await waitFor(() => screen.getByText('data1: 5 data2: 10'))
-    await waitFor(() => screen.getByText('isFetching: false'))
-
-    await waitFor(() => expect(states.length).toBe(5))
-
-    expect(states[0]).toMatchObject([
-      {
-        status: 'loading',
-        data: undefined,
-        isPreviousData: false,
-        isFetching: true,
-      },
-      {
-        status: 'loading',
-        data: undefined,
-        isPreviousData: false,
-        isFetching: true,
-      },
-    ])
-    expect(states[1]).toMatchObject([
-      { status: 'success', data: 5, isPreviousData: false, isFetching: false },
-      { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-    ])
-    expect(states[2]).toMatchObject([
-      { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-    ])
-    expect(states[3]).toMatchObject([
-      { status: 'success', data: 5, isPreviousData: false, isFetching: true },
-      { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-    ])
-    expect(states[4]).toMatchObject([
-      { status: 'success', data: 5, isPreviousData: false, isFetching: false },
-      { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-    ])
-  })
-
-  it('handles type parameter - tuple of tuples', async () => {
-    const key1 = queryKey()
-    const key2 = queryKey()
-    const key3 = queryKey()
-
-    // @ts-expect-error (Page component is not rendered)
-    // eslint-disable-next-line
-    function Page() {
-      const result1 = createQueries<[[number], [string], [string[], boolean]]>({
-        queries: [
-          {
-            queryKey: key1,
-            queryFn: () => 1,
-          },
-          {
-            queryKey: key2,
-            queryFn: () => 'string',
-          },
-          {
-            queryKey: key3,
-            queryFn: () => ['string[]'],
-          },
-        ],
-      })
       expectType<QueryObserverResult<number, unknown>>(result1[0])
       expectType<QueryObserverResult<string, unknown>>(result1[1])
       expectType<QueryObserverResult<string[], boolean>>(result1[2])
@@ -399,7 +118,7 @@ describe('useQueries', () => {
       // TData (3rd element) takes precedence over TQueryFnData (1st element)
       const result2 = createQueries<
         [[string, unknown, string], [string, unknown, number]]
-      >({
+      >(() => ({
         queries: [
           {
             queryKey: key1,
@@ -420,65 +139,65 @@ describe('useQueries', () => {
             },
           },
         ],
-      })
+      }))
       expectType<QueryObserverResult<string, unknown>>(result2[0])
       expectType<QueryObserverResult<number, unknown>>(result2[1])
       expectType<string | undefined>(result2[0].data)
       expectType<number | undefined>(result2[1].data)
 
       // types should be enforced
-      createQueries<[[string, unknown, string], [string, boolean, number]]>({
-        queries: [
-          {
-            queryKey: key1,
-            queryFn: () => 'string',
-            select: (a) => {
-              expectType<string>(a)
-              expectTypeNotAny(a)
-              return a.toLowerCase()
-            },
-            onSuccess: (a) => {
-              expectType<string>(a)
-              expectTypeNotAny(a)
-            },
-            placeholderData: 'string',
-            // @ts-expect-error (initialData: string)
-            initialData: 123,
-          },
-          {
-            queryKey: key2,
-            queryFn: () => 'string',
-            select: (a) => {
-              expectType<string>(a)
-              expectTypeNotAny(a)
-              return parseInt(a)
-            },
-            onSuccess: (a) => {
-              expectType<number>(a)
-              expectTypeNotAny(a)
+      createQueries<[[string, unknown, string], [string, boolean, number]]>(
+        () => ({
+          queries: [
+            {
+              queryKey: key1,
+              queryFn: () => 'string',
+              select: (a) => {
+                expectType<string>(a)
+                expectTypeNotAny(a)
+                return a.toLowerCase()
+              },
+              onSuccess: (a) => {
+                expectType<string>(a)
+                expectTypeNotAny(a)
+              },
+              placeholderData: 'string',
+              // @ts-expect-error (initialData: string)
+              initialData: 123,
             },
-            onError: (e) => {
-              expectType<boolean>(e)
-              expectTypeNotAny(e)
+            {
+              queryKey: key2,
+              queryFn: () => 'string',
+              select: (a) => {
+                expectType<string>(a)
+                expectTypeNotAny(a)
+                return parseInt(a)
+              },
+              onSuccess: (a) => {
+                expectType<number>(a)
+                expectTypeNotAny(a)
+              },
+              onError: (e) => {
+                expectType<boolean>(e)
+                expectTypeNotAny(e)
+              },
+              placeholderData: 'string',
+              // @ts-expect-error (initialData: string)
+              initialData: 123,
             },
-            placeholderData: 'string',
-            // @ts-expect-error (initialData: string)
-            initialData: 123,
-          },
-        ],
-      })
+          ],
+        }),
+      )
 
       // field names should be enforced
-      createQueries<[[string]]>({
+      createQueries<[[string]]>(() => ({
         queries: [
           {
             queryKey: key1,
             queryFn: () => 'string',
-            // @ts-expect-error (invalidField)
-            someInvalidField: [],
           },
         ],
-      })
+      }))
     }
   })
 
@@ -496,7 +215,7 @@ describe('useQueries', () => {
           { queryFnData: string },
           { queryFnData: string[]; error: boolean },
         ]
-      >({
+      >(() => ({
         queries: [
           {
             queryKey: key1,
@@ -511,7 +230,7 @@ describe('useQueries', () => {
             queryFn: () => ['string[]'],
           },
         ],
-      })
+      }))
       expectType<QueryObserverResult<number, unknown>>(result1[0])
       expectType<QueryObserverResult<string, unknown>>(result1[1])
       expectType<QueryObserverResult<string[], boolean>>(result1[2])
@@ -526,7 +245,7 @@ describe('useQueries', () => {
           { queryFnData: string; data: string },
           { queryFnData: string; data: number },
         ]
-      >({
+      >(() => ({
         queries: [
           {
             queryKey: key1,
@@ -547,35 +266,37 @@ describe('useQueries', () => {
             },
           },
         ],
-      })
+      }))
       expectType<QueryObserverResult<string, unknown>>(result2[0])
       expectType<QueryObserverResult<number, unknown>>(result2[1])
       expectType<string | undefined>(result2[0].data)
       expectType<number | undefined>(result2[1].data)
 
       // can pass only TData (data prop) although TQueryFnData will be left unknown
-      const result3 = createQueries<[{ data: string }, { data: number }]>({
-        queries: [
-          {
-            queryKey: key1,
-            queryFn: () => 'string',
-            select: (a) => {
-              expectType<unknown>(a)
-              expectTypeNotAny(a)
-              return a as string
+      const result3 = createQueries<[{ data: string }, { data: number }]>(
+        () => ({
+          queries: [
+            {
+              queryKey: key1,
+              queryFn: () => 'string',
+              select: (a) => {
+                expectType<unknown>(a)
+                expectTypeNotAny(a)
+                return a as string
+              },
             },
-          },
-          {
-            queryKey: key2,
-            queryFn: () => 'string',
-            select: (a) => {
-              expectType<unknown>(a)
-              expectTypeNotAny(a)
-              return a as number
+            {
+              queryKey: key2,
+              queryFn: () => 'string',
+              select: (a) => {
+                expectType<unknown>(a)
+                expectTypeNotAny(a)
+                return a as number
+              },
             },
-          },
-        ],
-      })
+          ],
+        }),
+      )
       expectType<QueryObserverResult<string, unknown>>(result3[0])
       expectType<QueryObserverResult<number, unknown>>(result3[1])
       expectType<string | undefined>(result3[0].data)
@@ -587,7 +308,7 @@ describe('useQueries', () => {
           { queryFnData: string; data: string },
           { queryFnData: string; data: number; error: boolean },
         ]
-      >({
+      >(() => ({
         queries: [
           {
             queryKey: key1,
@@ -626,19 +347,17 @@ describe('useQueries', () => {
             initialData: 123,
           },
         ],
-      })
+      }))
 
       // field names should be enforced
-      createQueries<[{ queryFnData: string }]>({
+      createQueries<[{ queryFnData: string }]>(() => ({
         queries: [
           {
             queryKey: key1,
             queryFn: () => 'string',
-            // @ts-expect-error (invalidField)
-            someInvalidField: [],
           },
         ],
-      })
+      }))
     }
   })
 
@@ -652,26 +371,26 @@ describe('useQueries', () => {
     // eslint-disable-next-line
     function Page() {
       // Array.map preserves TQueryFnData
-      const result1 = createQueries({
+      const result1 = createQueries(() => ({
         queries: Array(50).map((_, i) => ({
-          queryKey: () => ['key', i] as const,
+          queryKey: ['key', i] as const,
           queryFn: () => i + 10,
         })),
-      })
+      }))
       expectType<QueryObserverResult<number, unknown>[]>(result1)
       expectType<number | undefined>(result1[0]?.data)
 
       // Array.map preserves TData
-      const result2 = createQueries({
+      const result2 = createQueries(() => ({
         queries: Array(50).map((_, i) => ({
-          queryKey: () => ['key', i] as const,
+          queryKey: ['key', i] as const,
           queryFn: () => i + 10,
           select: (data: number) => data.toString(),
         })),
-      })
+      }))
       expectType<QueryObserverResult<string, unknown>[]>(result2)
 
-      const result3 = createQueries({
+      const result3 = createQueries(() => ({
         queries: [
           {
             queryKey: key1,
@@ -687,7 +406,7 @@ describe('useQueries', () => {
             select: () => 123,
           },
         ],
-      })
+      }))
       expectType<QueryObserverResult<number, unknown>>(result3[0])
       expectType<QueryObserverResult<string, unknown>>(result3[1])
       expectType<QueryObserverResult<number, unknown>>(result3[2])
@@ -697,7 +416,7 @@ describe('useQueries', () => {
       expectType<number | undefined>(result3[2].data)
 
       // initialData/placeholderData are enforced
-      createQueries({
+      createQueries(() => ({
         queries: [
           {
             queryKey: key1,
@@ -714,10 +433,10 @@ describe('useQueries', () => {
             initialData: 123,
           },
         ],
-      })
+      }))
 
       // select / onSuccess / onSettled params are "indirectly" enforced
-      createQueries({
+      createQueries(() => ({
         queries: [
           // unfortunately TS will not suggest the type for you
           {
@@ -760,10 +479,10 @@ describe('useQueries', () => {
             },
           },
         ],
-      })
+      }))
 
       // callbacks are also indirectly enforced with Array.map
-      createQueries({
+      createQueries(() => ({
         // @ts-expect-error (onSuccess only accepts string)
         queries: Array(50).map((_, i) => ({
           queryKey: ['key', i] as const,
@@ -771,18 +490,19 @@ describe('useQueries', () => {
           select: (data: number) => data.toString(),
           onSuccess: (_data: number) => null,
         })),
-      })
-      createQueries({
+      }))
+
+      createQueries(() => ({
         queries: Array(50).map((_, i) => ({
-          queryKey: () => ['key', i] as const,
+          queryKey: ['key', i] as const,
           queryFn: () => i + 10,
           select: (data: number) => data.toString(),
           onSuccess: (_data: string) => null,
         })),
-      })
+      }))
 
       // results inference works when all the handlers are defined
-      const result4 = createQueries({
+      const result4 = createQueries(() => ({
         queries: [
           {
             queryKey: key1,
@@ -815,13 +535,13 @@ describe('useQueries', () => {
             },
           },
         ],
-      })
+      }))
       expectType<QueryObserverResult<string, unknown>>(result4[0])
       expectType<QueryObserverResult<string, unknown>>(result4[1])
       expectType<QueryObserverResult<number, unknown>>(result4[2])
 
       // handles when queryFn returns a Promise
-      const result5 = createQueries({
+      const result5 = createQueries(() => ({
         queries: [
           {
             queryKey: key1,
@@ -834,68 +554,67 @@ describe('useQueries', () => {
             onSettled: (a: Promise<string>) => null,
           },
         ],
-      })
+      }))
       expectType<QueryObserverResult<string, unknown>>(result5[0])
 
       // Array as const does not throw error
-      const result6 = createQueries({
-        queries: [
-          {
-            queryKey: () => ['key1'],
-            queryFn: () => 'string',
-          },
-          {
-            queryKey: () => ['key1'],
-            queryFn: () => 123,
-          },
-        ],
-      } as const)
+      const result6 = createQueries(
+        () =>
+          ({
+            queries: [
+              {
+                queryKey: ['key1'],
+                queryFn: () => 'string',
+              },
+              {
+                queryKey: ['key1'],
+                queryFn: () => 123,
+              },
+            ],
+          } as const),
+      )
       expectType<QueryObserverResult<string, unknown>>(result6[0])
       expectType<QueryObserverResult<number, unknown>>(result6[1])
 
       // field names should be enforced - array literal
-      createQueries({
+      createQueries(() => ({
         queries: [
           {
             queryKey: key1,
             queryFn: () => 'string',
-            // @ts-expect-error (invalidField)
-            someInvalidField: [],
           },
         ],
-      })
+      }))
 
       // field names should be enforced - Array.map() result
-      createQueries({
+      createQueries(() => ({
         // @ts-expect-error (invalidField)
         queries: Array(10).map(() => ({
           someInvalidField: '',
         })),
-      })
+      }))
 
       // field names should be enforced - array literal
-      createQueries({
+      createQueries(() => ({
         queries: [
           {
             queryKey: key1,
             queryFn: () => 'string',
-            // @ts-expect-error (invalidField)
-            someInvalidField: [],
           },
         ],
-      })
+      }))
 
       // supports queryFn using fetch() to return Promise<any> - Array.map() result
-      createQueries({
+      createQueries(() => ({
         queries: Array(50).map((_, i) => ({
-          queryKey: () => ['key', i] as const,
+          queryKey: ['key', i] as const,
           queryFn: () =>
             fetch('return Promise<any>').then((resp) => resp.json()),
         })),
-      })
+      }))
 
       // supports queryFn using fetch() to return Promise<any> - array literal
-      createQueries({
+      createQueries(() => ({
         queries: [
           {
             queryKey: key1,
@@ -903,7 +622,7 @@ describe('useQueries', () => {
               fetch('return Promise<any>').then((resp) => resp.json()),
           },
         ],
-      })
+      }))
     }
   })
 
@@ -932,63 +651,61 @@ describe('useQueries', () => {
       TQueryFnData,
       TError,
       TData,
-      TQueryKey extends SolidQueryKey,
-    >(queries: CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>[]) {
-      return createQueries({
+      TQueryKey extends QueryKey,
+    >(queries: SolidQueryOptions<TQueryFnData, TError, TData, TQueryKey>[]) {
+      return createQueries(() => ({
         queries: queries.map(
           // no need to type the mapped query
           (query) => {
             const { queryFn: fn, queryKey: key, onError: err } = query
-            expectType<
-              QueryFunction<TQueryFnData, ReturnType<TQueryKey>> | undefined
-            >(fn)
+            expectType<QueryFunction<TQueryFnData, TQueryKey> | undefined>(fn)
             return {
               queryKey: key,
               onError: err,
               queryFn: fn
-                ? (ctx: QueryFunctionContext<ReturnType<TQueryKey>>) => {
-                    expectType<ReturnType<TQueryKey>>(ctx.queryKey)
+                ? (ctx: QueryFunctionContext<TQueryKey>) => {
+                    expectType<TQueryKey>(ctx.queryKey)
                     return fn.call({}, ctx)
                   }
                 : undefined,
             }
           },
         ),
-      })
+      }))
     }
 
     // @ts-expect-error (Page component is not rendered)
     // eslint-disable-next-line
     function Page() {
-      const result = createQueries({
+      const result = createQueries(() => ({
         queries: [
           {
-            queryKey: () => getQueryKeyA(),
+            queryKey: getQueryKeyA(),
             queryFn: getQueryFunctionA(),
           },
           {
-            queryKey: () => getQueryKeyB('id'),
+            queryKey: getQueryKeyB('id'),
             queryFn: getQueryFunctionB(),
           },
         ],
-      })
+      }))
       expectType<QueryObserverResult<number, unknown>>(result[0])
       expectType<QueryObserverResult<string, unknown>>(result[1])
 
-      const withSelector = createQueries({
+      const withSelector = createQueries(() => ({
         queries: [
           {
-            queryKey: () => getQueryKeyA(),
+            queryKey: getQueryKeyA(),
             queryFn: getQueryFunctionA(),
             select: getSelectorA(),
           },
           {
-            queryKey: () => getQueryKeyB('id'),
+            queryKey: getQueryKeyB('id'),
             queryFn: getQueryFunctionB(),
             select: getSelectorB(),
           },
         ],
-      })
+      }))
       expectType<QueryObserverResult<[number, string], unknown>>(
         withSelector[0],
       )
@@ -998,7 +715,7 @@ describe('useQueries', () => {
 
       const withWrappedQueries = useWrappedQueries(
         Array(10).map(() => ({
-          queryKey: () => getQueryKeyA(),
+          queryKey: getQueryKeyA(),
           queryFn: getQueryFunctionA(),
           select: getSelectorA(),
         })),
@@ -1029,7 +746,7 @@ describe('useQueries', () => {
       })
 
     function Queries() {
-      createQueries({
+      createQueries(() => ({
         queries: [
           {
             queryKey: key1,
@@ -1039,7 +756,7 @@ describe('useQueries', () => {
             },
           },
         ],
-      })
+      }))
 
       return (
         <div>
@@ -1073,91 +790,26 @@ describe('useQueries', () => {
     QueriesObserverSpy.mockRestore()
   })
 
-  describe('with custom context', () => {
-    it('should return the correct states', async () => {
-      const context = createContext<QueryClient | undefined>(undefined)
-
-      const key1 = queryKey()
-      const key2 = queryKey()
-      const results: CreateQueryResult[][] = []
-
-      function Page() {
-        const result = createQueries({
-          context,
-          queries: [
-            {
-              queryKey: key1,
-              queryFn: async () => {
-                await sleep(5)
-                return 1
-              },
-            },
-            {
-              queryKey: key2,
-              queryFn: async () => {
-                await sleep(10)
-                return 2
-              },
-            },
-          ],
-        })
-        createRenderEffect(() => {
-          results.push([...result])
-        })
-        return null
-      }
-
-      render(() => (
-        <QueryClientProvider client={queryClient} context={context}>
-          <Page />
-        </QueryClientProvider>
-      ))
-
-      await sleep(30)
-
-      expect(results[0]).toMatchObject([
-        { data: undefined },
-        { data: undefined },
-      ])
-      expect(results[results.length - 1]).toMatchObject([
-        { data: 1 },
-        { data: 2 },
-      ])
-    })
-
-    it('should throw if the context is necessary and is not passed to useQueries', async () => {
-      const context = createContext<QueryClient | undefined>(undefined)
-
-      const key1 = queryKey()
-      const key2 = queryKey()
-      const results: CreateQueryResult[][] = []
+  it('should use provided custom queryClient', async () => {
+    const key = queryKey()
+    const queryFn = () => {
+      return Promise.resolve('custom client')
+    }
 
-      function Page() {
-        const result = createQueries({
-          queries: [
-            {
-              queryKey: key1,
-              queryFn: async () => 1,
-            },
-            {
-              queryKey: key2,
-              queryFn: async () => 2,
-            },
-          ],
-        })
-        results.push(result)
-        return null
-      }
+    function Page() {
+      const state = createQueries(() => ({
+        queries: [{ queryKey: key, queryFn }],
+        queryClient,
+      }))
+      return (
+        <div>
+          <h1>Status: {state[0].data}</h1>
+        </div>
+      )
+    }
 
-      render(() => (
-        <QueryClientProvider client={queryClient} context={context}>
-          <ErrorBoundary fallback={() => <div>error boundary</div>}>
-            <Page />
-          </ErrorBoundary>
-        </QueryClientProvider>
-      ))
+    render(() => <Page />)
 
-      await waitFor(() => screen.getByText('error boundary'))
-    })
+    await waitFor(() => screen.getByText('Status: custom client'))
   })
 })