react-query: improve types for useQuery in paginated mode (#40399)

* react-query: improve types for useQuery in paginated mode

* react-query: remove patch version from header

types/react-query/index.d.ts

@@ -11,6 +11,13 @@ export function useQuery<TResult, TVariables extends object>(
     options?: QueryOptions<TResult>
 ): QueryResult<TResult, TVariables>;
 
+// overloaded useQuery function with pagination
+export function useQuery<TResult, TVariables extends object>(
+    queryKey: QueryKey<TVariables>,
+    queryFn: QueryFunction<TResult, TVariables>,
+    options?: QueryOptionsPaginated<TResult>
+): QueryResultPaginated<TResult, TVariables>;
+
 export type QueryKey<TVariables> = string | [string, TVariables] | false | null | QueryKeyFunction<TVariables>;
 export type QueryKeyFunction<TVariables> = () => string | [string, TVariables] | false | null;
 
@@ -18,8 +25,6 @@ export type QueryFunction<TResult, TVariables extends object> = (variables: TVar
 
 export interface QueryOptions<TResult> {
     manual?: boolean;
-    paginated?: boolean;
-    getCanFetchMore?: (lastPage: number, allPages: number) => boolean;
     retry?: boolean | number;
     retryDelay?: (retryAttempt: number) => number;
     staleTime?: number;
@@ -30,6 +35,11 @@ export interface QueryOptions<TResult> {
     suspense?: boolean;
 }
 
+export interface QueryOptionsPaginated<TResult> extends QueryOptions<TResult> {
+    paginated: true;
+    getCanFetchMore: (lastPage: number, allPages: number) => boolean;
+}
+
 export interface QueryResult<TResult, TVariables> {
     data: null | TResult;
     error: null | Error;
@@ -38,6 +48,9 @@ export interface QueryResult<TResult, TVariables> {
     isCached: boolean;
     failureCount: number;
     refetch: (arg?: {variables?: TVariables, merge?: (...args: any[]) => any, disableThrow?: boolean}) => void;
+}
+
+export interface QueryResultPaginated<TResult, TVariables> extends QueryResult<TResult[], TVariables> {
     isFetchingMore: boolean;
     canFetchMore: boolean;
     fetchMore: (variables?: TVariables) => Promise<TResult>;

types/react-query/react-query-tests.ts

@@ -9,6 +9,9 @@ querySimple.data; // $ExpectType string | null
 querySimple.error; // $ExpectType Error | null
 querySimple.isLoading; // $ExpectType boolean
 querySimple.refetch(); // $ExpectType void
+queryPaginated.fetchMore; // $ExpectError
+queryPaginated.canFetchMore; // $ExpectError
+queryPaginated.isFetchingMore; // $ExpectError
 
 // Query Variables
 const param = 'test';
@@ -33,6 +36,19 @@ const queryNested = useQuery(['key', {
 }], (variables) => Promise.resolve(variables.nested.props[0]));
 queryNested.data; // $ExpectType number | null
 
+// Paginated mode
+const queryPaginated = useQuery('key', () => Promise.resolve([1, 2, 3]), {
+    paginated: true,
+    getCanFetchMore: (lastPage, allPages) => true
+});
+queryPaginated.data; // $ExpectType number[][] | null
+queryPaginated.fetchMore; // $ExpectType (variables?: {} | undefined) => Promise<number[]> || (variables?: object | undefined) => Promise<number[]>
+queryPaginated.canFetchMore; // $ExpectType boolean
+queryPaginated.isFetchingMore; // $ExpectType boolean
+
+// Paginated mode - check if getCanFetchMore is required
+useQuery('key', () => Promise.resolve(), {paginated: true}); // $ExpectError
+
 // Simple mutation
 const mutation = () => Promise.resolve(['foo', 1]);