Apply review suggestions

Author: djhi

examples/simple/src/Layout.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-admin';
 import { onlineManager, useQueryClient } from '@tanstack/react-query';
 import { Stack, Tooltip } from '@mui/material';
-import CircleIcon from '@mui/icons-material/Circle';
+import OfflineIcon from '@mui/icons-material/SignalWifiConnectedNoInternet4';
 import '../assets/app.css';
 
 const MyAppBar = () => {
@@ -18,44 +18,45 @@ const MyAppBar = () => {
         <AppBar>
             <TitlePortal />
             <Stack direction="row" spacing={1}>
-                <Tooltip title={isOnline ? 'Online' : 'Offline'}>
-                    <CircleIcon
-                        sx={{
-                            color: isOnline ? 'success.main' : 'warning.main',
-                            width: 24,
-                            height: 24,
-                        }}
-                    />
-                </Tooltip>
+                {!isOnline ? (
+                    <Tooltip title="Offline">
+                        <OfflineIcon
+                            sx={{
+                                color: 'warning.main',
+                                width: 24,
+                                height: 24,
+                            }}
+                        />
+                    </Tooltip>
+                ) : null}
             </Stack>
             <InspectorButton />
         </AppBar>
     );
 };
 
-export default ({ children }) => {
-    return (
-        <>
-            <Layout appBar={MyAppBar}>
-                {children}
-                <NotificationsFromQueryClient />
-            </Layout>
-            <ReactQueryDevtools
-                initialIsOpen={false}
-                buttonPosition="bottom-left"
-            />
-        </>
-    );
-};
+export const MyLayout = ({ children }) => (
+    <>
+        <Layout appBar={MyAppBar}>
+            {children}
+            <NotificationsFromQueryClient />
+        </Layout>
+        <ReactQueryDevtools
+            initialIsOpen={false}
+            buttonPosition="bottom-left"
+        />
+    </>
+);
 
 const useIsOnline = () => {
     const [isOnline, setIsOnline] = React.useState(onlineManager.isOnline());
+
     React.useEffect(() => {
-        const handleChange = isOnline => {
-            setIsOnline(isOnline);
+        const handleChange = () => {
+            setIsOnline(onlineManager.isOnline());
         };
         return onlineManager.subscribe(handleChange);
-    });
+    }, []);
 
     return isOnline;
 };
@@ -69,12 +70,15 @@ const NotificationsFromQueryClient = () => {
     const queryClient = useQueryClient();
     const notify = useNotify();
 
-    queryClient.setMutationDefaults([], {
-        onSettled(data, error) {
-            if (error) {
-                notify(error.message, { type: 'error' });
-            }
-        },
-    });
+    React.useEffect(() => {
+        queryClient.setMutationDefaults([], {
+            onSettled(data, error) {
+                if (error) {
+                    notify(error.message, { type: 'error' });
+                }
+            },
+        });
+    }, [queryClient, notify]);
+
     return null;
 };

examples/simple/src/index.tsx

@@ -16,7 +16,7 @@ import CustomRouteLayout from './customRouteLayout';
 import CustomRouteNoLayout from './customRouteNoLayout';
 import dataProvider from './dataProvider';
 import i18nProvider from './i18nProvider';
-import Layout from './Layout';
+import { MyLayout } from './Layout';
 import posts from './posts';
 import users from './users';
 import tags from './tags';
@@ -26,7 +26,7 @@ const localStoragePersister = createSyncStoragePersister({
     storage: window.localStorage,
 });
 
-addOfflineSupportToQueryClient({
+const queryClientWithOfflineSupport = addOfflineSupportToQueryClient({
     queryClient,
     dataProvider,
     resources: ['posts', 'comments', 'tags', 'users'],
@@ -38,20 +38,20 @@ const root = createRoot(container);
 root.render(
     <React.StrictMode>
         <PersistQueryClientProvider
-            client={queryClient}
+            client={queryClientWithOfflineSupport}
             persistOptions={{ persister: localStoragePersister }}
             onSuccess={() => {
                 // resume mutations after initial restore from localStorage is successful
-                queryClient.resumePausedMutations();
+                queryClientWithOfflineSupport.resumePausedMutations();
             }}
         >
             <Admin
                 authProvider={authProvider}
                 dataProvider={dataProvider}
                 i18nProvider={i18nProvider}
-                queryClient={queryClient}
+                queryClient={queryClientWithOfflineSupport}
                 title="Example Admin"
-                layout={Layout}
+                layout={MyLayout}
             >
                 <Resource name="posts" {...posts} />
                 <Resource name="comments" {...comments} />

examples/simple/src/posts/PostCreate.tsx

@@ -46,7 +46,6 @@ import { Link, useSearchParams } from 'react-router-dom';
 let next_id = 100;
 const getNewId = (mutationMode: MutationMode) => {
     const id = mutationMode === 'pessimistic' ? undefined : next_id++;
-    console.log({ mutationMode, id });
     return id;
 };
 

packages/ra-core/src/dataProvider/addOfflineSupportToQueryClient.ts

@@ -1,5 +1,5 @@
 import type { QueryClient } from '@tanstack/react-query';
-import { reactAdminMutations } from './dataFetchActions';
+import { DataProviderMutations } from './dataFetchActions';
 import type { DataProvider } from '../types';
 
 /**
@@ -90,7 +90,7 @@ export const addOfflineSupportToQueryClient = ({
     queryClient: QueryClient;
 }) => {
     resources.forEach(resource => {
-        reactAdminMutations.forEach(mutation => {
+        DataProviderMutations.forEach(mutation => {
             queryClient.setMutationDefaults([resource, mutation], {
                 mutationFn: async params => {
                     const dataProviderFn = dataProvider[mutation] as Function;
@@ -99,4 +99,6 @@ export const addOfflineSupportToQueryClient = ({
             });
         });
     });
+
+    return queryClient;
 };

packages/ra-core/src/dataProvider/dataFetchActions.ts

@@ -8,7 +8,7 @@ export const UPDATE_MANY = 'UPDATE_MANY';
 export const DELETE = 'DELETE';
 export const DELETE_MANY = 'DELETE_MANY';
 
-export const reactAdminMutations = [
+export const DataProviderMutations = [
     'create',
     'delete',
     'update',

packages/ra-core/src/dataProvider/useGetList.ts

@@ -176,7 +176,7 @@ export const useGetList = <
                   }
                 : result,
         [result]
-    ) as unknown as UseQueryResult<RecordType[], Error> & {
+    ) as UseQueryResult<RecordType[], Error> & {
         total?: number;
         pageInfo?: {
             hasNextPage?: boolean;

packages/ra-core/src/dataProvider/useGetManyReference.ts

@@ -155,7 +155,7 @@ export const useGetManyReference = <
                   }
                 : result,
         [result]
-    ) as unknown as UseQueryResult<RecordType[], ErrorType> & {
+    ) as UseQueryResult<RecordType[], ErrorType> & {
         total?: number;
         pageInfo?: {
             hasNextPage?: boolean;