Fix ReferenceField link is wrong when the record is not yet loaded

Closes marmelab#10301

Supersedes marmelab#10304

Author: fzaninotto

packages/ra-core/src/routing/useGetPathForRecord.spec.tsx

@@ -7,6 +7,7 @@ import {
     InferredShowLink,
     InferredShowLinkWithAccessControl,
     NoAuthProvider,
+    SlowLoading,
 } from './useGetPathForRecord.stories';
 import { AuthProvider } from '..';
 
@@ -83,4 +84,11 @@ describe('useGetPathForRecord', () => {
             )
         ).toEqual('/posts/123/show');
     });
+    it('should recompute the path when the record changes', async () => {
+        render(<SlowLoading />);
+        await screen.findByText('Show no link');
+        screen.getByText('Load record').click();
+        const link = await screen.findByText('Show', { selector: 'a' });
+        expect(link.getAttribute('href')).toEqual('/posts/123/show');
+    });
 });

packages/ra-core/src/routing/useGetPathForRecord.stories.tsx

@@ -85,6 +85,37 @@ export const InferredShowLink = () => (
     </TestMemoryRouter>
 );
 
+export const SlowLoading = () => {
+    const [record, setRecord] = React.useState<any>(undefined);
+    const handleClick = () => {
+        setRecord({ id: 123 });
+    };
+    return (
+        <TestMemoryRouter>
+            <CoreAdminContext>
+                <ResourceContextProvider value="posts">
+                    <ResourceDefinitionContextProvider
+                        definitions={{
+                            posts: {
+                                name: 'posts',
+                                hasEdit: true,
+                                hasShow: false,
+                            },
+                        }}
+                    >
+                        <RecordContextProvider value={record}>
+                            <div style={{ display: 'flex', gap: 2 }}>
+                                <ShowLink />
+                            </div>
+                            <button onClick={handleClick}>Load record</button>
+                        </RecordContextProvider>
+                    </ResourceDefinitionContextProvider>
+                </ResourceContextProvider>
+            </CoreAdminContext>
+        </TestMemoryRouter>
+    );
+};
+
 export const AccessControlWithLinkTypeProvided = ({
     authProvider = {
         login: () => Promise.resolve(),

packages/ra-core/src/routing/useGetPathForRecord.ts

@@ -125,6 +125,18 @@ export const useGetPathForRecord = <RecordType extends RaRecord = RaRecord>(
                       })
                     : false
             );
+            return;
+        }
+
+        // handle string case
+        if (link) {
+            setPath(
+                createPath({
+                    resource,
+                    id: record.id,
+                    type: link,
+                })
+            );
         }
     }, [
         createPath,

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

@@ -837,3 +837,60 @@ const AccessControlUI = ({
         </div>
     );
 };
+
+export const Nested = () => (
+    <TestMemoryRouter initialEntries={['/comments/1/show']}>
+        <CoreAdminContext
+            dataProvider={
+                {
+                    getMany: async resource => {
+                        if (resource === 'posts') {
+                            await new Promise(resolve =>
+                                setTimeout(resolve, 1000)
+                            );
+                            return { data: [{ id: 2, author_id: 3 }] };
+                        }
+                        if (resource === 'authors') {
+                            await new Promise(resolve =>
+                                setTimeout(resolve, 1000)
+                            );
+                            return { data: [{ id: 3, name: 'John Doe' }] };
+                        }
+                        throw new Error(`Unknown resource ${resource}`);
+                    },
+                } as any
+            }
+        >
+            <ResourceDefinitionContextProvider
+                definitions={{
+                    books: {
+                        name: 'books',
+                        hasShow: true,
+                        hasEdit: true,
+                    },
+                    posts: {
+                        name: 'posts',
+                        hasShow: true,
+                        hasEdit: true,
+                    },
+                    authors: {
+                        name: 'books',
+                        hasShow: true,
+                        hasEdit: true,
+                    },
+                }}
+            >
+                <ResourceContextProvider value="comments">
+                    <RecordContextProvider value={{ id: 1, post_id: 2 }}>
+                        <ReferenceField source="post_id" reference="posts">
+                            <ReferenceField
+                                source="author_id"
+                                reference="authors"
+                            />
+                        </ReferenceField>
+                    </RecordContextProvider>
+                </ResourceContextProvider>
+            </ResourceDefinitionContextProvider>
+        </CoreAdminContext>
+    </TestMemoryRouter>
+);