Merge pull request #9275 from marmelab/fix-reference-array-field-not-support-query-options-next

Add queryOptions support for ReferenceArrayField

Author: djhi

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

@@ -4,9 +4,11 @@ import { RaRecord, SortPayload } from '../../types';
 import { useGetManyAggregate } from '../../dataProvider';
 import { ListControllerResult, useList } from '../list';
 import { useNotify } from '../../notification';
+import { UseQueryOptions } from 'react-query';
 
 export interface UseReferenceArrayFieldControllerParams<
-    RecordType extends RaRecord = RaRecord
+    RecordType extends RaRecord = RaRecord,
+    ReferenceRecordType extends RaRecord = RaRecord
 > {
     filter?: any;
     page?: number;
@@ -16,6 +18,7 @@ export interface UseReferenceArrayFieldControllerParams<
     resource: string;
     sort?: SortPayload;
     source: string;
+    queryOptions?: UseQueryOptions<ReferenceRecordType[], Error>;
 }
 
 const emptyArray = [];
@@ -49,7 +52,10 @@ export const useReferenceArrayFieldController = <
     RecordType extends RaRecord = RaRecord,
     ReferenceRecordType extends RaRecord = RaRecord
 >(
-    props: UseReferenceArrayFieldControllerParams<RecordType>
+    props: UseReferenceArrayFieldControllerParams<
+        RecordType,
+        ReferenceRecordType
+    >
 ): ListControllerResult => {
     const {
         filter = defaultFilter,
@@ -59,9 +65,11 @@ export const useReferenceArrayFieldController = <
         reference,
         sort = defaultSort,
         source,
+        queryOptions = {},
     } = props;
     const notify = useNotify();
     const value = get(record, source);
+    const { meta, ...otherQueryOptions } = queryOptions;
 
     const ids = useMemo(() => {
         if (Array.isArray(value)) return value;
@@ -73,7 +81,7 @@ export const useReferenceArrayFieldController = <
         ReferenceRecordType
     >(
         reference,
-        { ids },
+        { ids, meta },
         {
             onError: error =>
                 notify(
@@ -92,6 +100,7 @@ export const useReferenceArrayFieldController = <
                         },
                     }
                 ),
+            ...otherQueryOptions,
         }
     );
 

packages/ra-ui-materialui/src/field/ReferenceArrayField.stories.tsx

@@ -20,9 +20,11 @@ const fakeData = {
 
 export default { title: 'ra-ui-materialui/fields/ReferenceArrayField' };
 
+const dataProvider = fakeRestProvider(fakeData, false);
+
 export const DifferentIdTypes = () => {
     return (
-        <AdminContext dataProvider={fakeRestProvider(fakeData, false)}>
+        <AdminContext dataProvider={dataProvider}>
             <CardContent>
                 <Show resource="bands" id={1} sx={{ width: 600 }}>
                     <TextField source="name" fullWidth />
@@ -41,3 +43,35 @@ export const DifferentIdTypes = () => {
         </AdminContext>
     );
 };
+
+const dataProviderWithLog = {
+    ...dataProvider,
+    getMany: (resource, params) => {
+        console.log('getMany', resource, params);
+        return dataProvider.getMany(resource, params);
+    },
+} as any;
+
+export const WithMeta = () => {
+    return (
+        <AdminContext dataProvider={dataProviderWithLog}>
+            <CardContent>
+                <Show resource="bands" id={1} sx={{ width: 600 }}>
+                    <TextField source="name" />
+                    <ReferenceArrayField
+                        source="members"
+                        reference="artists"
+                        queryOptions={{
+                            meta: { foo: 'bar' },
+                        }}
+                    >
+                        <Datagrid bulkActionButtons={false}>
+                            <TextField source="id" />
+                            <TextField source="name" />
+                        </Datagrid>
+                    </ReferenceArrayField>
+                </Show>
+            </CardContent>
+        </AdminContext>
+    );
+};

packages/ra-ui-materialui/src/field/ReferenceArrayField.tsx

@@ -20,6 +20,7 @@ import { fieldPropTypes, FieldProps } from './types';
 import { LinearProgress } from '../layout';
 import { SingleFieldList } from '../list/SingleFieldList';
 import { ChipField } from './ChipField';
+import { UseQueryOptions } from 'react-query';
 
 /**
  * A container component that fetches records from another resource specified
@@ -81,7 +82,7 @@ export const ReferenceArrayField = <
     RecordType extends RaRecord = RaRecord,
     ReferenceRecordType extends RaRecord = RaRecord
 >(
-    props: ReferenceArrayFieldProps<RecordType>
+    props: ReferenceArrayFieldProps<RecordType, ReferenceRecordType>
 ) => {
     const {
         filter,
@@ -91,6 +92,7 @@ export const ReferenceArrayField = <
         resource,
         sort,
         source,
+        queryOptions,
     } = props;
     const record = useRecordContext(props);
     const controllerProps = useReferenceArrayFieldController<
@@ -105,6 +107,7 @@ export const ReferenceArrayField = <
         resource,
         sort,
         source,
+        queryOptions,
     });
     return (
         <ResourceContextProvider value={reference}>
@@ -126,10 +129,12 @@ ReferenceArrayField.propTypes = {
     sortBy: PropTypes.string,
     sortByOrder: fieldPropTypes.sortByOrder,
     source: PropTypes.string.isRequired,
+    queryOptions: PropTypes.any,
 };
 
 export interface ReferenceArrayFieldProps<
-    RecordType extends RaRecord = RaRecord
+    RecordType extends RaRecord = RaRecord,
+    ReferenceRecordType extends RaRecord = RaRecord
 > extends FieldProps<RecordType> {
     children?: ReactNode;
     filter?: FilterPayload;
@@ -139,11 +144,12 @@ export interface ReferenceArrayFieldProps<
     reference: string;
     sort?: SortPayload;
     sx?: SxProps;
+    queryOptions?: UseQueryOptions<ReferenceRecordType[], Error>;
 }
 
 export interface ReferenceArrayFieldViewProps
     extends Omit<ReferenceArrayFieldProps, 'resource' | 'page' | 'perPage'>,
-        ListControllerProps {}
+        Omit<ListControllerProps, 'queryOptions'> {}
 
 export const ReferenceArrayFieldView: FC<ReferenceArrayFieldViewProps> = props => {
     const { children, pagination, reference, className, sx } = props;