add render props to ReferenceFIeldBase component

Author: ThieryMichel

packages/ra-core/src/controller/field/ReferenceFieldBase.spec.tsx

@@ -5,7 +5,13 @@ import { CoreAdminContext } from '../../core/CoreAdminContext';
 import { useResourceContext } from '../../core/useResourceContext';
 import { testDataProvider } from '../../dataProvider';
 import { ReferenceFieldBase } from './ReferenceFieldBase';
-import { Error, Loading, Meta } from './ReferenceFieldBase.stories';
+import {
+    Errored,
+    Loading,
+    Meta,
+    WithRenderProp,
+} from './ReferenceFieldBase.stories';
+import { WithRenderProps } from '../edit/EditBase.stories';
 
 describe('<ReferenceFieldBase />', () => {
     const defaultProps = {
@@ -23,7 +29,7 @@ describe('<ReferenceFieldBase />', () => {
             .mockImplementationOnce(() => {})
             .mockImplementationOnce(() => {});
 
-        render(<Error />);
+        render(<Errored />);
         await waitFor(() => {
             expect(screen.queryByText('Error')).not.toBeNull();
         });
@@ -46,8 +52,8 @@ describe('<ReferenceFieldBase />', () => {
             return <div>{resource}</div>;
         };
         const dataProvider = testDataProvider({
-            // @ts-ignore
             getList: () =>
+                // @ts-ignore
                 Promise.resolve({ data: [{ id: 1 }, { id: 2 }], total: 2 }),
         });
         render(
@@ -71,6 +77,7 @@ describe('<ReferenceFieldBase />', () => {
         const dataProvider = testDataProvider({
             getMany,
             getOne: () =>
+                // @ts-ignore
                 Promise.resolve({
                     data: {
                         id: 1,
@@ -92,4 +99,62 @@ describe('<ReferenceFieldBase />', () => {
             });
         });
     });
+
+    describe('with render prop', () => {
+        it('should display an error if error is defined', async () => {
+            jest.spyOn(console, 'error')
+                .mockImplementationOnce(() => {})
+                .mockImplementationOnce(() => {});
+
+            const dataProviderWithAuthorsError = {
+                getOne: () =>
+                    Promise.resolve({
+                        data: {
+                            id: 1,
+                            title: 'War and Peace',
+                            author: 1,
+                            summary:
+                                "War and Peace broadly focuses on Napoleon's invasion of Russia, and the impact it had on Tsarist society. The book explores themes such as revolution, revolution and empire, the growth and decline of various states and the impact it had on their economies, culture, and society.",
+                            year: 1869,
+                        },
+                    }),
+                getMany: _resource => Promise.reject(new Error('Error')),
+            } as any;
+
+            render(
+                <WithRenderProp dataProvider={dataProviderWithAuthorsError} />
+            );
+            await waitFor(() => {
+                expect(screen.queryByText('Error')).not.toBeNull();
+            });
+        });
+
+        it('should pass the loading state', async () => {
+            jest.spyOn(console, 'error')
+                .mockImplementationOnce(() => {})
+                .mockImplementationOnce(() => {});
+
+            const dataProviderWithAuthorsLoading = {
+                getOne: () =>
+                    Promise.resolve({
+                        data: {
+                            id: 1,
+                            title: 'War and Peace',
+                            author: 1,
+                            summary:
+                                "War and Peace broadly focuses on Napoleon's invasion of Russia, and the impact it had on Tsarist society. The book explores themes such as revolution, revolution and empire, the growth and decline of various states and the impact it had on their economies, culture, and society.",
+                            year: 1869,
+                        },
+                    }),
+                getMany: _resource => new Promise(() => {}),
+            } as any;
+
+            render(
+                <WithRenderProp dataProvider={dataProviderWithAuthorsLoading} />
+            );
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeNull();
+            });
+        });
+    });
 });

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

@@ -94,10 +94,10 @@ const dataProviderWithAuthorsError = {
                 year: 1869,
             },
         }),
-    getMany: _resource => Promise.reject('Error'),
+    getMany: _resource => Promise.reject(new Error('Error')),
 } as any;
 
-export const Error = ({ dataProvider = dataProviderWithAuthorsError }) => (
+export const Errored = ({ dataProvider = dataProviderWithAuthorsError }) => (
     <TestMemoryRouter initialEntries={['/books/1/show']}>
         <CoreAdmin
             dataProvider={dataProvider}
@@ -351,6 +351,50 @@ export const Meta = ({
     </TestMemoryRouter>
 );
 
+export const WithRenderProp = ({ dataProvider = dataProviderWithAuthors }) => (
+    <TestMemoryRouter initialEntries={['/books/1/show']}>
+        <CoreAdmin
+            dataProvider={dataProvider}
+            queryClient={
+                new QueryClient({
+                    defaultOptions: {
+                        queries: {
+                            retry: false,
+                        },
+                    },
+                })
+            }
+        >
+            <Resource name="authors" />
+            <Resource
+                name="books"
+                show={
+                    <ShowBase>
+                        <ReferenceFieldBase
+                            source="author"
+                            reference="authors"
+                            render={({ error, isPending }) => {
+                                if (isPending) {
+                                    return <p>Loading...</p>;
+                                }
+
+                                if (error) {
+                                    return (
+                                        <p style={{ color: 'red' }}>
+                                            {error.message}
+                                        </p>
+                                    );
+                                }
+                                return <TextField source="first_name" />;
+                            }}
+                        />
+                    </ShowBase>
+                }
+            />
+        </CoreAdmin>
+    </TestMemoryRouter>
+);
+
 const MyReferenceField = (props: { children: React.ReactNode }) => {
     const context = useReferenceFieldContext();
 
@@ -359,7 +403,7 @@ const MyReferenceField = (props: { children: React.ReactNode }) => {
     }
 
     if (context.error) {
-        return <p style={{ color: 'red' }}>{context.error}</p>;
+        return <p style={{ color: 'red' }}>{context.error.message}</p>;
     }
     return props.children;
 };

packages/ra-core/src/controller/field/ReferenceFieldBase.tsx

@@ -3,7 +3,10 @@ import { ReactNode } from 'react';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { ReferenceFieldContextProvider } from './ReferenceFieldContext';
 import { RaRecord } from '../../types';
-import { useReferenceFieldController } from './useReferenceFieldController';
+import {
+    useReferenceFieldController,
+    UseReferenceFieldControllerResult,
+} from './useReferenceFieldController';
 import { ResourceContextProvider } from '../../core';
 import { RecordContextProvider } from '../record';
 
@@ -43,7 +46,7 @@ export const ReferenceFieldBase = <
 >(
     props: ReferenceFieldBaseProps<ReferenceRecordType>
 ) => {
-    const { children } = props;
+    const { children, render } = props;
 
     const controllerProps =
         useReferenceFieldController<ReferenceRecordType>(props);
@@ -52,7 +55,7 @@ export const ReferenceFieldBase = <
         <ResourceContextProvider value={props.reference}>
             <ReferenceFieldContextProvider value={controllerProps}>
                 <RecordContextProvider value={controllerProps.referenceRecord}>
-                    {children}
+                    {render ? render(controllerProps) : children}
                 </RecordContextProvider>
             </ReferenceFieldContextProvider>
         </ResourceContextProvider>
@@ -63,6 +66,9 @@ export interface ReferenceFieldBaseProps<
     ReferenceRecordType extends RaRecord = RaRecord,
 > {
     children?: ReactNode;
+    render?: (
+        props: UseReferenceFieldControllerResult<ReferenceRecordType>
+    ) => ReactNode;
     className?: string;
     error?: ReactNode;
     queryOptions?: Partial<