Merge pull request #10828 from marmelab/use-can-access-record-key

Improve memory footprint of `useCanAccess` when it targets a record

Author: Madeorsk

packages/ra-core/package.json

@@ -28,6 +28,7 @@
     },
     "devDependencies": {
         "@hookform/resolvers": "^3.2.0",
+        "@tanstack/react-query-devtools": "^5.21.7",
         "@testing-library/react": "^15.0.7",
         "@types/jest": "^29.5.2",
         "@types/jscodeshift": "^0.11.11",

packages/ra-core/src/auth/CanAccess.stories.tsx

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { Location } from 'react-router';
 import { QueryClient } from '@tanstack/react-query';
 import { AuthProvider } from '../types';
-import { CoreAdminContext } from '../core';
+import { CoreAdminContext } from '../core/CoreAdminContext';
 import { CanAccess } from './CanAccess';
-import { TestMemoryRouter } from '..';
+import { TestMemoryRouter } from '../routing/TestMemoryRouter';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 export default {
     title: 'ra-core/auth/CanAccess',
@@ -109,3 +110,49 @@ export const NoAuthProvider = () => (
         </CoreAdminContext>
     </TestMemoryRouter>
 );
+
+const data = Array.from({ length: 1000 }, (_, i) => {
+    const post = {
+        id: i + 1,
+        title: `Post ${i + 1}`,
+        body: `This is the body of post ${i + 1}`,
+    };
+
+    Array.from({ length: 100 }, (_, i) => {
+        post[`property${i + 1}`] = `Another very long property ${i + 1}`;
+    });
+
+    return post;
+});
+
+export const ManyCalls = ({
+    authProvider = defaultAuthProvider,
+    queryClient,
+}: {
+    authProvider?: AuthProvider | null;
+    queryClient?: QueryClient;
+}) => (
+    <TestMemoryRouter>
+        <CoreAdminContext
+            authProvider={authProvider != null ? authProvider : undefined}
+            queryClient={queryClient}
+        >
+            <div>
+                {data.map(post => (
+                    <CanAccess
+                        key={post.id}
+                        action="read"
+                        resource="posts"
+                        record={post}
+                    >
+                        <div>{post.title}</div>
+                    </CanAccess>
+                ))}
+                <ReactQueryDevtools
+                    initialIsOpen={false}
+                    buttonPosition="bottom-right"
+                />
+            </div>
+        </CoreAdminContext>
+    </TestMemoryRouter>
+);

packages/ra-core/src/auth/useCanAccess.ts

@@ -62,11 +62,15 @@ export const useCanAccess = <
         );
     }
     const record = useRecordContext<RecordType>(params);
-
+    const { record: _record, ...restParams } = params;
     const authProviderHasCanAccess = !!authProvider?.canAccess;
 
     const queryResult = useQuery({
-        queryKey: ['auth', 'canAccess', { ...params, record, resource }],
+        queryKey: [
+            'auth',
+            'canAccess',
+            { ...restParams, recordId: record?.id, resource },
+        ],
         queryFn: async ({ signal }) => {
             if (!authProvider || !authProvider.canAccess) {
                 return true;

yarn.lock

@@ -16028,6 +16028,7 @@ __metadata:
   dependencies:
     "@hookform/resolvers": "npm:^3.2.0"
     "@tanstack/react-query": "npm:^5.21.7"
+    "@tanstack/react-query-devtools": "npm:^5.21.7"
     "@testing-library/react": "npm:^15.0.7"
     "@types/jest": "npm:^29.5.2"
     "@types/jscodeshift": "npm:^0.11.11"