react-admin List组件自定义按钮触发列表自动重载的原因及禁用方案

react-admin 内部基于 react-query 实现数据请求管理，同时默认监听全局身份状态变更：当你调用 authProvider.xxx 更新了 token 后，会触发 react-admin 内部的身份状态变更事件，所有当前活跃的资源查询（包括你当前打开的列表查询）默认会被触发重拉，用来保证身份权限变更后数据的合法性，这就是第三步自动请求的来源。

你可以根据自己的业务需求选择以下任意一种方案：

方案1：直接禁用List组件所有自动刷新（最便捷） #

react-admin 的 List 组件原生提供 disableRefresh 属性，设置为 true 后会直接禁用所有自动重载行为，包括身份变更、窗口焦点恢复、网络重连触发的列表刷新，修改代码如下：

export const MyList = ({ ...props }) => {
    return <List exporter={false} perPage={50} disableRefresh {...props}>
        <Datagrid>
            <TextField source="name" />
            <TextField source="code" />
            <MyButton />
        </Datagrid>
    </List>
};

方案2：仅禁用身份变更触发的自动刷新（保留其他自动刷新能力） #

如果你还需要保留窗口焦点恢复、网络重连等场景的自动刷新能力，可以通过 queryOptions 配置重拉规则，修改代码如下：

export const MyList = ({ ...props }) => {
    return <List 
        exporter={false} 
        perPage={50} 
        queryOptions={{
            // 无限延长缓存有效时间，不会主动触发刷新
            staleTime: Infinity,
            // 禁用网络重连后的自动重拉
            refetchOnReconnect: false
        }}
        {...props}
    >
        <Datagrid>
            <TextField source="name" />
            <TextField source="code" />
            <MyButton />
        </Datagrid>
    </List>
};

方案3：仅避免本次点击按钮后的自动刷新（保留所有默认自动刷新能力） #

如果你不想修改List的全局刷新配置，只需要避免这次点击按钮后的多余请求，可以在跳转前手动清除当前列表的查询缓存，修改按钮代码如下：

import { useQueryClient } from 'react-query';

export const MyButton = ({ record }) => {
    const [state, setState] = useSafeSetState({
        error: false,
        loading: false,
        loaded: false,
    });

    const authProvider = useAuthProvider();
    const notify = useNotify();
    const redirect = useRedirect();
    // 获取react-query的客户端实例
    const queryClient = useQueryClient();

    const handle = async () => {
        setState({ error: false, loading: true, loaded: false })
        try {
            await authProvider.xxx(record.id);
            console.log('xxx successful');
            // 替换为你当前列表对应的资源名称，移除对应查询缓存
            queryClient.removeQueries(['getList', '你当前的资源名']);
            redirect('/anotherResource');
        } catch (e) {
            setState({ error: true, loading: false, loaded: false })
            notify(e.message, { type: 'error' });
        }

    };

    if (state.error) return <ErrorMessage message="ERROR"></ErrorMessage>;
    if (state.loading) return <p>...</p>;
    if (state.impersonated) return null;
    return (
        <Button onClick={handle}></Button>
    );
};

内容的提问来源于stack exchange，提问作者Christophe Blin