Fix infinite query hook data types

Author: markerikson

packages/toolkit/src/query/react/buildHooks.ts

@@ -57,6 +57,7 @@ import type { InfiniteQueryActionCreatorResult } from '@internal/query/core/buil
 import type {
   InfiniteData,
   InfiniteQueryConfigOptions,
+  InfiniteQuerySubState,
 } from '@internal/query/core/apiState'
 import type { InfiniteQueryResultSelectorResult } from '../core/buildSelectors'
 import type {
@@ -980,13 +981,13 @@ export type UseInfiniteQueryStateResult<
 
 type UseInfiniteQueryStateBaseResult<
   D extends InfiniteQueryDefinition<any, any, any, any, any>,
-> = QuerySubState<D> & {
+> = InfiniteQuerySubState<D> & {
   /**
    * Where `data` tries to hold data as much as possible, also re-using
    * data from the last arguments passed into the hook, this property
    * will always contain the received data from the query, for the current query arguments.
    */
-  currentData?: ResultTypeFrom<D>
+  currentData?: InfiniteData<ResultTypeFrom<D>, PageParamFrom<D>>
   /**
    * Query has not started yet.
    */

packages/toolkit/src/query/tests/buildHooks.test.tsx

@@ -778,10 +778,15 @@ describe('hooks tests', () => {
         }),
       )
 
+      type Pokemon = {
+        id: string
+        name: string
+      }
+
       const pokemonApi = createApi({
         baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
         endpoints: (builder) => ({
-          getInfinitePokemon: builder.infiniteQuery<any, string, number>({
+          getInfinitePokemon: builder.infiniteQuery<Pokemon[], string, number>({
             infiniteQueryOptions: {
               initialPageParam: 0,
               getNextPageParam: (
@@ -815,7 +820,13 @@ describe('hooks tests', () => {
         const { data, isFetching, isUninitialized, fetchNextPage } =
           pokemonApi.endpoints.getInfinitePokemon.useInfiniteQuery('a', {
             initialPageParam: 0,
-            getNextPageParam: (lastPageParam) => lastPageParam + 1,
+            getNextPageParam: (
+              lastPage,
+              allPages,
+              // Page param type should be `number`
+              lastPageParam,
+              allPageParams,
+            ) => lastPageParam + 1,
           })
 
         return (

packages/toolkit/src/query/tests/infiniteQueries.test-d.ts

@@ -1,3 +1,4 @@
+import type { skipToken, InfiniteData } from '@reduxjs/toolkit/query/react'
 import {
   createApi,
   fetchBaseQuery,
@@ -68,5 +69,37 @@ describe('Infinite queries', () => {
         direction: 'forward',
       }),
     )
+
+    const useGetInfinitePokemonQuery =
+      pokemonApi.endpoints.getInfinitePokemon.useInfiniteQuery
+
+    expectTypeOf(useGetInfinitePokemonQuery)
+      .parameter(0)
+      .toEqualTypeOf<string | typeof skipToken>()
+
+    function PokemonList() {
+      const {
+        data,
+        currentData,
+        isFetching,
+        isUninitialized,
+        isSuccess,
+        fetchNextPage,
+      } = useGetInfinitePokemonQuery('a')
+
+      expectTypeOf(data).toEqualTypeOf<
+        InfiniteData<Pokemon[], number> | undefined
+      >()
+
+      if (isSuccess) {
+        expectTypeOf(data.pages).toEqualTypeOf<Pokemon[][]>()
+        expectTypeOf(data.pageParams).toEqualTypeOf<number[]>()
+      }
+
+      if (currentData) {
+        expectTypeOf(currentData.pages).toEqualTypeOf<Pokemon[][]>()
+        expectTypeOf(currentData.pageParams).toEqualTypeOf<number[]>()
+      }
+    }
   })
 })