Only pass initialPageParams option through query hook

Author: markerikson

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

@@ -790,7 +790,9 @@ export type LazyInfiniteQueryTrigger<
   ): InfiniteQueryActionCreatorResult<D>
 }
 
-interface UseInfiniteQuerySubscriptionOptions extends SubscriptionOptions {
+interface UseInfiniteQuerySubscriptionOptions<
+  D extends InfiniteQueryDefinition<any, any, any, any, any>,
+> extends SubscriptionOptions {
   /**
    * Prevents a query from automatically running.
    *
@@ -833,6 +835,7 @@ interface UseInfiniteQuerySubscriptionOptions extends SubscriptionOptions {
    * If you specify this option alongside `skip: true`, this **will not be evaluated** until `skip` is false.
    */
   refetchOnMountOrArgChange?: boolean | number
+  initialPageParam?: PageParamFrom<D>
 }
 
 export type TypedUseInfiniteQuerySubscription<
@@ -884,19 +887,14 @@ export type UseInfiniteQuery<
   D extends InfiniteQueryDefinition<any, any, any, any, any>,
 > = <R extends Record<string, any> = UseInfiniteQueryStateDefaultResult<D>>(
   arg: InfiniteQueryArgFrom<D> | SkipToken,
-  options?: UseInfiniteQuerySubscriptionOptions &
-    UseInfiniteQueryStateOptions<D, R> &
-    InfiniteQueryConfigOptions<ResultTypeFrom<D>, PageParamFrom<D>>,
+  options?: UseInfiniteQuerySubscriptionOptions<D> &
+    UseInfiniteQueryStateOptions<D, R>,
 ) => UseInfiniteQueryHookResult<D, R>
 
 export type UseInfiniteQueryState<
   D extends InfiniteQueryDefinition<any, any, any, any, any>,
 > = <R extends Record<string, any> = UseInfiniteQueryStateDefaultResult<D>>(
   arg: QueryArgFrom<D> | SkipToken,
-  InfiniteQueryConfigOptions: InfiniteQueryConfigOptions<
-    ResultTypeFrom<D>,
-    PageParamFrom<D>
-  >,
   options?: UseInfiniteQueryStateOptions<D, R>,
 ) => UseInfiniteQueryStateResult<D, R>
 
@@ -920,7 +918,7 @@ export type UseInfiniteQuerySubscription<
   D extends InfiniteQueryDefinition<any, any, any, any, any>,
 > = (
   arg: QueryArgFrom<D> | SkipToken,
-  options?: UseInfiniteQuerySubscriptionOptions,
+  options?: UseInfiniteQuerySubscriptionOptions<D>,
 ) => readonly [
   LazyInfiniteQueryTrigger<D>,
   QueryArgFrom<D> | UninitializedValue,
@@ -1758,6 +1756,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         skip = false,
         pollingInterval = 0,
         skipPollingIfUnfocused = false,
+        initialPageParam,
       } = {},
     ) => {
       const { initiate } = api.endpoints[
@@ -1858,6 +1857,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
           lastPromise?.unsubscribe()
           const promise = dispatch(
             initiate(stableArg, {
+              initialPageParam,
               subscriptionOptions: stableSubscriptionOptions,
               forceRefetch: refetchOnMountOrArgChange,
             }),
@@ -1874,6 +1874,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         stableArg,
         stableSubscriptionOptions,
         subscriptionRemoved,
+        initialPageParam,
       ])
 
       const subscriptionOptionsRef = useRef(stableSubscriptionOptions)
@@ -1913,7 +1914,6 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
 
     const useInfiniteQueryState: UseInfiniteQueryState<any> = (
       arg: any,
-      { getNextPageParam, getPreviousPageParam },
       { skip = false, selectFromResult, trigger } = {},
     ) => {
       const { select, initiate } = api.endpoints[
@@ -1984,22 +1984,14 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
       useInfiniteQuerySubscription,
       useInfiniteQuery(arg, options) {
         const [trigger] = useInfiniteQuerySubscription(arg, options)
-        const queryStateResults = useInfiniteQueryState(
-          arg,
-          {
-            initialPageParam: options?.initialPageParam!,
-            getNextPageParam: options?.getNextPageParam!,
-            getPreviousPageParam: options?.getPreviousPageParam,
-          },
-          {
-            selectFromResult:
-              arg === skipToken || options?.skip
-                ? undefined
-                : noPendingQueryStateSelector,
-            trigger,
-            ...options,
-          },
-        )
+        const queryStateResults = useInfiniteQueryState(arg, {
+          selectFromResult:
+            arg === skipToken || options?.skip
+              ? undefined
+              : noPendingQueryStateSelector,
+          trigger,
+          ...options,
+        })
 
         const {
           data,

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

@@ -181,6 +181,8 @@ afterEach(() => {
   nextItemId = 0
   amount = 0
   listenerMiddleware.clearListeners()
+
+  server.resetHandlers()
 })
 
 let getRenderCount: () => number = () => 0
@@ -1693,6 +1695,14 @@ describe('hooks tests', () => {
               lastPageParam,
               allPageParams,
             ) => lastPageParam + 1,
+            getPreviousPageParam: (
+              firstPage,
+              allPages,
+              firstPageParam,
+              allPageParams,
+            ) => {
+              return firstPageParam > 0 ? firstPageParam - 1 : undefined
+            },
           },
           query(pageParam) {
             return `https://example.com/listItems?page=${pageParam}`
@@ -1702,57 +1712,66 @@ describe('hooks tests', () => {
     })
 
     function PokemonList({
+      arg = 'fire',
       initialPageParam = 0,
     }: {
+      arg?: string
       initialPageParam?: number
     }) {
-      const { data, isFetching, isUninitialized, fetchNextPage } =
-        pokemonApi.endpoints.getInfinitePokemon.useInfiniteQuery('a', {
-          initialPageParam,
-          getNextPageParam: (
-            lastPage,
-            allPages,
-            // Page param type should be `number`
-            lastPageParam,
-            allPageParams,
-          ) => lastPageParam + 1,
-        })
+      const {
+        data,
+        isFetching,
+        isUninitialized,
+        fetchNextPage,
+        fetchPreviousPage,
+      } = pokemonApi.endpoints.getInfinitePokemon.useInfiniteQuery(arg, {
+        initialPageParam,
+      })
+
+      const handlePreviousPage = async () => {
+        const res = await fetchPreviousPage()
+      }
 
-      const handleClick = async () => {
-        const promise = fetchNextPage()
-        const res = await promise
+      const handleNextPage = async () => {
+        const res = await fetchNextPage()
       }
 
       return (
         <div>
           <div data-testid="isUninitialized">{String(isUninitialized)}</div>
           <div data-testid="isFetching">{String(isFetching)}</div>
+          <div>Type: {arg}</div>
           <div data-testid="data">
-            {data?.pages.map((page: any, i: number | null | undefined) => (
-              <div key={i}>{JSON.stringify(page)}</div>
+            {data?.pages.map((page, i: number | null | undefined) => (
+              <div key={i}>{page.name}</div>
             ))}
           </div>
-          <button data-testid="nextPage" onClick={() => handleClick()}>
+          <button data-testid="prevPage" onClick={() => handlePreviousPage()}>
+            nextPage
+          </button>
+          <button data-testid="nextPage" onClick={() => handleNextPage()}>
             nextPage
           </button>
         </div>
       )
     }
 
-    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}`,
-        }
+    beforeEach(() => {
+      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)
-      }),
-    )
+          return HttpResponse.json(results)
+        }),
+      )
+    })
 
     test('useInfiniteQuery fetchNextPage Trigger', async () => {
       const storeRef = setupApiStore(pokemonApi, undefined, {
@@ -1762,34 +1781,76 @@ describe('hooks tests', () => {
       const checkNumQueries = (count: number) => {
         const cacheEntries = Object.keys(storeRef.store.getState().api.queries)
         const queries = cacheEntries.length
-        console.log('queries', queries, storeRef.store.getState().api.queries)
+        //console.log('queries', queries, storeRef.store.getState().api.queries)
 
         expect(queries).toBe(count)
       }
 
-      render(<PokemonList />, { wrapper: storeRef.wrapper })
+      const checkPageRows = (type: string, ids: number[]) => {
+        expect(screen.getByText(`Type: ${type}`)).toBeTruthy()
+        for (const id of ids) {
+          expect(screen.getByText(`Pokemon ${id}`)).toBeTruthy()
+        }
+      }
+
+      async function waitForFetch() {
+        await waitFor(() =>
+          expect(screen.getByTestId('isFetching').textContent).toBe('true'),
+        )
+        await waitFor(() =>
+          expect(screen.getByTestId('isFetching').textContent).toBe('false'),
+        )
+      }
+
+      const utils = render(<PokemonList />, { wrapper: storeRef.wrapper })
       expect(screen.getByTestId('data').textContent).toBe('')
       checkNumQueries(1)
 
       await waitFor(() =>
         expect(screen.getByTestId('isUninitialized').textContent).toBe('false'),
       )
-      await waitFor(() =>
-        expect(screen.getByTestId('isFetching').textContent).toBe('false'),
-      )
+
+      // Initial load
+      await waitForFetch()
+      checkNumQueries(1)
+      checkPageRows('fire', [0])
+
       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'),
-      )
-      expect(screen.getByTestId('data').textContent).toBe(
-        '{"id":"0","name":"Pokemon 0"}{"id":"1","name":"Pokemon 1"}',
-      )
+
+      await waitForFetch()
+
+      // Added one page
+      checkPageRows('fire', [0, 1])
+
+      act(() => {
+        fireEvent.click(screen.getByTestId('nextPage'))
+      })
+      await waitForFetch()
+
+      checkPageRows('fire', [0, 1, 2])
+
+      utils.rerender(<PokemonList arg="water" initialPageParam={3} />)
+
+      await waitForFetch()
+
+      checkNumQueries(2)
+      checkPageRows('water', [3])
+
+      act(() => {
+        fireEvent.click(screen.getByTestId('nextPage'))
+      })
+      await waitForFetch()
+
+      checkPageRows('water', [3, 4])
+
+      act(() => {
+        fireEvent.click(screen.getByTestId('prevPage'))
+      })
+      await waitForFetch()
+
+      checkPageRows('water', [2, 3, 4])
     })
   })