Only pass initialPageParams option through query hook

Author: markerikson

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

@@ -758,7 +758,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.
    *
@@ -801,6 +803,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<
@@ -852,19 +855,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>
 
@@ -888,7 +886,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,
@@ -1706,6 +1704,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         skip = false,
         pollingInterval = 0,
         skipPollingIfUnfocused = false,
+        initialPageParam,
       } = {},
     ) => {
       const { initiate } = api.endpoints[
@@ -1806,6 +1805,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
           lastPromise?.unsubscribe()
           const promise = dispatch(
             initiate(stableArg, {
+              initialPageParam,
               subscriptionOptions: stableSubscriptionOptions,
               forceRefetch: refetchOnMountOrArgChange,
             }),
@@ -1822,6 +1822,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         stableArg,
         stableSubscriptionOptions,
         subscriptionRemoved,
+        initialPageParam,
       ])
 
       const subscriptionOptionsRef = useRef(stableSubscriptionOptions)
@@ -1861,7 +1862,6 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
 
     const useInfiniteQueryState: UseInfiniteQueryState<any> = (
       arg: any,
-      { getNextPageParam, getPreviousPageParam },
       { skip = false, selectFromResult, trigger } = {},
     ) => {
       const { select, initiate } = api.endpoints[
@@ -1932,22 +1932,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

@@ -1498,6 +1498,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}`
@@ -1507,37 +1515,44 @@ 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>
@@ -1567,34 +1582,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])
     })
   })