Pass through initialPageParam on thunk dispatch

Author: markerikson

packages/toolkit/src/query/core/buildInitiate.ts

@@ -15,6 +15,7 @@ import type {
   InfiniteQueryArgFrom,
   InfiniteQueryDefinition,
   MutationDefinition,
+  PageParamFrom,
   QueryArgFrom,
   QueryDefinition,
   ResultTypeFrom,
@@ -66,16 +67,22 @@ export type StartQueryActionCreatorOptions = {
   [forceQueryFnSymbol]?: () => QueryReturnValue
 }
 
-export type StartInfiniteQueryActionCreatorOptions = {
+export type StartInfiniteQueryActionCreatorOptions<
+  D extends InfiniteQueryDefinition<any, any, any, any, any>,
+> = {
   subscribe?: boolean
   forceRefetch?: boolean | number
   subscriptionOptions?: SubscriptionOptions
-  infiniteQueryOptions?: InfiniteQueryConfigOptions<unknown, unknown>
   direction?: 'forward' | 'backwards'
   [forceQueryFnSymbol]?: () => QueryReturnValue
   param?: unknown
   previous?: boolean
-}
+} & Partial<
+  Pick<
+    Partial<InfiniteQueryConfigOptions<ResultTypeFrom<D>, PageParamFrom<D>>>,
+    'initialPageParam'
+  >
+>
 
 type StartQueryActionCreator<
   D extends QueryDefinition<any, any, any, any, any>,
@@ -90,7 +97,7 @@ type StartInfiniteQueryActionCreator<
   D extends InfiniteQueryDefinition<any, any, any, any, any>,
 > = (
   arg: InfiniteQueryArgFrom<D>,
-  options?: StartInfiniteQueryActionCreatorOptions,
+  options?: StartInfiniteQueryActionCreatorOptions<D>,
 ) => (
   dispatch: ThunkDispatch<any, any, UnknownAction>,
   getState: () => any,
@@ -254,7 +261,7 @@ export function buildInitiate({
 }: {
   serializeQueryArgs: InternalSerializeQueryArgs
   queryThunk: QueryThunk
-  infiniteQueryThunk: InfiniteQueryThunk
+  infiniteQueryThunk: InfiniteQueryThunk<any>
   mutationThunk: MutationThunk
   api: Api<any, EndpointDefinitions, any, any>
   context: ApiContext<EndpointDefinitions>
@@ -488,7 +495,7 @@ You must add the middleware for RTK-Query to function correctly!`,
           subscribe = true,
           forceRefetch,
           subscriptionOptions,
-          infiniteQueryOptions,
+          initialPageParam,
           [forceQueryFnSymbol]: forceQueryFn,
           direction,
           param = arg,
@@ -514,6 +521,7 @@ You must add the middleware for RTK-Query to function correctly!`,
           param,
           previous,
           direction,
+          initialPageParam,
         })
         const selector = (
           api.endpoints[endpointName] as ApiEndpointInfiniteQuery<any, any>
@@ -550,7 +558,6 @@ You must add the middleware for RTK-Query to function correctly!`,
               arg,
               requestId,
               subscriptionOptions,
-              infiniteQueryOptions,
               queryCacheKey,
               abort,
               async unwrap() {

packages/toolkit/src/query/core/buildMiddleware/types.ts

@@ -49,7 +49,7 @@ export interface BuildMiddlewareInput<
   context: ApiContext<Definitions>
   queryThunk: QueryThunk
   mutationThunk: MutationThunk
-  infiniteQueryThunk: InfiniteQueryThunk
+  infiniteQueryThunk: InfiniteQueryThunk<any>
   api: Api<any, Definitions, ReducerPath, TagTypes>
   assertTagType: AssertTagTypes
 }

packages/toolkit/src/query/core/buildSlice.ts

@@ -160,7 +160,7 @@ export function buildSlice({
 }: {
   reducerPath: string
   queryThunk: QueryThunk
-  infiniteQueryThunk: InfiniteQueryThunk
+  infiniteQueryThunk: InfiniteQueryThunk<any>
   mutationThunk: MutationThunk
   serializeQueryArgs: InternalSerializeQueryArgs
   context: ApiContext<EndpointDefinitions>

packages/toolkit/src/query/core/buildThunks.ts

@@ -118,8 +118,10 @@ export type QueryThunkArg = QuerySubstateIdentifier &
     endpointName: string
   }
 
-export type InfiniteQueryThunkArg = QuerySubstateIdentifier &
-  StartInfiniteQueryActionCreatorOptions & {
+export type InfiniteQueryThunkArg<
+  D extends InfiniteQueryDefinition<any, any, any, any, any>,
+> = QuerySubstateIdentifier &
+  StartInfiniteQueryActionCreatorOptions<D> & {
     type: `query`
     originalArgs: unknown
     endpointName: string
@@ -158,11 +160,9 @@ export type QueryThunk = AsyncThunk<
   QueryThunkArg,
   ThunkApiMetaConfig
 >
-export type InfiniteQueryThunk = AsyncThunk<
-  ThunkResult,
-  InfiniteQueryThunkArg,
-  ThunkApiMetaConfig
->
+export type InfiniteQueryThunk<
+  D extends InfiniteQueryDefinition<any, any, any, any, any>,
+> = AsyncThunk<ThunkResult, InfiniteQueryThunkArg<D>, ThunkApiMetaConfig>
 export type MutationThunk = AsyncThunk<
   ThunkResult,
   MutationThunkArg,
@@ -382,7 +382,7 @@ export function buildThunks<
   // The generic async payload function for all of our thunks
   const executeEndpoint: AsyncThunkPayloadCreator<
     ThunkResult,
-    QueryThunkArg | MutationThunkArg | InfiniteQueryThunkArg,
+    QueryThunkArg | MutationThunkArg | InfiniteQueryThunkArg<any>,
     ThunkApiMetaConfig & { state: RootState<any, string, ReducerPath> }
   > = async (
     arg,
@@ -554,21 +554,19 @@ export function buildThunks<
             existingData,
           )
 
-          console.log('Next page param: ', {
-            previous,
-            param,
-            existingData,
-          })
-
           result = await fetchPage(existingData, param, previous)
         } else {
           // Otherwise, fetch the first page and then any remaining pages
 
+          const {
+            initialPageParam = endpointDefinition.infiniteQueryOptions
+              .initialPageParam,
+          } = arg as InfiniteQueryThunkArg<any>
+
           // Fetch first page
           result = await fetchPage(
             existingData,
-            existingData.pageParams[0] ??
-              endpointDefinition.infiniteQueryOptions.initialPageParam, // arg.originalArgs,
+            existingData.pageParams[0] ?? initialPageParam,
           )
 
           //original
@@ -752,7 +750,7 @@ In the case of an unhandled error, no tags will be "provided" or "invalidated".`
 
   const infiniteQueryThunk = createAsyncThunk<
     ThunkResult,
-    InfiniteQueryThunkArg,
+    InfiniteQueryThunkArg<any>,
     ThunkApiMetaConfig & { state: RootState<any, string, ReducerPath> }
   >(`${reducerPath}/executeQuery`, executeEndpoint, {
     getPendingMeta(queryThunkArgs) {

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

@@ -78,42 +78,68 @@ describe('Infinite queries', () => {
   })
 
   test('Basic infinite query behavior', async () => {
-    const res = storeRef.store.dispatch(
+    const res1 = storeRef.store.dispatch(
       // Should be `arg: string`
       pokemonApi.endpoints.getInfinitePokemon.initiate('fire', {}),
     )
 
-    const firstResult = await res
-    expect(firstResult.status).toBe(QueryStatus.fulfilled)
-    console.log('Value: ', util.inspect(firstResult, { depth: Infinity }))
+    const entry1InitialLoad = await res1
+    expect(entry1InitialLoad.status).toBe(QueryStatus.fulfilled)
+    // console.log('Value: ', util.inspect(entry1InitialLoad, { depth: Infinity }))
 
-    if (firstResult.status === QueryStatus.fulfilled) {
-      expect(firstResult.data.pages).toEqual([
+    if (entry1InitialLoad.status === QueryStatus.fulfilled) {
+      expect(entry1InitialLoad.data.pages).toEqual([
         // one page, one entry
         [{ id: '0', name: 'Pokemon 0' }],
       ])
     }
 
-    const secondRes = storeRef.store.dispatch(
+    const entry1SecondPage = await storeRef.store.dispatch(
       pokemonApi.endpoints.getInfinitePokemon.initiate('fire', {
         direction: 'forward',
       }),
     )
 
-    const secondResult = await secondRes
-    expect(secondResult.status).toBe(QueryStatus.fulfilled)
-    console.log('Value: ', util.inspect(secondResult, { depth: Infinity }))
-    if (secondResult.status === QueryStatus.fulfilled) {
-      expect(secondResult.data.pages).toEqual([
+    expect(entry1SecondPage.status).toBe(QueryStatus.fulfilled)
+    // console.log('Value: ', util.inspect(entry1SecondPage, { depth: Infinity }))
+    if (entry1SecondPage.status === QueryStatus.fulfilled) {
+      expect(entry1SecondPage.data.pages).toEqual([
         // two pages, one entry each
         [{ id: '0', name: 'Pokemon 0' }],
         [{ id: '1', name: 'Pokemon 1' }],
       ])
     }
 
-    console.log(
-      'API state: ',
-      util.inspect(storeRef.store.getState().api, { depth: Infinity }),
+    // console.log(
+    //   'API state: ',
+    //   util.inspect(storeRef.store.getState().api, { depth: Infinity }),
+    // )
+
+    const entry2InitialLoad = await storeRef.store.dispatch(
+      pokemonApi.endpoints.getInfinitePokemon.initiate('water', {
+        initialPageParam: 3,
+      }),
+    )
+
+    if (entry2InitialLoad.status === QueryStatus.fulfilled) {
+      expect(entry2InitialLoad.data.pages).toEqual([
+        // one page, one entry
+        [{ id: '3', name: 'Pokemon 3' }],
+      ])
+    }
+
+    const entry2NextPage = await storeRef.store.dispatch(
+      pokemonApi.endpoints.getInfinitePokemon.initiate('water', {
+        direction: 'forward',
+      }),
     )
+
+    if (entry2NextPage.status === QueryStatus.fulfilled) {
+      expect(entry2NextPage.data.pages).toEqual([
+        // two pages, one entry each
+        [{ id: '3', name: 'Pokemon 3' }],
+        [{ id: '4', name: 'Pokemon 4' }],
+      ])
+    }
   })
 })