feat(select): defer TData inference

packages/query-core/src/infiniteQueryObserver.ts

@@ -25,13 +25,13 @@ type InfiniteQueryObserverListener<TData, TError> = (
 export class InfiniteQueryObserver<
   TQueryFnData = unknown,
   TError = RegisteredError,
-  TData = TQueryFnData,
+  TData = InfiniteData<TQueryFnData>,
   TQueryData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 > extends QueryObserver<
   TQueryFnData,
   TError,
-  InfiniteData<TData>,
+  TData,
   InfiniteData<TQueryData>,
   TQueryKey
 > {

packages/query-core/src/types.ts

@@ -310,7 +310,7 @@ export interface InfiniteQueryObserverOptions<
 > extends QueryObserverOptions<
       TQueryFnData,
       TError,
-      InfiniteData<TData>,
+      TData,
       InfiniteData<TQueryData>,
       TQueryKey,
       TPageParam
@@ -501,7 +501,7 @@ export type QueryObserverResult<TData = unknown, TError = RegisteredError> =
 export interface InfiniteQueryObserverBaseResult<
   TData = unknown,
   TError = RegisteredError,
-> extends QueryObserverBaseResult<InfiniteData<TData>, TError> {
+> extends QueryObserverBaseResult<TData, TError> {
   fetchNextPage: (
     options?: FetchNextPageOptions,
   ) => Promise<InfiniteQueryObserverResult<TData, TError>>
@@ -546,7 +546,7 @@ export interface InfiniteQueryObserverRefetchErrorResult<
   TData = unknown,
   TError = RegisteredError,
 > extends InfiniteQueryObserverBaseResult<TData, TError> {
-  data: InfiniteData<TData>
+  data: TData
   error: TError
   isError: true
   isPending: false
@@ -560,7 +560,7 @@ export interface InfiniteQueryObserverSuccessResult<
   TData = unknown,
   TError = RegisteredError,
 > extends InfiniteQueryObserverBaseResult<TData, TError> {
-  data: InfiniteData<TData>
+  data: TData
   error: null
   isError: false
   isPending: false

packages/react-query/src/__tests__/suspense.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import type { UseInfiniteQueryResult, UseQueryResult } from '..'
+import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
 import {
   QueryCache,
   QueryErrorResetBoundary,
@@ -68,7 +68,7 @@ describe("useQuery's in Suspense mode", () => {
 
   it('should return the correct states for a successful infinite query', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const [multiplier, setMultiplier] = React.useState(1)

packages/react-query/src/__tests__/useInfiniteQuery.test.tsx

@@ -45,7 +45,7 @@ describe('useInfiniteQuery', () => {
 
   it('should return the correct states for a successful query', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = useInfiniteQuery({
@@ -172,7 +172,7 @@ describe('useInfiniteQuery', () => {
 
   it('should keep the previous data when placeholderData is set', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<string>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []
 
     function Page() {
       const [order, setOrder] = React.useState('desc')
@@ -268,7 +268,7 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to select a part of the data', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<string>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []
 
     function Page() {
       const state = useInfiniteQuery({
@@ -305,7 +305,9 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to select a new result and not cause infinite renders', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<{ count: number; id: number }>[] = []
+    const states: UseInfiniteQueryResult<
+      InfiniteData<{ count: number; id: number }>
+    >[] = []
     let selectCalled = 0
 
     function Page() {
@@ -353,7 +355,7 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to reverse the data', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = useInfiniteQuery({
@@ -410,7 +412,7 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to fetch a previous page', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
@@ -493,7 +495,7 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to refetch when providing page params automatically', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = useInfiniteQuery({
@@ -602,7 +604,7 @@ describe('useInfiniteQuery', () => {
 
   it('should silently cancel any ongoing fetch when fetching more', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
@@ -821,7 +823,7 @@ describe('useInfiniteQuery', () => {
 
   it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
@@ -920,7 +922,7 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to set new pages with the query client', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const [firstPage, setFirstPage] = React.useState(0)
@@ -1002,7 +1004,7 @@ describe('useInfiniteQuery', () => {
 
   it('should only refetch the first page when initialData is provided', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = useInfiniteQuery({
@@ -1067,7 +1069,7 @@ describe('useInfiniteQuery', () => {
 
   it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = useInfiniteQuery({
@@ -1105,7 +1107,7 @@ describe('useInfiniteQuery', () => {
 
   it('should compute hasNextPage correctly using initialData', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = useInfiniteQuery({
@@ -1144,7 +1146,7 @@ describe('useInfiniteQuery', () => {
 
   it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = useInfiniteQuery({
@@ -1183,7 +1185,7 @@ describe('useInfiniteQuery', () => {
 
   it('should not use selected data when computing hasNextPage', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<string>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []
 
     function Page() {
       const state = useInfiniteQuery({

packages/react-query/src/__tests__/useInfiniteQuery.type.test.tsx

@@ -1,9 +1,9 @@
+import type { InfiniteData } from '@tanstack/query-core'
+import { QueryClient } from '@tanstack/query-core'
 import { useInfiniteQuery } from '../useInfiniteQuery'
 import { useQuery } from '../useQuery'
 import type { Expect, Equal } from './utils'
 import { doNotExecute } from './utils'
-import type { InfiniteData } from '@tanstack/query-core'
-import { QueryClient } from '@tanstack/query-core'
 
 describe('pageParam', () => {
   it('defaultPageParam should define type of param passed to queryFunctionContext', () => {
@@ -62,6 +62,24 @@ describe('pageParam', () => {
 })
 
 describe('select', () => {
+  it('should still return paginated data if no select result', () => {
+    doNotExecute(() => {
+      const infiniteQuery = useInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: ({ pageParam }) => {
+          return pageParam * 5
+        },
+        defaultPageParam: 1,
+        getNextPageParam: () => undefined,
+      })
+
+      const result: Expect<
+        Equal<InfiniteData<number> | undefined, (typeof infiniteQuery)['data']>
+      > = true
+      return result
+    })
+  })
+
   it('should be able to transform data to arbitrary result', () => {
     doNotExecute(() => {
       const infiniteQuery = useInfiniteQuery({

packages/react-query/src/useInfiniteQuery.ts

@@ -3,6 +3,7 @@ import type {
   QueryKey,
   QueryClient,
   RegisteredError,
+  InfiniteData,
 } from '@tanstack/query-core'
 import { InfiniteQueryObserver } from '@tanstack/query-core'
 import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
@@ -12,7 +13,7 @@ import { useBaseQuery } from './useBaseQuery'
 export function useInfiniteQuery<
   TQueryFnData,
   TError = RegisteredError,
-  TData = TQueryFnData,
+  TData = InfiniteData<TQueryFnData>,
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(

packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx

@@ -54,7 +54,7 @@ describe('useInfiniteQuery', () => {
 
   it('should return the correct states for a successful query', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -191,7 +191,7 @@ describe('useInfiniteQuery', () => {
 
   it('should keep the previous data when placeholderData is set', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<string>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []
 
     function Page() {
       const [order, setOrder] = createSignal('desc')
@@ -286,7 +286,7 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to select a part of the data', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<string>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -326,8 +326,9 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to select a new result and not cause infinite renders', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<{ count: number; id: number }>[] =
-      []
+    const states: CreateInfiniteQueryResult<
+      InfiniteData<{ count: number; id: number }>
+    >[] = []
     let selectCalled = 0
 
     function Page() {
@@ -372,7 +373,7 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to reverse the data', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -436,7 +437,7 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to fetch a previous page', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
@@ -515,7 +516,7 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to refetch when providing page params automatically', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -629,7 +630,7 @@ describe('useInfiniteQuery', () => {
 
   it('should silently cancel any ongoing fetch when fetching more', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
@@ -865,7 +866,7 @@ describe('useInfiniteQuery', () => {
 
   it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
@@ -975,7 +976,7 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to set new pages with the query client', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const [firstPage, setFirstPage] = createSignal(0)
@@ -1063,7 +1064,7 @@ describe('useInfiniteQuery', () => {
 
   it('should only refetch the first page when initialData is provided', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -1134,7 +1135,7 @@ describe('useInfiniteQuery', () => {
 
   it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -1178,7 +1179,7 @@ describe('useInfiniteQuery', () => {
 
   it('should compute hasNextPage correctly using initialData', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -1222,7 +1223,7 @@ describe('useInfiniteQuery', () => {
 
   it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -1266,7 +1267,7 @@ describe('useInfiniteQuery', () => {
 
   it('should not use selected data when computing hasNextPage', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<string>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []
 
     function Page() {
       const state = createInfiniteQuery(() => ({