react-admin - 如果用户在 react-admin 的列表视图中单击刷新按钮，如何通知后端？

Question

react-admin 默认在列表视图中提供 ootb 刷新按钮。当用户点击它时，从后端请求数据的方式与用户第一次打开列表视图页面时的方式相同。

我的后端从第三个系统获取数据并缓存它。在后端我需要区分两种情况：

1. 用户打开列表视图 -> 提供缓存数据
2. 用户单击刷新-> 刷新缓存（从第三个系统获取数据）并传递数据

我现在的想法是仅当用户单击刷新时才向 GET 请求添加另一个参数，以便后端可以对其做出反应并刷新其缓存。我怎样才能做到这一点？

标签： react-admin

Answer 1

如果 API 调用由 react-admin 上的刷新按钮触发，则无法向 API 调用添加另一个查询参数。这是因为 Refresh 按钮只强制重新渲染整个页面，它重新运行与原始渲染完全相同的获取代码。

在您的情况下，您最好的选择是将默认的 RefreshButton 替换为您的韩元版本，该版本连续执行两件事：

1. 调用 API 中的特殊路由，要求刷新缓存
2. 调度刷新操作（如在原始 RefreshButton 中），这将触发所有 dataProvider 调用的 rerenred 和 refetch。

就像是：

const RefreshButton = ({
    label = 'ra.action.refresh',
    icon = defaultIcon,
    onClick,
    ...rest
}) => {
    const dispatch = useDispatch();
    const handleClick = useCallback(
        event => {
            event.preventDefault();
            fetch('/my/api/refresh').then(() => {
                dispatch(refreshView());            
            })
            
            if (typeof onClick === 'function') {
                onClick(event);
            }
        },
        [dispatch, onClick]
    );

    return (
        <Button label={label} onClick={handleClick} {...rest}>
            {icon}
        </Button>
    );
};