How can i disable the auto-refreshing feature of react-admin

user_5240845 0
Viewed 2293

So react-admin seems to have a feature where if you're idle for a little while and come back it will reload the data, presumably to make sure you're looking at the most up to date version of a record.

This is causing some issues for my editing feature that has some custom components. Is there a way to disable this auto-reload feature?

react-admin reactjs javascript
2 Answers

The auto-refresh is triggered by the loading indicator (the spinner icon that you see in the top right part of the app bar).

You can disable the auto-refresh by replacing the loading indicator by your own.

import * as React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useSelector } from 'react-redux';
import { makeStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';
import { useRefreshWhenVisible, RefreshIconButton } from 'react-admin';

const useStyles = makeStyles(
    {
        loader: {
            margin: 14,
        },
        loadedIcon: {},
    },
    { name: 'RaLoadingIndicator' }
);

const LoadingIndicator = props => {
    const { classes: classesOverride, className, ...rest } = props;
    useRefreshWhenVisible(); // <= comment this line to disable auto-refresh
    const loading = useSelector(state => state.admin.loading > 0);
    const classes = useStyles(props);
    return loading ? (
        <CircularProgress
            className={classNames('app-loader', classes.loader, className)}
            color="inherit"
            size={18}
            thickness={5}
            {...rest}
        />
    ) : (
        <RefreshIconButton className={classes.loadedIcon} />
    );
};

LoadingIndicator.propTypes = {
    classes: PropTypes.object,
    className: PropTypes.string,
    width: PropTypes.string,
};

export default LoadingIndicator;

You'll also need to put this button in a custom AppBar, inject your AppBar in a custom Layout, and use that Layout in your Admin, as explained in the react-admin Theming documentation.

user_13334790

I was able to turn off auto-refresh by dispatching the setAutomaticRefresh action from react-admin:

import { setAutomaticRefresh } from 'react-admin';
import { useDispatch } from 'react-redux';

// inside component
const dispatch = useDispatch();
dispatch(setAutomaticRefresh(false))

This action was added here as part of release 3.8.2.

user_33000450
Related