Merge pull request #10814 from marmelab/fix-use-reference-input-controller-params

Fix useReferenceInputController params type

Author: Madeorsk

packages/ra-core/src/controller/input/useReferenceInputController.spec.tsx

@@ -3,12 +3,20 @@ import { useState, useCallback, ReactElement } from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import expect from 'expect';
 
-import { useReferenceInputController } from './useReferenceInputController';
+import {
+    useReferenceInputController,
+    UseReferenceInputControllerParams,
+} from './useReferenceInputController';
 import { CoreAdminContext } from '../../core';
-import { Form, useInput } from '../../form';
+import { ChoicesContextValue, Form, useInput } from '../../form';
 import { testDataProvider } from '../../dataProvider';
+import { SortPayload } from '../../types';
 
-const ReferenceInputController = props => {
+const ReferenceInputController = (
+    props: UseReferenceInputControllerParams & {
+        children: (options: ChoicesContextValue) => React.ReactNode;
+    }
+) => {
     const { children, ...rest } = props;
     const inputProps = useInput({
         ...rest,
@@ -160,7 +168,6 @@ describe('useReferenceInputController', () => {
                 <Form defaultValues={{ post_id: 1 }}>
                     <ReferenceInputController
                         {...defaultProps}
-                        loading
                         sort={{ field: 'title', order: 'ASC' }}
                     >
                         {children}
@@ -210,7 +217,10 @@ describe('useReferenceInputController', () => {
     it('should refetch reference getList when its props change', async () => {
         const children = jest.fn().mockReturnValue(<p>child</p>);
         const Component = () => {
-            const [sort, setSort] = useState({ field: 'title', order: 'ASC' });
+            const [sort, setSort] = useState<SortPayload>({
+                field: 'title',
+                order: 'ASC',
+            });
             const handleClick = useCallback(
                 () => setSort({ field: 'body', order: 'DESC' }),
                 [setSort]

packages/ra-core/src/controller/input/useReferenceInputController.ts

@@ -1,12 +1,17 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useWatch } from 'react-hook-form';
-import type { UseQueryOptions } from '@tanstack/react-query';
+import { keepPreviousData, type UseQueryOptions } from '@tanstack/react-query';
 
 import { useGetList } from '../../dataProvider';
 import { useReference } from '../useReference';
 import { useReferenceParams } from './useReferenceParams';
 import { useWrappedSource } from '../../core';
-import type { FilterPayload, RaRecord, SortPayload } from '../../types';
+import type {
+    FilterPayload,
+    GetListResult,
+    RaRecord,
+    SortPayload,
+} from '../../types';
 import type { ChoicesContextValue } from '../../form';
 
 /**
@@ -45,7 +50,7 @@ import type { ChoicesContextValue } from '../../form';
  * });
  */
 export const useReferenceInputController = <RecordType extends RaRecord = any>(
-    props: UseReferenceInputControllerParams
+    props: UseReferenceInputControllerParams<RecordType>
 ): ChoicesContextValue<RecordType> => {
     const {
         debounce,
@@ -100,8 +105,10 @@ export const useReferenceInputController = <RecordType extends RaRecord = any>(
         },
         {
             enabled: isGetMatchingEnabled,
-            placeholderData: previousData => previousData,
-            ...otherQueryOptions,
+            placeholderData: keepPreviousData,
+            ...(otherQueryOptions as UseQueryOptions<
+                GetListResult<RecordType>
+            >),
         }
     );
 
@@ -205,14 +212,11 @@ export interface UseReferenceInputControllerParams<
     debounce?: number;
     filter?: FilterPayload;
     queryOptions?: Omit<
-        UseQueryOptions<{
-            data: RecordType[];
-            total?: number;
-            pageInfo?: {
-                hasNextPage?: boolean;
-                hasPreviousPage?: boolean;
-            };
-        }>,
+        UseQueryOptions<
+            | GetListResult<RecordType>
+            // useReference calls getManyAggregate, which returns a an array of records
+            | RecordType[]
+        >,
         'queryFn' | 'queryKey'
     > & { meta?: any };
     page?: number;