如何禁用react-admin的自动刷新功能

Question

所以react-admin似乎有一个功能，如果你闲置了一段时间然后回来，它会重新加载数据，大概是为了确保你正在查看记录的最新版本。

这导致我的编辑功能（具有一些自定义组件）出现一些问题。有没有办法禁用此自动重新加载功能？

Answer 1

自动刷新由加载指示器（您在应用程序栏右上角看到的微调器图标）触发。

您可以通过替换自己的加载指示器来禁用自动刷新。

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;

您还需要将此按钮放在自定义 AppBar 中，将 AppBar 注入自定义布局中，然后在管理中使用该布局，如 react-admin 主题文档中所述。

Answer 2

从react-admin 4.x开始，它使用react-query来处理数据处理的这一部分。您可以在

queryClient

组件上设置自定义

<Admin>

来禁用 React-query 的

refetchOnWindowFocus

功能。

//App.tsx

import { Admin } from "react-admin";
import { QueryClient } from "react-query";

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            refetchOnWindowFocus: false
        }
    },
});

export const App = () => (
    <Admin 
       queryClient={queryClient}
       //...otherProperties
    />
);

Answer 3

我可以通过从

setAutomaticRefresh

调度

react-admin

操作来关闭自动刷新：

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

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

此操作已添加到此处，作为版本 3.8.2的一部分。