@tanstack/react-query 5.24.1 → 5.24.5

package/src/__tests__/queryOptions.test-d.tsx

@@ -0,0 +1,150 @@
+import { describe, expect, expectTypeOf, it } from 'vitest'
+import { QueryClient } from '@tanstack/query-core'
+import { dataTagSymbol } from '@tanstack/query-core'
+import { queryOptions } from '../queryOptions'
+import { useQuery } from '../useQuery'
+import { useQueries } from '../useQueries'
+import { useSuspenseQuery } from '../useSuspenseQuery'
+
+describe('queryOptions', () => {
+  it('should not allow excess properties', () => {
+    queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      // @ts-expect-error this is a good error, because stallTime does not exist!
+      stallTime: 1000,
+    })
+  })
+  it('should infer types for callbacks', () => {
+    queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      staleTime: 1000,
+      select: (data) => {
+        expectTypeOf(data).toEqualTypeOf<number>()
+      },
+    })
+  })
+  it('should work when passed to useQuery', () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const { data } = useQuery(options)
+    expectTypeOf(data).toEqualTypeOf<number | undefined>()
+  })
+  it('should work when passed to useSuspenseQuery', () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const { data } = useSuspenseQuery(options)
+    expectTypeOf(data).toEqualTypeOf<number>()
+  })
+  it('should work when passed to fetchQuery', async () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const data = await new QueryClient().fetchQuery(options)
+    expectTypeOf(data).toEqualTypeOf<number>()
+  })
+  it('should work when passed to useQueries', () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const [{ data }] = useQueries({
+      queries: [options],
+    })
+
+    expectTypeOf(data).toEqualTypeOf<number | undefined>()
+  })
+  it('should tag the queryKey with the result type of the QueryFn', () => {
+    expect(() => {
+      const { queryKey } = queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<number>()
+    })
+  })
+  it('should tag the queryKey even if no promise is returned', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => 5,
+    })
+
+    expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<number>()
+  })
+  it('should tag the queryKey with unknown if there is no queryFn', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+    })
+
+    expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<unknown>()
+  })
+  it('should tag the queryKey with the result type of the QueryFn if select is used', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      select: (data) => data.toString(),
+    })
+
+    expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<number>()
+  })
+  it('should return the proper type when passed to getQueryData', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const queryClient = new QueryClient()
+    const data = queryClient.getQueryData(queryKey)
+    expectTypeOf(data).toEqualTypeOf<number | undefined>()
+  })
+  it('should return the proper type when passed to getQueryState', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const queryClient = new QueryClient()
+    const state = queryClient.getQueryState(queryKey)
+    expectTypeOf(state?.data).toEqualTypeOf<number | undefined>()
+  })
+  it('should properly type updaterFn when passed to setQueryData', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const queryClient = new QueryClient()
+    const data = queryClient.setQueryData(queryKey, (prev) => {
+      expectTypeOf(prev).toEqualTypeOf<number | undefined>()
+      return prev
+    })
+    expectTypeOf(data).toEqualTypeOf<number | undefined>()
+  })
+  it('should properly type value when passed to setQueryData', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const queryClient = new QueryClient()
+
+    // @ts-expect-error value should be a number
+    queryClient.setQueryData(queryKey, '5')
+    // @ts-expect-error value should be a number
+    queryClient.setQueryData(queryKey, () => '5')
+
+    const data = queryClient.setQueryData(queryKey, 5)
+    expectTypeOf(data).toEqualTypeOf<number | undefined>()
+  })
+})

package/src/__tests__/suspense.test-d.tsx

@@ -0,0 +1,124 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { useSuspenseQuery } from '../useSuspenseQuery'
+import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery'
+import type { InfiniteData } from '@tanstack/query-core'
+
+describe('useSuspenseQuery', () => {
+  it('should always have data defined', () => {
+    const { data } = useSuspenseQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    expectTypeOf(data).toEqualTypeOf<number>()
+  })
+
+  it('should not have pending status', () => {
+    const { status } = useSuspenseQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    expectTypeOf(status).toEqualTypeOf<'error' | 'success'>()
+  })
+
+  it('should not allow placeholderData, enabled or throwOnError props', () => {
+    useSuspenseQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      // @ts-expect-error TS2345
+      placeholderData: 5,
+      enabled: true,
+    })
+
+    useSuspenseQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      // @ts-expect-error TS2345
+      enabled: true,
+    })
+
+    useSuspenseQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      // @ts-expect-error TS2345
+      throwOnError: true,
+    })
+  })
+
+  it('should not return isPlaceholderData', () => {
+    const query = useSuspenseQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    // @ts-expect-error TS2339
+    query.isPlaceholderData
+  })
+})
+
+describe('useSuspenseInfiniteQuery', () => {
+  it('should always have data defined', () => {
+    const { data } = useSuspenseInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      initialPageParam: 1,
+      getNextPageParam: () => 1,
+    })
+
+    expectTypeOf(data).toEqualTypeOf<InfiniteData<number, unknown>>()
+  })
+
+  it('should not have pending status', () => {
+    const { status } = useSuspenseInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      initialPageParam: 1,
+      getNextPageParam: () => 1,
+    })
+
+    expectTypeOf(status).toEqualTypeOf<'error' | 'success'>()
+  })
+
+  it('should not allow placeholderData, enabled or throwOnError props', () => {
+    useSuspenseInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      initialPageParam: 1,
+      getNextPageParam: () => 1,
+      // @ts-expect-error TS2345
+      placeholderData: 5,
+      enabled: true,
+    })
+
+    useSuspenseInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      initialPageParam: 1,
+      getNextPageParam: () => 1,
+      // @ts-expect-error TS2345
+      enabled: true,
+    })
+
+    useSuspenseInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      initialPageParam: 1,
+      getNextPageParam: () => 1,
+      // @ts-expect-error TS2345
+      throwOnError: true,
+    })
+  })
+
+  it('should not return isPlaceholderData', () => {
+    const query = useSuspenseInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      initialPageParam: 1,
+      getNextPageParam: () => 1,
+    })
+
+    // @ts-expect-error TS2339
+    query.isPlaceholderData
+  })
+})

package/src/__tests__/suspense.test.tsx

@@ -779,6 +779,58 @@ describe('useSuspenseQuery', () => {
 
     consoleMock.mockRestore()
   })
+
+  it('should still suspense if queryClient has placeholderData config', async () => {
+    const key = queryKey()
+    const queryClientWithPlaceholder = createQueryClient({
+      defaultOptions: {
+        queries: {
+          placeholderData: (previousData: any) => previousData,
+        },
+      },
+    })
+    const states: Array<UseSuspenseQueryResult<number>> = []
+
+    let count = 0
+    let renders = 0
+
+    function Page() {
+      renders++
+
+      const [stateKey, setStateKey] = React.useState(key)
+
+      const state = useSuspenseQuery({
+        queryKey: stateKey,
+        queryFn: async () => {
+          count++
+          await sleep(100)
+          return count
+        },
+      })
+
+      states.push(state)
+
+      return (
+        <div>
+          <button aria-label="toggle" onClick={() => setStateKey(queryKey())} />
+          data: {String(state.data)}
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClientWithPlaceholder,
+      <React.Suspense fallback="loading">
+        <Page />
+      </React.Suspense>,
+    )
+    await waitFor(() => rendered.getByText('loading'))
+    await waitFor(() => rendered.getByText('data: 1'))
+    fireEvent.click(rendered.getByLabelText('toggle'))
+
+    await waitFor(() => rendered.getByText('loading'))
+    await waitFor(() => rendered.getByText('data: 2'))
+  })
 })
 
 describe('useSuspenseQueries', () => {
@@ -1090,4 +1142,54 @@ describe('useSuspenseQueries', () => {
 
     expect(queryFnCount).toBe(2)
   })
+
+  it('should still suspense if queryClient has placeholderData config', async () => {
+    const key = queryKey()
+    const queryClientWithPlaceholder = createQueryClient({
+      defaultOptions: {
+        queries: {
+          placeholderData: (previousData: any) => previousData,
+        },
+      },
+    })
+
+    function Page() {
+      const [count, setCount] = React.useState(0)
+      const [isPending, startTransition] = React.useTransition()
+      const { data } = useSuspenseQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
+          await sleep(10)
+          return 'data' + count
+        },
+      })
+
+      return (
+        <div>
+          <button onClick={() => startTransition(() => setCount(count + 1))}>
+            inc
+          </button>
+
+          <div>{isPending ? 'Pending...' : String(data)}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClientWithPlaceholder,
+      <React.Suspense fallback={'Loading...'}>
+        <Page />
+      </React.Suspense>,
+    )
+
+    await waitFor(() => rendered.getByText('Loading...'))
+
+    await waitFor(() => rendered.getByText('data0'))
+
+    fireEvent.click(rendered.getByText('inc'))
+
+    await waitFor(() => rendered.getByText('Pending...'))
+
+    await waitFor(() => rendered.getByText('data1'))
+  })
 })

package/src/__tests__/useInfiniteQuery.test-d.tsx

@@ -0,0 +1,140 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { QueryClient } from '@tanstack/query-core'
+import { useInfiniteQuery } from '../useInfiniteQuery'
+import { useQuery } from '../useQuery'
+import type { InfiniteData } from '@tanstack/query-core'
+
+describe('pageParam', () => {
+  it('initialPageParam should define type of param passed to queryFunctionContext', () => {
+    useInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: ({ pageParam }) => {
+        expectTypeOf(pageParam).toEqualTypeOf<number>()
+      },
+      initialPageParam: 1,
+      getNextPageParam: () => undefined,
+    })
+  })
+
+  it('direction should be passed to queryFn of useInfiniteQuery', () => {
+    useInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: ({ direction }) => {
+        expectTypeOf(direction).toEqualTypeOf<'forward' | 'backward'>()
+      },
+      initialPageParam: 1,
+      getNextPageParam: () => undefined,
+    })
+  })
+
+  it('there should be no pageParam passed to the queryFn of useQuery', () => {
+    useQuery({
+      queryKey: ['key'],
+      // @ts-expect-error there should be no pageParam passed to queryFn of useQuery
+      queryFn: ({ pageParam }) => {
+        return String(pageParam)
+      },
+    })
+  })
+
+  it('there should be no direction passed to the queryFn of useQuery', () => {
+    useQuery({
+      queryKey: ['key'],
+      // @ts-expect-error there should be no pageParam passed to queryFn of useQuery
+      queryFn: ({ direction }) => {
+        return String(direction)
+      },
+    })
+  })
+
+  it('initialPageParam should define type of param passed to queryFunctionContext for fetchInfiniteQuery', () => {
+    const queryClient = new QueryClient()
+    queryClient.fetchInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: ({ pageParam }) => {
+        expectTypeOf(pageParam).toEqualTypeOf<number>()
+      },
+      initialPageParam: 1,
+    })
+  })
+
+  it('initialPageParam should define type of param passed to queryFunctionContext for prefetchInfiniteQuery', () => {
+    const queryClient = new QueryClient()
+    queryClient.prefetchInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: ({ pageParam }) => {
+        expectTypeOf(pageParam).toEqualTypeOf<number>()
+      },
+      initialPageParam: 1,
+    })
+  })
+})
+describe('select', () => {
+  it('should still return paginated data if no select result', () => {
+    const infiniteQuery = useInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: ({ pageParam }) => {
+        return pageParam * 5
+      },
+      initialPageParam: 1,
+      getNextPageParam: () => undefined,
+    })
+
+    // TODO: Order of generics prevents pageParams to be typed correctly. Using `unknown` for now
+    expectTypeOf(infiniteQuery.data).toEqualTypeOf<
+      InfiniteData<number, unknown> | undefined
+    >()
+  })
+
+  it('should be able to transform data to arbitrary result', () => {
+    const infiniteQuery = useInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: ({ pageParam }) => {
+        return pageParam * 5
+      },
+      initialPageParam: 1,
+      getNextPageParam: () => undefined,
+      select: (data) => {
+        expectTypeOf(data).toEqualTypeOf<InfiniteData<number, number>>()
+        return 'selected' as const
+      },
+    })
+
+    expectTypeOf(infiniteQuery.data).toEqualTypeOf<'selected' | undefined>()
+  })
+})
+describe('getNextPageParam / getPreviousPageParam', () => {
+  it('should get typed params', () => {
+    const infiniteQuery = useInfiniteQuery({
+      queryKey: ['key'],
+      queryFn: ({ pageParam }) => {
+        return String(pageParam)
+      },
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => {
+        expectTypeOf(lastPage).toEqualTypeOf<string>()
+        expectTypeOf(allPages).toEqualTypeOf<Array<string>>()
+        expectTypeOf(lastPageParam).toEqualTypeOf<number>()
+        expectTypeOf(allPageParams).toEqualTypeOf<Array<number>>()
+        return undefined
+      },
+      getPreviousPageParam: (
+        firstPage,
+        allPages,
+        firstPageParam,
+        allPageParams,
+      ) => {
+        expectTypeOf(firstPage).toEqualTypeOf<string>()
+        expectTypeOf(allPages).toEqualTypeOf<Array<string>>()
+        expectTypeOf(firstPageParam).toEqualTypeOf<number>()
+        expectTypeOf(allPageParams).toEqualTypeOf<Array<number>>()
+        return undefined
+      },
+    })
+
+    // TODO: Order of generics prevents pageParams to be typed correctly. Using `unknown` for now
+    expectTypeOf(infiniteQuery.data).toEqualTypeOf<
+      InfiniteData<string, unknown> | undefined
+    >()
+  })
+})

package/src/__tests__/useMutation.test.tsx

@@ -1138,6 +1138,8 @@ describe('useMutation', () => {
 
     fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
 
-    await rendered.findByText('data: custom client, status: success')
+    await waitFor(() =>
+      rendered.findByText('data: custom client, status: success'),
+    )
   })
 })

package/src/__tests__/useQueries.test-d.tsx

@@ -0,0 +1,126 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { queryOptions } from '../queryOptions'
+import { useQueries } from '../useQueries'
+import type { UseQueryOptions } from '../types'
+
+describe('UseQueries config object overload', () => {
+  it('TData should always be defined when initialData is provided as an object', () => {
+    const query1 = {
+      queryKey: ['key1'],
+      queryFn: () => {
+        return {
+          wow: true,
+        }
+      },
+      initialData: {
+        wow: false,
+      },
+    }
+
+    const query2 = {
+      queryKey: ['key2'],
+      queryFn: () => 'Query Data',
+      initialData: 'initial data',
+    }
+
+    const query3 = {
+      queryKey: ['key2'],
+      queryFn: () => 'Query Data',
+    }
+
+    const queryResults = useQueries({ queries: [query1, query2, query3] })
+
+    const query1Data = queryResults[0].data
+    const query2Data = queryResults[1].data
+    const query3Data = queryResults[2].data
+
+    expectTypeOf(query1Data).toEqualTypeOf<{ wow: boolean }>()
+    expectTypeOf(query2Data).toEqualTypeOf<string>()
+    expectTypeOf(query3Data).toEqualTypeOf<string | undefined>()
+  })
+
+  it('TData should be defined when passed through queryOptions', () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => {
+        return {
+          wow: true,
+        }
+      },
+      initialData: {
+        wow: true,
+      },
+    })
+    const queryResults = useQueries({ queries: [options] })
+
+    const data = queryResults[0].data
+
+    expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>()
+  })
+
+  it('it should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQuery', () => {
+    const query1 = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(1),
+      select: (data) => data > 1,
+    })
+
+    const query2 = {
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(1),
+      select: (data: number) => data > 1,
+    }
+
+    const queryResults = useQueries({ queries: [query1, query2] })
+    const query1Data = queryResults[0].data
+    const query2Data = queryResults[1].data
+
+    expectTypeOf(query1Data).toEqualTypeOf<boolean | undefined>()
+    expectTypeOf(query2Data).toEqualTypeOf<boolean | undefined>()
+  })
+
+  it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
+    const queryResults = useQueries({
+      queries: [
+        {
+          queryKey: ['key'],
+          queryFn: () => {
+            return {
+              wow: true,
+            }
+          },
+          initialData: () => undefined as { wow: boolean } | undefined,
+        },
+      ],
+    })
+
+    const data = queryResults[0].data
+
+    expectTypeOf(data).toEqualTypeOf<{ wow: boolean } | undefined>()
+  })
+
+  describe('custom hook', () => {
+    it('should allow custom hooks using UseQueryOptions', () => {
+      type Data = string
+
+      const useCustomQueries = (
+        options?: Omit<UseQueryOptions<Data>, 'queryKey' | 'queryFn'>,
+      ) => {
+        return useQueries({
+          queries: [
+            {
+              ...options,
+              queryKey: ['todos-key'],
+              queryFn: () => Promise.resolve('data'),
+            },
+          ],
+        })
+      }
+
+      const queryResults = useCustomQueries()
+      const data = queryResults[0].data
+
+      expectTypeOf(data).toEqualTypeOf<Data | undefined>()
+    })
+  })
+})