Merge pull request #11166 from marmelab/referencemanyfieldcontroller-type

[TypeScript] Fix ReferenceManyField queryOptions type doesn't support error and success callbacks

Author: WiXSL

packages/ra-core/src/controller/field/ReferenceManyFieldBase.stories.tsx

@@ -414,3 +414,46 @@ const AuthorList = ({ source }) => {
         </p>
     );
 };
+
+// test queryOptions type, it should support onSuccess and onError
+export const QueryOptions = ({ dataProvider }) => (
+    <TestMemoryRouter initialEntries={['/authors/1/show']}>
+        <CoreAdmin dataProvider={dataProvider}>
+            <Resource
+                name="authors"
+                show={
+                    <ShowBase>
+                        <ReferenceManyFieldBase
+                            target="author"
+                            source="id"
+                            reference="books"
+                            queryOptions={{
+                                onSuccess: () =>
+                                    console.log('Query successful'),
+                                onError: () => console.log('Query failed'),
+                                retry: false,
+                            }}
+                        >
+                            <AuthorList source="title" />
+                        </ReferenceManyFieldBase>
+                    </ShowBase>
+                }
+            />
+        </CoreAdmin>
+    </TestMemoryRouter>
+);
+
+QueryOptions.args = {
+    dataProvider: dataProviderWithAuthors,
+};
+
+QueryOptions.argTypes = {
+    dataProvider: {
+        control: { type: 'radio' },
+        options: ['No error', 'With Error'],
+        mapping: {
+            'No error': dataProviderWithAuthors,
+            'With Error': dataProviderWithAuthorsError,
+        },
+    },
+};

packages/ra-core/src/controller/field/useReferenceManyFieldController.ts

@@ -5,7 +5,11 @@ import isEqual from 'lodash/isEqual.js';
 import lodashDebounce from 'lodash/debounce.js';
 
 import { removeEmpty, useEvent } from '../../util';
-import { useDataProvider, useGetManyReference } from '../../dataProvider';
+import {
+    useDataProvider,
+    useGetManyReference,
+    UseGetManyReferenceHookOptions,
+} from '../../dataProvider';
 import { useNotify } from '../../notification';
 import {
     Exporter,
@@ -359,7 +363,7 @@ export const useReferenceManyFieldController = <
 
 export interface UseReferenceManyFieldControllerParams<
     RecordType extends Record<string, any> = Record<string, any>,
-    ReferenceRecordType extends Record<string, any> = Record<string, any>,
+    ReferenceRecordType extends RaRecord = any,
     ErrorType = Error,
 > {
     debounce?: number;
@@ -375,10 +379,7 @@ export interface UseReferenceManyFieldControllerParams<
     storeKey?: string;
     target: string;
     queryOptions?: Omit<
-        UseQueryOptions<
-            { data: ReferenceRecordType[]; total: number },
-            ErrorType
-        >,
+        UseGetManyReferenceHookOptions<ReferenceRecordType, ErrorType>,
         'queryKey' | 'queryFn'
     >;
 }