Fix infinite query type portability issues (#4881)

markerikson · web-flow · commit 4e358215f68b · 2025-03-07T15:40:22.000-05:00
* Fix infinite query type portability issues

* Add infinite queries to type portability examples
diff --git a/examples/type-portability/bundler/src/app/services/posts.ts b/examples/type-portability/bundler/src/app/services/posts.ts
@@ -73,6 +73,16 @@ export const postsApi = apiSlice.injectEndpoints({
     getErrorProne: build.query<{ success: boolean }, void>({
       query: () => 'error-prone',
     }),
+    getInfinitePosts: build.infiniteQuery<PostsResponse, void, number>({
+      queryFn: ({ pageParam = 0 }) => ({
+        data: [],
+      }),
+      infiniteQueryOptions: {
+        initialPageParam: 0,
+        getNextPageParam: (lastPage) =>
+          lastPage.length === 0 ? undefined : lastPage[lastPage.length - 1].id,
+      },
+    }),
   }),
 })
 
@@ -87,6 +97,7 @@ export const {
   useLazyGetErrorProneQuery,
   useLazyGetPostQuery,
   useLazyGetPostsQuery,
+  useGetInfinitePostsInfiniteQuery,
   endpoints,
   enhanceEndpoints,
   injectEndpoints,
@@ -106,6 +117,7 @@ export const {
   getPosts,
   login,
   updatePost,
+  getInfinitePosts,
 } = endpoints
 
 export const {
@@ -182,6 +194,19 @@ export const {
   useMutation: _____useMutation,
 } = updatePost
 
+export const {
+  Types: ______Types,
+  initiate: ______initiate,
+  matchFulfilled: ______matchFulfilled,
+  matchPending: ______matchPending,
+  matchRejected: ______matchRejected,
+  name: ______name,
+  select: ______select,
+  useInfiniteQueryState: ______useQueryState,
+  useInfiniteQuery: ______useQuery,
+  useInfiniteQuerySubscription: ______useQuerySubscription,
+} = getInfinitePosts
+
 export const {
   internal_getRTKQSubscriptions,
   middlewareRegistered,
diff --git a/examples/type-portability/bundler/src/features/posts/PostsManager.tsx b/examples/type-portability/bundler/src/features/posts/PostsManager.tsx
@@ -8,6 +8,7 @@ import {
   useGetErrorProneQuery,
   useGetPostsQuery,
   useLoginMutation,
+  useGetInfinitePostsInfiniteQuery,
 } from '../../app/services/posts'
 import { logout, selectIsAuthenticated } from '../auth/authSlice'
 import { PostDetail } from './PostDetail'
@@ -70,6 +71,7 @@ export const PostListItem = ({
 
 export const PostList = () => {
   const { data: posts, isLoading } = useGetPostsQuery()
+  useGetInfinitePostsInfiniteQuery()
   const navigate = useNavigate()
 
   if (isLoading) {
diff --git a/examples/type-portability/nodenext-cjs/src/app/services/posts.ts b/examples/type-portability/nodenext-cjs/src/app/services/posts.ts
@@ -76,6 +76,18 @@ namespace postsModule {
       getErrorProne: build.query<{ success: boolean }, void>({
         query: () => 'error-prone',
       }),
+      getInfinitePosts: build.infiniteQuery<PostsResponse, void, number>({
+        queryFn: ({ pageParam = 0 }) => ({
+          data: [],
+        }),
+        infiniteQueryOptions: {
+          initialPageParam: 0,
+          getNextPageParam: (lastPage) =>
+            lastPage.length === 0
+              ? undefined
+              : lastPage[lastPage.length - 1].id,
+        },
+      }),
     }),
   })
 
@@ -90,6 +102,7 @@ namespace postsModule {
     useLazyGetErrorProneQuery,
     useLazyGetPostQuery,
     useLazyGetPostsQuery,
+    useGetInfinitePostsInfiniteQuery,
     endpoints,
     enhanceEndpoints,
     injectEndpoints,
@@ -109,6 +122,7 @@ namespace postsModule {
     getPosts,
     login,
     updatePost,
+    getInfinitePosts,
   } = endpoints
 
   export const {
@@ -185,6 +199,19 @@ namespace postsModule {
     useMutation: _____useMutation,
   } = updatePost
 
+  export const {
+    Types: ______Types,
+    initiate: ______initiate,
+    matchFulfilled: ______matchFulfilled,
+    matchPending: ______matchPending,
+    matchRejected: ______matchRejected,
+    name: ______name,
+    select: ______select,
+    useInfiniteQueryState: ______useQueryState,
+    useInfiniteQuery: ______useQuery,
+    useInfiniteQuerySubscription: ______useQuerySubscription,
+  } = getInfinitePosts
+
   export const {
     internal_getRTKQSubscriptions,
     middlewareRegistered,
diff --git a/examples/type-portability/nodenext-cjs/src/features/posts/PostsManager.tsx b/examples/type-portability/nodenext-cjs/src/features/posts/PostsManager.tsx
@@ -18,6 +18,7 @@ import useAddPostMutation = postsModule.useAddPostMutation
 import useGetErrorProneQuery = postsModule.useGetErrorProneQuery
 import useGetPostsQuery = postsModule.useGetPostsQuery
 import useLoginMutation = postsModule.useLoginMutation
+import useGetInfinitePostsInfiniteQuery = postsModule.useGetInfinitePostsInfiniteQuery
 import logout = authSliceModule.logout
 import selectIsAuthenticated = authSliceModule.selectIsAuthenticated
 
@@ -81,6 +82,7 @@ const PostListItem = ({
 
 const PostList = () => {
   const { data: posts, isLoading } = useGetPostsQuery()
+  useGetInfinitePostsInfiniteQuery()
   const navigate = useNavigate()
 
   if (isLoading) {
diff --git a/examples/type-portability/nodenext-esm/src/app/services/posts.ts b/examples/type-portability/nodenext-esm/src/app/services/posts.ts
@@ -73,6 +73,16 @@ export const postsApi = apiSlice.injectEndpoints({
     getErrorProne: build.query<{ success: boolean }, void>({
       query: () => 'error-prone',
     }),
+    getInfinitePosts: build.infiniteQuery<PostsResponse, void, number>({
+      queryFn: ({ pageParam = 0 }) => ({
+        data: [],
+      }),
+      infiniteQueryOptions: {
+        initialPageParam: 0,
+        getNextPageParam: (lastPage) =>
+          lastPage.length === 0 ? undefined : lastPage[lastPage.length - 1].id,
+      },
+    }),
   }),
 })
 
@@ -87,6 +97,7 @@ export const {
   useLazyGetErrorProneQuery,
   useLazyGetPostQuery,
   useLazyGetPostsQuery,
+  useGetInfinitePostsInfiniteQuery,
   endpoints,
   enhanceEndpoints,
   injectEndpoints,
@@ -106,6 +117,7 @@ export const {
   getPosts,
   login,
   updatePost,
+  getInfinitePosts,
 } = endpoints
 
 export const {
@@ -182,6 +194,19 @@ export const {
   useMutation: _____useMutation,
 } = updatePost
 
+export const {
+  Types: ______Types,
+  initiate: ______initiate,
+  matchFulfilled: ______matchFulfilled,
+  matchPending: ______matchPending,
+  matchRejected: ______matchRejected,
+  name: ______name,
+  select: ______select,
+  useInfiniteQueryState: ______useQueryState,
+  useInfiniteQuery: ______useQuery,
+  useInfiniteQuerySubscription: ______useQuerySubscription,
+} = getInfinitePosts
+
 export const {
   internal_getRTKQSubscriptions,
   middlewareRegistered,
diff --git a/examples/type-portability/nodenext-esm/src/features/posts/PostsManager.tsx b/examples/type-portability/nodenext-esm/src/features/posts/PostsManager.tsx
@@ -6,6 +6,7 @@ import type { Post } from '../../app/services/posts.js'
 import {
   useAddPostMutation,
   useGetErrorProneQuery,
+  useGetInfinitePostsInfiniteQuery,
   useGetPostsQuery,
   useLoginMutation,
 } from '../../app/services/posts.js'
@@ -70,6 +71,7 @@ export const PostListItem = ({
 
 export const PostList = () => {
   const { data: posts, isLoading } = useGetPostsQuery()
+  useGetInfinitePostsInfiniteQuery()
   const navigate = useNavigate()
 
   if (isLoading) {
diff --git a/packages/toolkit/src/query/core/apiState.ts b/packages/toolkit/src/query/core/apiState.ts
@@ -60,7 +60,7 @@ export type InfiniteQueryConfigOptions<DataType, PageParam> = {
   maxPages?: number
 }
 
-export interface InfiniteData<DataType, PageParam> {
+export type InfiniteData<DataType, PageParam> = {
   pages: Array<DataType>
   pageParams: Array<PageParam>
 }
diff --git a/packages/toolkit/src/query/endpointDefinitions.ts b/packages/toolkit/src/query/endpointDefinitions.ts
@@ -544,14 +544,14 @@ export type QueryDefinition<
 > = BaseEndpointDefinition<QueryArg, BaseQuery, ResultType> &
   QueryExtraOptions<TagTypes, ResultType, QueryArg, BaseQuery, ReducerPath>
 
-export interface InfiniteQueryTypes<
+export type InfiniteQueryTypes<
   QueryArg,
   PageParam,
   BaseQuery extends BaseQueryFn,
   TagTypes extends string,
   ResultType,
   ReducerPath extends string = string,
-> extends BaseEndpointTypes<QueryArg, BaseQuery, ResultType> {
+> = BaseEndpointTypes<QueryArg, BaseQuery, ResultType> & {
   /**
    * The endpoint definition type. To be used with some internal generic types.
    * @example
diff --git a/packages/toolkit/src/query/react/buildHooks.ts b/packages/toolkit/src/query/react/buildHooks.ts
@@ -809,9 +809,9 @@ export type TypedLazyInfiniteQueryTrigger<
   >
 >
 
-interface UseInfiniteQuerySubscriptionOptions<
+export type UseInfiniteQuerySubscriptionOptions<
   D extends InfiniteQueryDefinition<any, any, any, any, any>,
-> extends SubscriptionOptions {
+> = SubscriptionOptions & {
   /**
    * Prevents a query from automatically running.
    *

Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ export type InfiniteQueryConfigOptions<DataType, PageParam> = {`
`60`	`60`	`maxPages?: number`
`61`	`61`	`}`
`62`	`62`
`63`		`-export interface InfiniteData<DataType, PageParam> {`
	`63`	`+export type InfiniteData<DataType, PageParam> = {`
`64`	`64`	`pages: Array<DataType>`
`65`	`65`	`pageParams: Array<PageParam>`
`66`	`66`	`}`
Original file line number	Diff line number	Diff line change
`@@ -809,9 +809,9 @@ export type TypedLazyInfiniteQueryTrigger<`
`809`	`809`	`>`
`810`	`810`	`>`
`811`	`811`
`812`		`-interface UseInfiniteQuerySubscriptionOptions<`
	`812`	`+export type UseInfiniteQuerySubscriptionOptions<`
`813`	`813`	`D extends InfiniteQueryDefinition<any, any, any, any, any>,`
`814`		`-> extends SubscriptionOptions {`
	`814`	`+> = SubscriptionOptions & {`
`815`	`815`	`/**`
`816`	`816`	`* Prevents a query from automatically running.`
`817`	`817`	`*`