Nest {queryArg, pageParam} for infinite queries

Author: markerikson

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

@@ -20,6 +20,7 @@ import type {
   EndpointDefinition,
   EndpointDefinitions,
   InfiniteQueryArgFrom,
+  InfiniteQueryCombinedArg,
   InfiniteQueryDefinition,
   MutationDefinition,
   PageParamFrom,
@@ -464,7 +465,7 @@ export function buildThunks<
     transformFieldName: 'transformResponse' | 'transformErrorResponse',
   ): TransformCallback => {
     return endpointDefinition.query && endpointDefinition[transformFieldName]
-      ? endpointDefinition[transformFieldName]!
+      ? (endpointDefinition[transformFieldName]! as TransformCallback)
       : defaultTransformResponse
   }
 
@@ -523,7 +524,12 @@ export function buildThunks<
           return Promise.resolve({ data })
         }
 
-        const pageResponse = await executeRequest(param)
+        const finalQueryArg: InfiniteQueryCombinedArg<any, any> = {
+          queryArg: arg.originalArgs,
+          pageParam: param,
+        }
+
+        const pageResponse = await executeRequest(finalQueryArg)
 
         const addTo = previous ? addToStart : addToEnd
 
@@ -548,13 +554,13 @@ export function buildThunks<
           result = forceQueryFn()
         } else if (endpointDefinition.query) {
           result = await baseQuery(
-            endpointDefinition.query(finalQueryArg),
+            endpointDefinition.query(finalQueryArg as any),
             baseQueryApi,
             extraOptions as any,
           )
         } else {
           result = await endpointDefinition.queryFn(
-            finalQueryArg,
+            finalQueryArg as any,
             baseQueryApi,
             extraOptions as any,
             (arg) => baseQuery(arg, baseQueryApi, extraOptions as any),

packages/toolkit/src/query/endpointDefinitions.ts

@@ -643,7 +643,7 @@ export interface InfiniteQueryExtraOptions<
               return firstPageParam > 0 ? firstPageParam - 1 : undefined
             },
           },
-          query(pageParam) {
+          query({pageParam}) {
             return `https://example.com/listItems?page=${pageParam}`
           },
         }),
@@ -737,7 +737,11 @@ export type InfiniteQueryDefinition<
   ReducerPath extends string = string,
 > =
   // Intentionally use `PageParam` as the `QueryArg` type
-  BaseEndpointDefinition<PageParam, BaseQuery, ResultType> &
+  BaseEndpointDefinition<
+    InfiniteQueryCombinedArg<QueryArg, PageParam>,
+    BaseQuery,
+    ResultType
+  > &
     InfiniteQueryExtraOptions<
       TagTypes,
       ResultType,
@@ -1071,6 +1075,11 @@ export type PageParamFrom<
 > =
   D extends InfiniteQueryDefinition<any, infer PP, any, any, any> ? PP : unknown
 
+export type InfiniteQueryCombinedArg<QueryArg, PageParam> = {
+  queryArg: QueryArg
+  pageParam: PageParam
+}
+
 export type TagTypesFromApi<T> =
   T extends Api<any, any, any, infer TagTypes> ? TagTypes : never
 

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

@@ -1710,7 +1710,7 @@ describe('hooks tests', () => {
               return firstPageParam > 0 ? firstPageParam - 1 : undefined
             },
           },
-          query(pageParam) {
+          query({ pageParam }) {
             return `https://example.com/listItems?page=${pageParam}`
           },
         }),
@@ -1738,7 +1738,7 @@ describe('hooks tests', () => {
               return firstPageParam > 0 ? firstPageParam - 1 : undefined
             },
           },
-          query(pageParam) {
+          query({ pageParam }) {
             return `https://example.com/listItems?page=${pageParam}`
           },
         }),
@@ -2035,7 +2035,8 @@ describe('hooks tests', () => {
                 }
               },
             },
-            query: ({ offset, limit }) => {
+            query: ({ pageParam }) => {
+              const { offset, limit } = pageParam
               return {
                 url: `https://example.com/api/projectsLimitOffset?offset=${offset}&limit=${limit}`,
                 method: 'GET',

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

@@ -36,8 +36,9 @@ describe('Infinite queries', () => {
               return lastPageParam + 1
             },
           },
-          query(pageParam) {
+          query({ pageParam, queryArg }) {
             expectTypeOf(pageParam).toBeNumber()
+            expectTypeOf(queryArg).toBeString()
 
             return `https://example.com/listItems?page=${pageParam}`
           },

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

@@ -59,7 +59,7 @@ describe('Infinite queries', () => {
             return firstPageParam > 0 ? firstPageParam - 1 : undefined
           },
         },
-        query(pageParam) {
+        query({ pageParam }) {
           return `https://example.com/listItems?page=${pageParam}`
         },
       }),
@@ -83,7 +83,7 @@ describe('Infinite queries', () => {
               return firstPageParam > 0 ? firstPageParam - 1 : undefined
             },
           },
-          query(pageParam) {
+          query({ pageParam }) {
             return `https://example.com/listItems?page=${pageParam}`
           },
         },
@@ -110,10 +110,10 @@ describe('Infinite queries', () => {
     tagTypes: ['Counter'],
     endpoints: (build) => ({
       counters: build.infiniteQuery<HitCounter, string, number>({
-        queryFn(page) {
+        queryFn({ pageParam }) {
           hitCounter++
 
-          return { data: { page, hitCounter } }
+          return { data: { page: pageParam, hitCounter } }
         },
         infiniteQueryOptions: {
           initialPageParam: 0,
@@ -663,7 +663,7 @@ describe('Infinite queries', () => {
               return firstPageParam > 0 ? firstPageParam - 1 : undefined
             },
           },
-          query(pageParam) {
+          query({ pageParam }) {
             return `https://example.com/listItems?page=${pageParam}`
           },
         }),
@@ -809,7 +809,7 @@ describe('Infinite queries', () => {
               return firstPageParam > 0 ? firstPageParam - 1 : undefined
             },
           },
-          query(pageParam) {
+          query({ pageParam }) {
             return `https://example.com/listItems?page=${pageParam}`
           },
           async onCacheEntryAdded(arg, api) {
@@ -879,14 +879,14 @@ describe('Infinite queries', () => {
               allPageParams,
             ) => lastPageParam + 1,
           },
-          query(pageParam) {
+          query({ pageParam }) {
             return `https://example.com/listItems?page=${pageParam}`
           },
           transformResponse(baseQueryReturnValue: Pokemon[], meta, arg) {
             expect(Array.isArray(baseQueryReturnValue)).toBe(true)
             return {
               items: baseQueryReturnValue,
-              page: arg,
+              page: arg.pageParam,
             }
           },
         }),