Fix useInfiniteQuery hook types and trigger behavior

markerikson · markerikson · commit 993024cd1253 · 2024-11-29T12:49:46.000-05:00
diff --git a/packages/toolkit/src/query/react/buildHooks.ts b/packages/toolkit/src/query/react/buildHooks.ts
@@ -788,7 +788,6 @@ export type LazyInfiniteQueryTrigger<
    */
   (
     arg: QueryArgFrom<D>,
-    data: InfiniteData<any, any>,
     direction: 'forward' | 'backwards',
   ): InfiniteQueryActionCreatorResult<D>
 }
@@ -1045,8 +1044,8 @@ type UseInfiniteQueryStateBaseResult<
   isFetchingNextPage: false
   isFetchingPreviousPage: false
 
-  fetchNextPage: () => Promise<UseInfiniteQueryStateResult<D, D>>
-  fetchPreviousPage: () => Promise<UseInfiniteQueryStateResult<D, D>>
+  fetchNextPage: () => Promise<InfiniteQueryActionCreatorResult<D>>
+  fetchPreviousPage: () => Promise<InfiniteQueryActionCreatorResult<D>>
 }
 
 type UseInfiniteQueryStateDefaultResult<
@@ -1884,12 +1883,8 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         subscriptionOptionsRef.current = stableSubscriptionOptions
       }, [stableSubscriptionOptions])
 
-      const trigger = useCallback(
-        function (
-          arg: any,
-          data: InfiniteData<any, any>,
-          direction: 'forward' | 'backwards',
-        ) {
+      const trigger: LazyInfiniteQueryTrigger<any> = useCallback(
+        function (arg: unknown, direction: 'forward' | 'backwards') {
           let promise: InfiniteQueryActionCreatorResult<any>
 
           batch(() => {
@@ -1901,8 +1896,6 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
                 direction,
               }),
             )
-
-            // setArg(arg)
           })
 
           return promise!
@@ -1957,7 +1950,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
               },
             },
           ),
-        [select, stableArg, trigger],
+        [select, stableArg],
       )
 
       const querySelector: Selector<ApiRootState, any, [any]> = useMemo(
@@ -2010,8 +2003,6 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
           },
         )
 
-        const info = useMemo(() => ({ lastArg: arg }), [arg])
-
         const {
           data,
           status,
@@ -2034,14 +2025,15 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         })
 
         const fetchNextPage = useCallback(() => {
-          // if (!hasNextPage) return
-          return trigger(arg, queryStateResults.data, 'forward')
-        }, [trigger, hasNextPage, queryStateResults.data])
+          // TODO the hasNextPage bailout breaks things
+          //if (!hasNextPage) return
+          return trigger(arg, 'forward')
+        }, [trigger, arg])
 
         const fetchPreviousPage = useCallback(() => {
-          if (!hasPreviousPage) return
-          return trigger(arg, queryStateResults.data, 'backwards')
-        }, [trigger, hasPreviousPage, queryStateResults.data])
+          //if (!hasPreviousPage) return
+          return trigger(arg, 'backwards')
+        }, [trigger, arg])
 
         return useMemo(
           () => ({ ...queryStateResults, fetchNextPage, fetchPreviousPage }),
diff --git a/packages/toolkit/src/query/tests/buildHooks.test.tsx b/packages/toolkit/src/query/tests/buildHooks.test.tsx
@@ -949,7 +949,7 @@ describe('hooks tests', () => {
                 allPageParams,
               ) => lastPageParam + 1,
             },
-            query(pageParam = 0) {
+            query(pageParam) {
               return `https://example.com/listItems?page=${pageParam}`
             },
           }),
@@ -963,13 +963,12 @@ describe('hooks tests', () => {
       const checkNumQueries = (count: number) => {
         const cacheEntries = Object.keys(storeRef.store.getState().api.queries)
         const queries = cacheEntries.length
-        console.log('queries', queries)
-        console.log(storeRef.store.getState().api.queries)
+        console.log('queries', queries, storeRef.store.getState().api.queries)
 
         expect(queries).toBe(count)
       }
 
-      function User() {
+      function PokemonList() {
         const { data, isFetching, isUninitialized, fetchNextPage } =
           pokemonApi.endpoints.getInfinitePokemon.useInfiniteQuery('a', {
             initialPageParam: 0,
@@ -982,6 +981,11 @@ describe('hooks tests', () => {
             ) => lastPageParam + 1,
           })
 
+        const handleClick = async () => {
+          const promise = fetchNextPage()
+          const res = await promise
+        }
+
         return (
           <div>
             <div data-testid="isUninitialized">{String(isUninitialized)}</div>
@@ -991,14 +995,14 @@ describe('hooks tests', () => {
                 <div key={i}>{JSON.stringify(page)}</div>
               ))}
             </div>
-            <button data-testid="nextPage" onClick={() => fetchNextPage()}>
+            <button data-testid="nextPage" onClick={() => handleClick()}>
               nextPage
             </button>
           </div>
         )
       }
 
-      render(<User />, { wrapper: storeRef.wrapper })
+      render(<PokemonList />, { wrapper: storeRef.wrapper })
       expect(screen.getByTestId('data').textContent).toBe('')
       checkNumQueries(1)
 
@@ -1008,7 +1012,12 @@ describe('hooks tests', () => {
       await waitFor(() =>
         expect(screen.getByTestId('isFetching').textContent).toBe('false'),
       )
-      fireEvent.click(screen.getByTestId('nextPage'))
+      act(() => {
+        fireEvent.click(screen.getByTestId('nextPage'))
+      })
+      await waitFor(() =>
+        expect(screen.getByTestId('isFetching').textContent).toBe('false'),
+      )
       checkNumQueries(1)
       await waitFor(() =>
         expect(screen.getByTestId('isFetching').textContent).toBe('false'),
@@ -1656,7 +1665,7 @@ describe('hooks tests', () => {
 
             setDataFromTrigger(res) // adding client side state here will cause stale data
           } catch (error) {
-            console.error(error)
+            console.error('Error handling increment trigger', error)
           }
         }
 
@@ -1666,7 +1675,7 @@ describe('hooks tests', () => {
             // Force the lazy trigger to refetch
             await handleLoad()
           } catch (error) {
-            console.error(error)
+            console.error('Error handling mutate trigger', error)
           }
         }
 
diff --git a/packages/toolkit/src/query/tests/infiniteQueries.test-d.ts b/packages/toolkit/src/query/tests/infiniteQueries.test-d.ts
@@ -100,6 +100,15 @@ describe('Infinite queries', () => {
         expectTypeOf(currentData.pages).toEqualTypeOf<Pokemon[][]>()
         expectTypeOf(currentData.pageParams).toEqualTypeOf<number[]>()
       }
+
+      const handleClick = async () => {
+        const res = await fetchNextPage()
+
+        if (res.status === QueryStatus.fulfilled) {
+          expectTypeOf(res.data.pages).toEqualTypeOf<Pokemon[][]>()
+          expectTypeOf(res.data.pageParams).toEqualTypeOf<number[]>()
+        }
+      }
     }
   })
 })
diff --git a/packages/toolkit/src/query/tests/infiniteQueries.test.ts b/packages/toolkit/src/query/tests/infiniteQueries.test.ts
@@ -1,5 +1,13 @@
 import { configureStore, isAllOf } from '@reduxjs/toolkit'
-import { renderHook, waitFor } from '@testing-library/react'
+import {
+  act,
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+  waitFor,
+} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { HttpResponse, http } from 'msw'
 import util from 'util'
 import {
@@ -17,57 +25,59 @@ import type { BaseQueryApi } from '../baseQueryTypes'
 import { server } from '@internal/query/tests/mocks/server'
 
 describe('Infinite queries', () => {
-  beforeEach(() => {
-    server.resetHandlers()
-  })
+  type Pokemon = {
+    id: string
+    name: string
+  }
 
-  test('Basic infinite query behavior', async () => {
-    type Pokemon = {
-      id: string
-      name: string
-    }
+  server.use(
+    http.get('https://example.com/listItems', ({ request }) => {
+      const url = new URL(request.url)
+      const pageString = url.searchParams.get('page')
+      const pageNum = parseInt(pageString || '0')
 
-    server.use(
-      http.get('https://example.com/listItems', ({ request }) => {
-        const url = new URL(request.url)
-        const pageString = url.searchParams.get('page')
-        const pageNum = parseInt(pageString || '0')
+      const results: Pokemon[] = [
+        { id: `${pageNum}`, name: `Pokemon ${pageNum}` },
+      ]
+      return HttpResponse.json(results)
+    }),
+  )
 
-        const results: Pokemon[] = [
-          { id: `${pageNum}`, name: `Pokemon ${pageNum}` },
-        ]
-        return HttpResponse.json(results)
+  const pokemonApi = createApi({
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
+    endpoints: (builder) => ({
+      // GOAL: Specify both the query arg (for cache key serialization)
+      // and the page param type (for feeding into the query URL)
+      getInfinitePokemon: builder.infiniteQuery<Pokemon[], string, number>({
+        infiniteQueryOptions: {
+          initialPageParam: 0,
+          getNextPageParam: (
+            lastPage,
+            allPages,
+            // Page param type should be `number`
+            lastPageParam,
+            allPageParams,
+          ) => lastPageParam + 1,
+        },
+        // Actual query arg type should be `number`
+        query(pageParam) {
+          return `https://example.com/listItems?page=${pageParam}`
+        },
       }),
-    )
+    }),
+  })
 
-    const pokemonApi = createApi({
-      baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
-      endpoints: (builder) => ({
-        // GOAL: Specify both the query arg (for cache key serialization)
-        // and the page param type (for feeding into the query URL)
-        getInfinitePokemon: builder.infiniteQuery<Pokemon[], string, number>({
-          infiniteQueryOptions: {
-            initialPageParam: 0,
-            getNextPageParam: (
-              lastPage,
-              allPages,
-              // Page param type should be `number`
-              lastPageParam,
-              allPageParams,
-            ) => lastPageParam + 1,
-          },
-          // Actual query arg type should be `number`
-          query(pageParam) {
-            return `https://example.com/listItems?page=${pageParam}`
-          },
-        }),
-      }),
-    })
+  let storeRef = setupApiStore(pokemonApi, undefined, {
+    withoutTestLifecycles: true,
+  })
 
-    const storeRef = setupApiStore(pokemonApi, undefined, {
+  beforeEach(() => {
+    storeRef = setupApiStore(pokemonApi, undefined, {
       withoutTestLifecycles: true,
     })
+  })
 
+  test('Basic infinite query behavior', async () => {
     const res = storeRef.store.dispatch(
       // Should be `arg: string`
       pokemonApi.endpoints.getInfinitePokemon.initiate('fire', {}),
