Merge pull request #8895 from WiXSL/rf-queryoptions

Add `queryOptions` prop to `ReferenceField`

Author: djhi

docs/ReferenceField.md

@@ -79,6 +79,7 @@ With this configuration, `<ReferenceField>` wraps the user's name in a link to t
 | `emptyText` | Optional | `string`            | ''       | Defines a text to be shown when the field has no value or when the reference is missing |
 | `label`     | Optional | `string | Function` | `resources.[resource].fields.[source]`   | Label to use for the field when rendered in layout components  |
 | `link`      | Optional | `string | Function` | `edit`   | Target of the link wrapping the rendered child. Set to `false` to disable the link. |
+| `queryOptions`     | Optional | [`UseQueryOptions`](https://tanstack.com/query/v4/docs/reference/useQuery?from=reactQueryV3&original=https://react-query-v3.tanstack.com/reference/useQuery)                       | `{}`                             | `react-query` client options                                                                   |
 | `sortBy`    | Optional | `string | Function` | `source` | Name of the field to use for sorting when used in a Datagrid |
 
 `<ReferenceField>` also accepts the [common field props](./Fields.md#common-field-props).
@@ -143,6 +144,22 @@ You can also use a custom `link` function to get a custom path for the children.
 />
 ```
 
+## `queryOptions`
+
+Use the `queryOptions` prop to pass options to the `dataProvider.getMany()` query that fetches the referenced record.
+
+For instance, to pass [a custom `meta`](./Actions.md#meta-parameter):
+
+```jsx
+<ReferenceField 
+    source="user_id"
+    reference="users"
+    queryOptions={{ meta: { foo: 'bar' } }}
+>
+    <TextField source="name" />
+</ReferenceField>
+```
+
 ## `reference`
 
 The resource to fetch for the related record.

packages/ra-core/src/controller/useReference.ts

@@ -5,7 +5,7 @@ import { UseQueryOptions } from 'react-query';
 interface UseReferenceProps<RecordType extends RaRecord = any> {
     id: Identifier;
     reference: string;
-    options?: UseQueryOptions<RecordType[], Error>;
+    options?: UseQueryOptions<RecordType[], Error> & { meta?: any };
 }
 
 export interface UseReferenceResult<RecordType extends RaRecord = any> {
@@ -40,6 +40,7 @@ export interface UseReferenceResult<RecordType extends RaRecord = any> {
  * @param {Object} option
  * @param {string} option.reference The linked resource name
  * @param {string} option.id The id of the reference
+ * @param {Object} option.options Options passed to the dataProvider
  *
  * @returns {UseReferenceResult} The reference record
  */

packages/ra-ui-materialui/src/field/ReferenceField.spec.tsx

@@ -583,4 +583,33 @@ describe('<ReferenceField />', () => {
 
         expect(screen.findByText('Not found')).not.toBeNull();
     });
+
+    it('should accept a queryOptions prop', async () => {
+        const dataProvider = testDataProvider({
+            getMany: jest.fn().mockResolvedValue({
+                data: [{ id: 123, title: 'foo' }],
+            }),
+        });
+        render(
+            <ThemeProvider theme={theme}>
+                <CoreAdminContext dataProvider={dataProvider}>
+                    <ReferenceField
+                        record={record}
+                        resource="comments"
+                        source="postId"
+                        reference="posts"
+                        queryOptions={{ meta: { foo: 'bar' } }}
+                    >
+                        <TextField source="title" />
+                    </ReferenceField>
+                </CoreAdminContext>
+            </ThemeProvider>
+        );
+        await waitFor(() => {
+            expect(dataProvider.getMany).toHaveBeenCalledWith('posts', {
+                ids: [123],
+                meta: { foo: 'bar' },
+            });
+        });
+    });
 });

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

@@ -23,6 +23,7 @@ import {
 import { LinearProgress } from '../layout';
 import { Link } from '../Link';
 import { PublicFieldProps, fieldPropTypes, InjectedFieldProps } from './types';
+import { UseQueryOptions } from 'react-query';
 
 /**
  * Fetch reference record, and render its representation, or delegate rendering to child component.
@@ -106,6 +107,7 @@ export interface ReferenceFieldProps<RecordType extends RaRecord = any>
     extends PublicFieldProps,
         InjectedFieldProps<RecordType> {
     children?: ReactNode;
+    queryOptions?: UseQueryOptions<RecordType[], Error> & { meta?: any };
     reference: string;
     resource?: string;
     source: string;
@@ -120,7 +122,7 @@ export interface ReferenceFieldProps<RecordType extends RaRecord = any>
  */
 export const NonEmptyReferenceField: FC<
     Omit<ReferenceFieldProps, 'source'> & { id: Identifier }
-> = ({ children, id, record, reference, link, ...props }) => {
+> = ({ children, id, record, reference, link, queryOptions, ...props }) => {
     const createPath = useCreatePath();
     const resourceDefinition = useResourceDefinition({ resource: reference });
 
@@ -146,6 +148,7 @@ export const NonEmptyReferenceField: FC<
                 {...useReference({
                     reference,
                     id,
+                    options: queryOptions,
                 })}
                 resourceLinkPath={resourceLinkPath}
             >